Icon navbar with dropdown menus and submenus

[Da-Vinci]

Hi all, first off I posted this template edit https://vborg.vbsupport.ru/showthread.php?t=262376

Basically this is the effect I've got up to now.



And here is the code I used.

<!-- Navbar Icon Links -->
<div align="center">
<table class="body" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center" style="border-top-width:0px">
<tr align="center">
<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>
 
<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>

<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>

<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>

<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>

<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>

<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>

<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>

<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>

<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>

<td class="vbmenu_control">					
<li class="popupmenu"><a href="Catergory Link Goes Here"><center><img src="Image Link Goes Here" alt="Alt Description Goes Here"></center></a><p><center><a href="javascript://" class="popupctrl" accesskey="6"><b>Catergory Name Goes Here</b></center></p></a>
<ul class="popupbody popuphover">
{vb:raw template_hook.navbar_community_menu_start}
<li><a href="Link 1">Forum Name 1</a></li>
<li><a href="Link 2">Forum Name 2</a></li>
<li><a href="Link 3">Forum Name 3</a></li></td>
</tr>
</table>
</div>
<!-- / Navbar Icon Links -->

So I've got a couple things I'd like to do with this

The first problem is I'm using tables the old way and I really wanted to get this up to the XHTML standard. So after a bit of reading I added this to the additional.css template.

/* ***** table for icon navbar with menus ***** */
.table
{
width:100%;
}
th
{
padding:20px;
}

With this code in the navbar template (I've left out the links and the Javascript stuff while I try to figure how to get the tables to work correctly)

<!-- Navbar Icon Links With Menus-->

<div class="table" align="center">
<tr>
<th><img src="images/misc/home.png"></th>
<th><img src="images/misc/vip.png"></th>
<th><img src="images/misc/mp3.png"></th>
<th><img src="images/misc/mic.png"></th>
<th><img src="images/misc/euro.png"></th>
<th><img src="images/misc/tv.png"></th>
<th><img src="images/misc/console.png"></th>
<th><img src="images/misc/ebook.png"></th>
<th><img src="images/misc/mobile.png"></th>
<th><img src="images/misc/apple.png"></th>
<th><img src="images/misc/pc.png"></th>
</tr>
</div>

<!-- / Navbar Icon Links With Menus-->

Which never worked, so I tried adding it to the vbulletin.css template but that never worked either, I was hoping there would be a navbar.css template but no such luck, so where am I going wrong?

Currently with the above code in this is how it looks, compared to what I've already done.



The second problem is how to add submenus to the current dropdown menus, to look something like this.



I posted in this thread https://vborg.vbsupport.ru/showthrea...wpost&t=228338 as the code I've originally used has been pulled from the navbar template. RobbieZ has offered to help a little with this but I'd really like to learn the theory behind all this, I've learned loads in the past 18 months but feel like I'm just at the tip of the iceberg with coding as there are so many different languages to learn.

I've been looking at DHTML menus because Lynne kindly pointed me in that direction and I've also been reading up on Javascript but theirs that much info out there it's hard to know what is relevant to my needs.

I was looking at this http://www.dynamicdrive.com/dynamici...menu/index.htm but I've got to be honest the amount of CSS and Javascript is blowing my mind, I was hoping to replace some of the CSS classes such as body backgrounds and hover backgrounds with the VB stylevars, to make the menus universal for all skins, but like I say it's all going a bit over my head and I'm sure there must be a more simplistic way of going about it all.

Anyway thanks for reading, hopefully some of you kind people can share your knowledge and help out on this project of mine.

[RobbieZ]

Spending a few hours playing around with nav-tabs and nav-bar drop downs I concluded that without creating a new popupctrl and CSS submenu hover that submenus can not be done without this.

I then looked at dynamic drive's menu and followed the instructions, adding images like you did and changing some of the CSS colours I came up with this:

[Da-Vinci]

Robbie that is exactly what I was looking for could you share the code for this please?

[RobbieZ]

Ok, first off you need to download the zip from Dynamic Drive (your link) and follow the instructions then you will need to mess with the two css files in dreamweaver or similar program and change black to white etc..

Upload the folder to your root and place the code into your navbar after this:

{vb:raw ad_location.global_below_navbar}

The first link was home so I didnt use a drop down menu

The second link etc needed drop downs so you can see the code I have used here including the image reference and left the path as well.

rel="ddsubmenu(instert each number here and change accordingly)"

etc

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="Catergory Link Goes Here"><img src="Image Ling Goes Here/ddlevelsfiles/home.png" alt="Home"></a></li>
<li><a href="Catergory Link Goes Here" rel="ddsubmenu1"><img src="Image Link Goes Here/ddlevelsfiles/vip.png"></a></li>
<li><a href="Catergory Link Goes Here" rel="ddsubmenu2"><img src="Image Link Goes Here/ddlevelsfiles/music.png"></a></li>
...
...
...
...
<li><a href="Catergory Link Goes Here" rel="ddsubmenu9"><img src="Image Link Goes Here/ddlevelsfiles/apple.png"></a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
</script>

<!--HTML for the Drop Down Menus associated with Top Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->

<!--Top Drop Down Menu 1 HTML-->

Now for each submenu create this afterwards and continue to list each submenu with a number for however many you use, ddsubmenu5, ddsubmenu6 etc.

A straight forward dropdown without subs would be this:

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

And a sub menu would be this:

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a>
  <ul>
  <li><a href="#">Link 3.1b</a></li>
  <li><a href="#">Link 3.2b</a></li>
  <li><a href="#">Link 3.4b</a></li>
  </ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a>
  <ul>
  <li><a href="#">Link 5.1b</a></li>
  <li><a href="#">Link 5.2b</a>
    <ul>
    <li><a href="#">Link 5.2.1b</a></li>
    <li><a href="#">Link 5.2.2b</a></li>
    <li><a href="#">Link 5.2.3b</a></li>
    </ul>
  </li>
	</ul>
</li>
<li><a href="#">Link 6</a></li>
</ul>

The code can have as many submenu as you wish as long as you encapsulate each sub in its own <ul> and close the sub with a </li> before moving to your next sub menu on your list.

Hope this helps..

[Da-Vinci]

Appreciate you efforts on this Robbie, but I was hoping to be able to use existing Stylevars, so the edit would blend effortlessly with any custom skin.

Sowhen editing the CSS files, rather than change Black to White, Black would be changed to {vb:stylevar navbar_popuplink_background} or whatever was appropriate for the element of the popup.

[Arthran]

What I'm really looking for is the top navbar with multi level dropdown menu's like the ones you have from Dynamic Drive.

[Da-Vinci]

This is what I have so far.



I'm still developing this and have various things to work out such as stylevars and aligning the UL element at 100% width, once I've got this part of the code perfected modifying it for the standard navbar shouldn't be too difficult.

If I had some help from a more experienced coder, particularly somebody with extensive knowledge of CSS, I'm sure I would reach the objective much quicker but I'm an amature at coding, so researching everything in my spare time is taking time, unfortunately you are going to have to wait until I've perfect everything, so far the only person to offer any help has been RobbieZ and without his help I doubt I would have got as far as I have with this.

[8thos]

This is exactly what I was looking for! Thank you so much for this!

This may make me hold off from switching to a different forum software. vbulletin's menu system requires too much edits. I wish they'd make it easier to create menus.

[Da-Vinci]

Glad you like it, I'm still working on the stylevars, so as to make compatible with all styles.

--------------- Added [DATE]1304986900[/DATE] at [TIME]1304986900[/TIME] ---------------

I've managed to sort this now, it's a complete re write of the code above, see the screenshot below.



One problem though is I still haven't managed to utilise the stylevars for the background, text or hover colours, so it does require manual edits to the CSS templates.