You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Sexy Drop Down Menu on Thu Jul 12, 2012 8:00 am

Verrell123 Admin

avatar

Sexy Drop Down Menu

See the Source

In this tutorial you will learn how to create a beautiful and professional Drop Down Menu. We will create this effect using jQuery.



Step 1:
Administration Panel » Display » Templates » General
Edit template overall_header

Find this code
Code:

    <div id="pun-navlinks">
            <ul class="clearfix">
          <li>{GENERATED_NAV_BAR}</li>
      </ul>
    </div>

And replace with this:
Code:

<ul class="topnav">
<li><a href="forum">Home</a></li>
    <li>
        <a href="faq">Faq</a>
        <ul class="subnav">
            <li><a href="#">test1</a></li>
            <li><a href="#">test2</a></li>
        </ul>
    </li>
    <li>
        <a href="memberlist">Memberlist</a>
        <ul class="subnav">
            <li><a href="#">test3</a></li>
            <li><a href="#">test4</a></li>
        </ul>
 </li>
<!-- BEGIN switch_user_logged_in -->
    <li><a href="/groups">Usergroups</a></li>
    <li><a href="/profile?mode=editprofile">Profile</a></li>
    <li><a href="/privmsg?folder=inbox" class="p-m">Mailbox</a></li>
    <li><a href="/login?logout">Logout</a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
    <li><a href="/register">Register</a></li>
  <li><a href="/login">Login</a></li>
<!-- END switch_user_logged_out -->
</ul>

Step 2:
Add this to Your CSS
Code:
#pun-head #pun-navlinks {
  list-style: none;
  padding: 0 20px;
  margin: 0;
  float: left;
  width: 842px;
  background: #222;
  font-size: 1.0em;
  background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif') repeat-x;
}
ul.topnav li {
  float: left;
  margin: 0;
  padding: 0 15px 0 0;
  position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
  padding: 10px 5px;
  color: #fff;
  display: block;
  text-decoration: none;
  float: left;
}
ul.topnav li a:hover{
  background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_hover.gif') no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
  width: 17px;
  height: 35px;
  float: left;
  background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/subnav_btn.gif') no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
  list-style: none;
  position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
  left: 0; top: 35px;
  background: #333;
  margin: 0; padding: 0;
  display: none;
  float: left;
  width: 170px;
  border: 1px solid #111;
}
ul.topnav li ul.subnav li{
  margin: 0; padding: 0;
  border-top: 1px solid #252525; /*--Create bevel effect--*/
  border-bottom: 1px solid #444; /*--Create bevel effect--*/
  clear: both;
  width: 170px;
}
html ul.topnav li ul.subnav li a {
  float: left;
  width: 145px;
  background: #333 url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif') no-repeat 10px center;
  padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
  background: #222 url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif') no-repeat 10px center;
}

Step 3:
Put this in the template overall_header where other script are below head tag.
Code:

    <script type="text/javascript" src="http://near-reality123123123.webs.com/bar.js"></script>

Step 4:
Add this: http://forum.freshartz.co.cc/t72-sexy-drop-down-menu#450

To Your Javascript

Problem? Post here!



Last edited by Verrell123 on Thu Jul 12, 2012 7:53 pm; edited 1 time in total

View user profile http://forum.verrell123.co.cc/

2 Re: Sexy Drop Down Menu on Thu Jul 12, 2012 1:26 pm

Thanks for share this Very Happy

View user profile http://freshartz2.indonesianforum.net/

3 Re: Sexy Drop Down Menu on Thu Jul 12, 2012 6:57 pm

question,what about new messages? and login logout?

View user profile http://supporter.forumotion.com

4 Re: Sexy Drop Down Menu on Thu Jul 12, 2012 7:52 pm

Verrell123 Admin

avatar
Code:

$.ajax({
  url: '/privmsg?folder=inbox',
  success: function(ajax) {
    count = $('img[src="IMAGE HERE"]', ajax).length;
 
    if (count < 1) {
      $('a.p-m').html('Messages');
    }

    else {
      $('a.p-m').html('Messages ('+count+')');
    }
  }
});

Add this in you Javascript

View user profile http://forum.verrell123.co.cc/

5 Re: Sexy Drop Down Menu on Thu Jul 12, 2012 10:18 pm

Very Happy that nice..

View user profile http://supporter.forumotion.com

6 Re: Sexy Drop Down Menu on Fri Jul 13, 2012 12:17 pm

thanks for share this Very Happy

View user profile

7 Re: Sexy Drop Down Menu on Sat Nov 10, 2012 7:12 pm

why that so ugly ? can u check it again .. on my forum http://endomotion.forumid.net/

View user profile

Sponsored content

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

 


Sitemap
FreshArtz
FreshArtz © 2012
Design by Verrell123
Donate
Demo Page

About
We are Web Design and Coding forum, we will help member how to coding and design website, there many category about web design and coding.