How to add "Drop Down Sub Navigation" Function

[kupendran]

I Want to add my sub navigation list as drop down format like when we over the cursor on the main menu, Its should be show the sub navigation list in that drop down list.

So, Is there any option to modify the default sub navigation menu details to drop down list navigation in vbulletin 5?

[sn1p3r001]

I haven't found a way to do this and utilize the built-in nav manager to set up the links, but I did one with some CSS and HTML additions to templates. OBviously this isn't ideal, but if you really need the drop downs for aesthetic or accessibility reasons, this will probably do the trick until it becomes a feature in VB5. Below is a copy of mine. You can see it in action here:

http://vb5.luckyshotgaming.com

First we have our HTML for the navbar options. Customize this as needed. It's pretty straightforward. All Caps are the main menu items. The lowercase ones below are the sub items. You need to put the URLs to your pages where the #s are.

<ul id="customdropdownnav">
    
      <li>
        <a href="#">HOME</a>
      </li>

     <li>
        <a href="#">FORUMS</a>
    </li>

       
    <li>
        <a href="#">OUR COMMUNITY</a>
        <ul>
            <li><a href="#">Ranks</a></li>            
            <li><a href="#">Awards</a></li>
            <li><a href="#">Rules</a></li>
            <li><a href="#">Structure</a></li>
            <li><a href="#">Steam Group</a></li>
            <li><a href="#">Battlelog Platoon</a></li>
        </ul>
    </li>
    
    <li>
        <a href="#">SERVERS</a>
        <ul>
            <li><a href="#">Server Information</a></li>
            <li><a href="#">Leaderboards</a></li>
            
        </ul>
    </li>
    
    <li>
        <a href="#">LINKS</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>

        </ul>
    </li>
</ul>

Then the CSS. You will have to go through and change things to meet your color needs. It's pretty well commented, so it should be easy enough. This was based on the default style for vb5, with some minor color adjustments.

/*---NAV --- */
#customdropdownnav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:left; /* Clear floats */
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#customdropdownnav li{
    float:left;
    margin-right:0px;
    position:relative;
}
#customdropdownnav a{ /* Change properties of main menu items */
    display:block;
    padding-left:17px;
    padding-right:17px;
    padding-top:10px;
    padding-bottom:10px;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-image: url("http://www.vb5.luckyshotgaming.com/images/menugradient.png"); /* Change this if your navbar has a background image. Remove it if it doesn't */
    text-decoration:none;
}
#customdropdownnav a:hover{ /* Change properties of main menu items when you hover over them */
    color:#fff;
    background:#2379b5;
        text-decoration:none;
}

/*--- DROPDOWN ---*/
#customdropdownnav ul{
    background:#fff; /* For IE7+ compatibility. Make this as close to your page's background as possible. */
    background:rgba(255,255,255,0); /*Makes said background transparent when possible. */
    list-style:none;
    position:absolute;
    left:-9999px; /* DO NOT EDIT */
}
#customdropdownnav ul li{
    padding-top:1px; /* Changes spacing between the sub-items spaced items */
    float:none;
}
#customdropdownnav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#customdropdownnav li:hover ul{ /* Display the dropdown on hover*/
    left:0; 
}
#customdropdownnav li:hover a{ /* Change color of main menu item when hovering over a sub item */
    background:#2379b5;
    color:#ffffff;
    text-decoration:none;
}
#customdropdownnav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#customdropdownnav li:hover ul li a:hover{ /* Change individual dropdown hover colors */
    background:#ffffff;
    color:#2379b5;
}

To install this:

1. BACK UP your header and additional css templates. Copy and paste everything and save it somewhere in case something goes screwy.
2. Add the CSS to the additional css template.
3. Copy and paste the HTML into the header template where the current nav bar is (I searched fand overwrote the current one. This eliminated the nav bar and the subnav.)

If you're not too great with code, there are some neat website out there like JSFiddle that you can copy and paste the codes above into, tweak, and see how your changes modify the outcome BEFORE you put it on your site. I would recommend trying one if you're not code savvy.


Keep in mind that an edit like this will require manual header changes in order to keep the nav menu up to date. Editing in the built-in nav manager WILL NOT update this bar. It must be done by hand through the header template. I know it's not perfect, but it's quick and dirty fix until it's a feature.

[ChristianAlfred]

Is there a way to use only CSS and not change headercode?