vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=252)
-   -   Icon navbar with dropdown menus and submenus (https://vborg.vbsupport.ru/showthread.php?t=262531)

Da-Vinci 04-23-2011 11:11 PM
Icon navbar with dropdown menus and submenus
 
1 Attachment(s)
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.

https://vborg.vbsupport.ru/attachmen...1&d=1303381520

And here is the code I used.

HTML Code:
<!-- 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.

HTML Code:
/* ***** 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)

HTML Code:
<!-- 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.

https://vborg.vbsupport.ru/attachmen...1&d=1303603330

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

https://vborg.vbsupport.ru/attachmen...1&d=1303604368

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 04-28-2011 10:06 AM
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:

https://vborg.vbsupport.ru/external/2011/04/7.png

Da-Vinci 04-28-2011 01:28 PM
Robbie that is exactly what I was looking for could you share the code for this please?

RobbieZ 04-29-2011 07:09 AM
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:

Code:
{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.
Code:
rel="ddsubmenu(instert each number here and change accordingly)"
etc

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

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

Code:
<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 04-30-2011 09:14 PM
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 05-04-2011 05:41 PM
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 05-05-2011 03:58 AM
1 Attachment(s)
This is what I have so far.

https://vborg.vbsupport.ru/attachmen...1&d=1304570793

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 05-07-2011 08:13 PM
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 05-09-2011 05:56 PM
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.

https://vborg.vbsupport.ru/external/2011/05/46.jpg

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.


All times are GMT. The time now is 01:15 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01354 seconds
  • Memory Usage 1,835KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (5)bbcode_code_printable
  • (3)bbcode_html_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (9)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete