Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 Programming Discussions
Reload this Page Icon navbar with dropdown menus and submenus
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #1  
Old 04-23-2011, 11:11 PM
Da-Vinci Da-Vinci is offline
 
Join Date: Mar 2010
Posts: 249
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default Icon navbar with dropdown menus and submenus
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.

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.



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.
Attached Images
File Type: jpg icon navbar.jpg (20.7 KB, 0 views)
File Type: png Submenus.png (84.2 KB, 0 views)
Reply With Quote
Reply

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 12:40 AM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05027 seconds
  • Memory Usage 2,316KB
  • Queries Executed 12 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (3)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (1)post_thanks_box
  • (1)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit_info
  • (1)postbit
  • (2)postbit_attachment
  • (1)postbit_onlinestatus
  • (1)postbit_wrapper
  • (1)showthread_list
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_threadedmode.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids_threaded
  • showthread_threaded_construct_link
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete