Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 09 Aug 2014, 05:14
kupendran kupendran is offline
 
Join Date: Aug 2014
How to add "Drop Down Sub Navigation" Function

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?
Reply With Quote
  #2  
Old 25 Aug 2014, 11:21
sn1p3r001 sn1p3r001 is offline
 
Join Date: Jun 2013
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.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



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.

Last edited by sn1p3r001; 26 Aug 2014 at 11:14.
Reply With Quote
  #3  
Old 03 Jan 2016, 15:14
ChristianAlfred ChristianAlfred is offline
 
Join Date: Nov 2007
Is there a way to use only CSS and not change headercode?
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 19:59.

Layout Options | Width: Wide Color: