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

[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

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

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

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]

Originally Posted by RobbieZ

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!