Mini Mods - Icon Navbar with Multi Level Menus

This is a follow up of my Icon Navbar with dropdown menus, quite a few people where asking for multi level menus, so after lots of reading and some help from RobbieZ, here it is.

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

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

Originally Posted by 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

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.