Icon Navbar with Multi Level Menus

[Da-Vinci]

This is a follow up of my Icon Navbar with dropdown menus (https://vborg.vbsupport.ru/showthread.php?t=262376), quite a few people where asking for multi level menus, so after lots of reading and some help from RobbieZ (https://vborg.vbsupport.ru/member.php?u=264571), here it is.

http://img62.imageshack.us/img62/9350/dropdown.png

First off download the zip file, extract and upload the contents to your forum root (The place on your FTP where your forum files live).

Now in your Admin CP, go to Styles & Templates-->Style Manager, click the dropdown menu for the style you'd like to add this to and select Edit Templates.

Now look for CSS Templates-->additional.css at the very bottom of your additionl.css template, add the following.

.flexdropdownmenu, .flexdropdownmenu ul{ /*topmost and sub ULs, respectively*/
font: normal 11px Arial;
margin: 0;
padding: 6;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 2px solid #C4C4C4;
border-bottom-width: 1px;
visibility: hidden;
display: none; /*collapse all sub menus to begin with*/
}


.flexdropdownmenu li{
position: relative;
}

.flexdropdownmenu li a{
display: block;
width: 160px;
height: 09px;
color: {vb:stylevar popupmenu_color};
background: {vb:stylevar body_background};
border-bottom: {vb:stylevar popupmenu_border};
text-decoration: none;
padding: 10px 10px;
}

* html .flexdropdownmenu li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.flexdropdownmenu li a:hover, .flexdropdownmenu li.selected>a{
background: {vb:stylevar imodhilite_backgroundColor};
color: {vb:stylevar imodhilite_color};
text-decoration: underline;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

table,td,th
{
border:0px;
}
table
{
width:100%;
}
th
{
height:75px;
}
text-align:center;
}

Click save.

Now look for your header template. At the very top of the template, before everything else add.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="flexdropdown.js">

/***********************************************
* Flex Level Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Click Save

The Javascript is open source and provided by Dynamic Drive (http://dynamicdrive.com/dynamicindex1/flexdropdown.htm) so please leave the copyright intact.

Now for the menu.

While still in the templates menu, look for Navigation / Breadcrumb Templates-->navbar, in the navbar template look for {vb:raw ad_location.global_below_navbar}, directly underneath add the following.

(You will need to change the coloured text to suit your needs Image Links, Destination links, Menu Item, Category/Sub Category Names)

<!-- Da-Vinci Navbar Multi Level Icon Menu -->
<table>
<tr>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 1" data-flexmenu="flexmenu1">Category Name 1</a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 2" data-flexmenu="flexmenu2">Category Name 2<img src="images/misc/black_downward_arrow.png"></a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 3" data-flexmenu="flexmenu3">Category Name 3<img src="images/misc/black_downward_arrow.png"></a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 4" data-flexmenu="flexmenu4">Category Name 4<img src="images/misc/black_downward_arrow.png"></a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 5" data-flexmenu="flexmenu5">Category Name 5<img src="images/misc/black_downward_arrow.png"></a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 6" data-flexmenu="flexmenu6">Category Name 6<img src="images/misc/black_downward_arrow.png"></a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 7" data-flexmenu="flexmenu7">Category Name 7<img src="images/misc/black_downward_arrow.png"></a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 8" data-flexmenu="flexmenu8">Category Name 8<img src="images/misc/black_downward_arrow.png"></a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 9" data-flexmenu="flexmenu9">Category Name 9<img src="images/misc/black_downward_arrow.png"></a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 10" data-flexmenu="flexmenu10">Category Name 10<img src="images/misc/black_downward_arrow.png"></a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 11" data-flexmenu="flexmenu11">Category Name 11<img src="images/misc/black_downward_arrow.png"></a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 12" data-flexmenu="flexmenu12">Category Name 12<img src="images/misc/black_downward_arrow.png"></a></p></td>
</tr>
</table>
<br />
<br />

<!--HTML for Flex Drop Down Menu 1-->
<ul id="flexmenu1" class="flexdropdownmenu">
<li><a href="destination link 1.1">New</a></li>
<li><a href="destination link 1.2">Dropdown</a></li>
<li><a href="destination link 1.3">Menu</a>
<ul>
<li><a href="destination link 1.3.1">Menu Sub Item 1</a></li>
<li><a href="destination link 1.3.2">Menu Sub Item 2</a></li>
<li><a href="destination link 1.3.3">Menu Sub Item 3</a></li>
<li><a href="destination link 1.3.4">Menu Sub Item 4</a></li>
</ul>
</li>
<li><a href="destination link 1.4">With</a></li>
<li><a href="destination link 1.5">Sub</a>
<ul>
<li><a href="destination link 1.5.1">Sub sub Item 1</a></li>
<li><a href="destination link 1.5.2">Sub sub Item 2</a>
<ul>
<li><a href="destination link 1.5.2.1">Sub sub Item 1.1</a></li>
<li><a href="destination link 1.5.2.2">Sub sub Item 1.2</a></li>
<li><a href="destination link 1.5.2.3">Sub sub Item 1.3</a></li>
<li><a href="destination link 1.5.2.4">Sub sub Item 1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="destination link 1.6">Menus</a></li>
</ul>


<!--HTML for Flex Drop Down Menu 2-->
<ul id="flexmenu2" class="flexdropdownmenu">
<li><a href="destination link 2.1">This</a></li>
<li><a href="destination link 2.2">Makes</a></li>
<li><a href="destination link 2.3">The</a></li>
<li><a href="destination link 2.4">Second</a></li>
<li><a href="destination link 2.5">Dropdown</a></li>
<li><a href="destination link 2.6">Menu</a></li>
</ul>
<!-- / Da-Vinci Navbar Multi Level Icon Menu -->


Key
Image Links
Destination links
Menu Item
Category/Sub Category Names

A good source for icons is http://www.iconfinder.com/

If you use this Mod, please click INSTALL (javascript:%20vborg_doinstall(263413,true))

[smoggy07]

Downloaded and installed

What a great little feature to add to our forum

Kudos to the the OP and contributers for this awsome new toy :D

[bd1]

Yup defo some great work integrated on our site now.

[Fordies]

tagged

[sulasno]

tagged and thanks

[AttalaEA]

Hello, I am wondering if i can set one one category which having the dropdown menu to blank i.e. when i press the category name it goes no where and it just opens the dropdown menu?

[RobbieZ]

Hello, I am wondering if i can set one one category which having the dropdown menu to blank i.e. when i press the category name it goes no where and it just opens the dropdown menu?

Yeah, try changing your link to this

<a href="JavaScript:void()" data-flexmenu="flexmenu1">

Thus clicking will not work!

[Da-Vinci]

You can just do the following to simplify things. This is how I set my Home button. (Return to forum index)

<td align="center"><img src="images/misc/home.png" alt="Return to Forum index">
<p><a href="forum.php">Home</a></p></td>

By leaving the data-flexmenu="flexmenu1" part out of the url it will just become a standard url without the dropdown option.

[AttalaEA]

Yeah, try changing your link to this

<a href="JavaScript:void()" data-flexmenu="flexmenu1">

Thus clicking will not work!

Thank You So Much This works Great.

Thank You Very Much also for this Great Mod.

[htan68]

Thanks, I love it!

[COL NIL SATIS]

tagged!!!!

[Da-Vinci]

Thank You So Much This works Great.

Thank You Very Much also for this Great Mod.

Thanks, I love it!

Your welcome.

[Randomm]

Is there anyway to make this XML? or without having to upload anything and just use codes juts like the first one (single level dropdown)

[Da-Vinci]

No, there isn't sorry, this mod uses a different javascript file, than the default VB one.

[S S0DEN]

Great job, how do I only have the nav icons show on the forums and not on the CMS side though?

[Successfulsteps]

I would love to see this on a live forum before installing and does it work on 4.1.4?

[cloferba]

i would like to see a demo :)

[grey_goose]

great mod.

i actually moved it upward *into* the navbar with smaller icons; looks great.

[AttalaEA]

Hello,

Please I have to questions and I need your advice and guidance since I am a beginner:

How to wrap the Icons Navbar in css border not individually but all the icons in one wide border same as the page width?
How to change the location of the Icon Navbar to above navbar breadcrumbs?

Thank You

[Da-Vinci]

The icons should separate at 100% width as per the template modification. To move it above the breadcrumbs, either place the mod near the bottom of your header template or near the top of the Navbar template, which ever works best for you.

[kenp]

Great Mod! I've been looking for something like this. Any idea on how I can create a second row? Meaning I have more than 12 cats and when I ad the 13th it starts to go verticle. Any ideas? Thanks!

[U-Fig]

Hi there,. this is a very neat addition to my forum,. however i did find one thing here:

<!-- Da-Vinci Navbar Multi Level Icon Menu -->
<table>
<tr>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 1" data-flexmenu="flexmenu1">Category Name 1</a></p></td>
<td align="center"><img src="your image link goes here">
<p><a href="destination link 2" data-flexmenu="flexmenu2">Category Name 2<img src="images/misc/black_downward_arrow.png"></a></p></td>

it seems as on the category link 1 you forgot to add:
<img src="images/misc/black_downward_arrow.png">
after 'Category Name 1'

i noticed the down arrow wasn't showing, if you where already made aware, feel free to disregard this comment.

thank you for the awesome menu tho! installed after configuring is done.

Cheers!

[avitor]

hello dear
thank you for so nice mod
can you make the icons to be use as a links ? for users can press on the icon in self ?
now you can click only the title.
cheers

[SilverBoy]

Is this mod compatible with the navigation manager (vb 4.2.1)?
I just want the multilevel drop-down menu.
Any help?

[U-Fig]

hello dear
thank you for so nice mod
can you make the icons to be use as a links ? for users can press on the icon in self ?
now you can click only the title.
cheers

you can archieve that by swapping the image and source links, so the image link would be behind the source link instead of on top of it.

original:
<td align="center"><img src="your image link goes here">
<p><a href="destination link 1" data-flexmenu="flexmenu1">Category Name 1</a></p></td>

mine:
<td align="center"><p><a href="http://example.com" data-flexmenu="flexmenu1"><b><u><font color ="#ffffff"><img src="images/misc/menu/psnsmall.png"><img src="images/misc/black_downward_arrow.png"</a></p></td>

this way the menu folds out on hovering the image and title, if you want just the image, leave out the
<b><u><font color ="#ffffff"><br>MENU TITLE</font></b></u>
part.


hope this helps.