Icon Navbar with Multi Level Menus

Icon Navbar with Multi Level Menus

Mod Version: 1.00, by Da-Vinci

vB Version: 4.x.x	Rating: (9 votes - 5.00 average)	Installs: 34
Released: 10 May 2011	Last Update: Never	Downloads: 150
Not Supported Template Edits Additional Files Re-usable Code Translations External Content

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.

HTML Code:

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

HTML Code:

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

Code:

<!-- 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 http://javascript:%20vborg_doinstall(263413,true)

Download

Icon Nav With Multi Level Menus.zip (73.2 KB, 199 downloads)

Supporters / CoAuthors

Cableguy69
RobbieZ

Screenshots

vBulletin LTS