Add a sexy drop down menù

Add a sexy drop down menù - sothanaka

First step

Hello,

This tutorialwill show you how to make a sexy jQuery drop-down menu with triggers.

The full tutorial, by Soh Tanaka, can be found here: http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html

But the big question, which everybody ask -- all the time, is: "How can I append this to my Forumotion board?". This tutorial will describe how to install it into your board.

Step 1: Html
Navigate to your overall_header template.

Find:

Code: Select Content

<ul class="clearfix">
   <li>{GENERATED_NAV_BAR}</li>
   </ul>

.. And replace it with this:

Code: Select Content

<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>

Converted with session brackets by Gansgar15.

We're done with the HTML. Next step!

Step 2: Cascading Style Sheets
Navigate to the CSS section of your board, and add:

Code: Select Content


#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;
}

Time for the magic.

In overall_header, inside the tag, put:

Code: Select Content

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

Time for our last step, AJAX to count the PM's.

First thing
You need to put the image in Private message ... locate in Picture Management

Code: Select Content


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

    else {
      $('a.mailbox').html('Messages ('+count+')');
    }
  }
});

Replace IMAGE HERE with your private message image you had

Stuck? Shout out in the Web Design section.


Credits:
shadowz_au - concept
Gangstar15 - log in/out
Saxaca - PM parsing AJAX

Written by shadowz_au • Improved by Saxaca