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

[COL NIL SATIS]

tagged!!!!

[Da-Vinci]

Originally Posted by AttalaEA

Thank You So Much This works Great.

Thank You Very Much also for this Great Mod.

Originally Posted by htan68

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:

1. How to wrap the Icons Navbar in css border not individually but all the icons in one wide border same as the page width?
2. 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.