Go Back   vb.org Archive > vBulletin Modifications > vBulletin 3.8 Modifications > vBulletin 3.8 Template Modifications
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
UKBL ~ Easy Vertical Menu System Details »»
UKBL ~ Easy Vertical Menu System
Version: 1.00, by UKBusinessLive UKBusinessLive is offline
Developer Last Online: Feb 2012 Show Printable Version Email this Page

Category: Forum Home Enhancements - Version: 3.8.1 Rating:
Released: 02-06-2009 Last Update: 02-07-2009 Installs: 16
Template Edits
Re-useable Code Translations  
No support by the author.

UKBL ~ Easy Vertical Menu System


Well you wanted Dropdowns and you got them, Now you want Vertical Menu's, Here they are


DEMO : http://www.ukbusinesslive.co.uk/forum/vertical.html

Default VB Colors DEMO: http://www.ukbusinesslive.co.uk/forum/vbull_vert.html

Following on from the Easy Menu Tabs and the Quality Dropdowns, this is a new style of menu for sites that use side columns or even VBa

Done in a plain Neutral color scheme to compliment most sites you can change the color scheme by simply changing the hex color codes in the CSS part of the code.

This is suitable for ALL browser types



This example has sub menus within sub menus so you can see how to edit them to add more for your site



So if your happy with that, Lets begin.............

Firstly we need to Download the zip file, This has the code to edit plus related graphics, so you've downloaded the code, lets start

Open the code in your fave Text Editor (Notepad is ideal for this )

Find in the code

Code:
/*"""""""" Custom Rule""""""""*/	
	ul#qm0 li .qmparent	
	{	
		background-image:url(http://www.ukbusinesslive.co.uk/forum/images/cssalt1_arrow_right.gif);
		background-repeat:no-repeat;
		background-position:97% 50%;
you will see referance to a gif, change the URL of the gif to where you are going to install your gif, Be it in your forums image directory or even photobucket, the choice is yours.

then find the other gif url here

Code:
/*"""""""" Custom Rule""""""""*/	
	ul#qm0 li:hover > a.qmparent	
	{	
		background-image:url(http://www.ukbusinesslive.co.uk/forum/images/cssalt1_arrow_right_hover.gif);
		text-decoration:underline;
	}
and do the same as the one above, change my url to yours

Then find....

Code:
<!-- Add-On Settings -->
	<script type="text/JavaScript">

		/*******  Menu 0 Add-On Settings *******/
		var a = qmad.qm0 = new Object();

		// Item Bullets Add On
		a.ibullets_apply_to = "parent";
		a.ibullets_main_image = "http://www.ukbusinesslive.co.uk/forum/images/qtbordercaps_arrow_right_gray.gif";
		a.ibullets_main_image_width = 6;
		a.ibullets_main_image_height = 8;
		a.ibullets_main_position_x = -16;
		a.ibullets_main_position_y = -4;
		a.ibullets_main_align_x = "right";
		a.ibullets_main_align_y = "middle";
		a.ibullets_sub_image = "http://www.ukbusinesslive.co.uk/forum/images/qtbordercaps_arrow_right_gray.gif";
		a.ibullets_sub_image_width = 6;
		a.ibullets_sub_image_height = 8;
		a.ibullets_sub_position_x = -12;
		a.ibullets_sub_position_y = -2;
		a.ibullets_sub_align_x = "right";
		a.ibullets_sub_align_y = "middle";
and change the gif url to where you will upload your gifs

Then all you need to do next is upload the gifs from the zip file to the url that you made in the steps above

So thats the CSS part done, Next we need to edit our menu links, I've set the default to my forum but its easy enough to change them for yours or even if you want to add extra items, So lets start changing our menu links

First Find..

Code:
<li><a class="qmparent" href="javascript:void(0)" title="My Control Panel">My Control Panel</a>

		<ul>
		<li><a href="http://www.ukbusinesslive.co.uk/forum/profile.php?do=editavatar" title="Edit Avatar">Edit Avatar</a></li>
		<li><a href="http://www.ukbusinesslive.co.uk/forum/profile.php?do=editsignature" title="Edit Signature">Edit Signature</a></li>
		<li><a href="http://www.ukbusinesslive.co.uk/forum/profile.php?do=editoptions" title="Edit Options">Edit Options</a></li>
		<li><span class="qmdivider qmdividerx" ></span></li>
		<li><a href="http://www.ukbusinesslive.co.uk/forum/subscription.php?do=viewsubscription" title="List Subscriptions">List Subscriptions</a></li>
		</ul></li>
Thats our first block called "My Control Panel" all you need to do is edit these menu links to an url of your forum

Code:
<li><a href="http://www.ukbusinesslive.co.uk/forum/profile.php?do=editavatar" title="Edit Avatar">Edit Avatar</a></li>
Don't forget once you've changed the URL, you can change the description, which you can find right at the end ">Edit Avatar</a></li>

Do that for all the links and by then you'll have your own Vertical Menu Tabs.

To see how the menu from a sub menu works, you need to find the Calendar Link in the Code


It starts like this

Code:
<li><a class="qmparent" href="javascript:void(0)" title="Calendar">Calendar</a>
and then the menu links off from that, are similar to the menu links above, all together they look like this, showing the parent menu "Todays Post"

Code:
<li><a class="qmparent" href="javascript:void(0)" title="Todays Post">Todays Post</a>

		<ul>
		<li><a href="http://www.ukbusinesslive.co.uk/forum/search.php?searchid=167" title="Todays Post">Todays Post</a></li>
		<li><a href="http://www.ukbusinesslive.co.uk/forum/search.php?do=getnew" title="New Post">New Post</a></li>
		<li><span class="qmdivider qmdividerx" ></span></li>
		<li><a class="qmparent" href="javascript:void(0)" title="Calendar">Calendar</a>

			<ul>
			<li><a href="http://www.ukbusinesslive.co.uk/forum/calendar.php" title="Calendar">Calendar</a></li>
			<li><a href="http://www.ukbusinesslive.co.uk/forum/calendar.php?do=add&type=single&c=1" title="Add Single Event">Add Single Event</a></li>
			<li><a href="http://www.ukbusinesslive.co.uk/forum/calendar.php?do=add&c=1" title="Ranged Event">Ranged Event</a></li>
			<li><a href="http://www.ukbusinesslive.co.uk/forum/calendar.php?do=add&type=recur&c=1" title="Recurring Event">Recurring Event</a></li>
			</ul></li>
Thats its folks, Just save your code and upload it to the header or other section (side Colummns) of your forum or website

Please note as i don't use side columns or VBa, I cannot provide support in these areas.


To change the colors of the menu to suit your site, simply change the hex color code at the begining of the CSS part of the code, I like using this hex editor for this http://www.2createawebsite.com/build/hex-colors.html

Please click installed, for 100% support

UPDATE 08.02.09

You can now download the VBulletin Default Color Menu, This is exactly the same as the original except that the colors have been edited to Match the VBulletin Default theme



Enjoy

Download Now

File Type: zip Vertical Menu.zip (22.0 KB, 96 views)
File Type: zip vbull_vert.zip (22.1 KB, 64 views)

Screenshots

File Type: png vertical menu.png (12.8 KB, 0 views)
File Type: png vertical menu1.png (7.1 KB, 0 views)
File Type: png vbull_vert.png (17.7 KB, 0 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #32  
Old 02-24-2009, 12:44 AM
Saint_I_Am Saint_I_Am is offline
 
Join Date: Aug 2008
Posts: 81
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Is there a way to remove the light coloured border from around the oustide of the box? see picture below.
Attached Images
File Type: jpg menu.jpg (22.7 KB, 0 views)
Reply With Quote
  #33  
Old 02-24-2009, 05:03 AM
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Location: Essex, United Kingdom
Posts: 1,637
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Saint_I_Am View Post
Is there a way to remove the light coloured border from around the oustide of the box? see picture below.
Hi

Yes there is a way, you'll need to look in the Css code at the begining of the colde, its one of the Hex Numbers, have a look see if you can see which one it is, it looks like you've changed colours when compared to the original?? if so, You may have to PM the code so i can see.

I'll take a look for you tonight when i get back from work
Reply With Quote
  #34  
Old 02-24-2009, 05:10 AM
Saint_I_Am Saint_I_Am is offline
 
Join Date: Aug 2008
Posts: 81
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

will send you a pm with code and link to my site
Reply With Quote
  #35  
Old 03-16-2009, 08:55 AM
Coleccromos's Avatar
Coleccromos Coleccromos is offline
 
Join Date: Apr 2005
Posts: 124
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

<div align="left">Hello again!

This menu can be set in the template forumhome? What is the situation?

Thanks</div>
Reply With Quote
  #36  
Old 03-16-2009, 05:42 PM
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Location: Essex, United Kingdom
Posts: 1,637
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Coleccromos View Post
Hello again!

This menu can be set in the template forumhome? What is the situation?

Thanks
This menu system is idea for side columns and VBa, as i don't have either i can't support other than the menu script itself, perhaps someone can anser your question??
Reply With Quote
  #37  
Old 03-16-2009, 09:19 PM
Coleccromos's Avatar
Coleccromos Coleccromos is offline
 
Join Date: Apr 2005
Posts: 124
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by UKBusinessLive View Post
This menu system is idea for side columns and VBa, as i don't have either i can't support other than the menu script itself, perhaps someone can anser your question??
Excuse either did not see this issue and referred me to this other menu.

I put my doubts in that post.

Sorry
Reply With Quote
  #38  
Old 05-27-2009, 09:46 PM
Neutral Singh's Avatar
Neutral Singh Neutral Singh is offline
 
Join Date: Sep 2004
Location: Sikh Philosophy Network
Posts: 545
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by AURFSCAN View Post
Have it working perfect now.

To fix my arrows from being outside of the container. I did this

In the code remove

Code:
<!-- Add-On Core Code (Remove when not using any add-on's) -->
<style type="text/css">.qmfv{visibility:visible !important;}.qmfh{visibility:hidden !important;}</style><script type="text/javascript">if (!window.qmad){qmad=new Object();qmad.binit="";qmad.bvis="";qmad.bhide="";}</script>
and change

Code:
<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click (options: 'all' * 'all-always-open' * 'main' * 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,true,0,500,false,false,false,false,false);</script>
to

Code:
<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click (options: 'all' * 'all-always-open' * 'main' * 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,true,0,500,true,false,false,false,false);</script>
thanks for a great mod uk :up:
Although it works but it shows javascript error like qmad variable no defined.
Reply With Quote
  #39  
Old 06-24-2009, 06:31 PM
Ryan Ashbrook's Avatar
Ryan Ashbrook Ryan Ashbrook is offline
 
Join Date: Dec 2002
Location: Cincinnati, Ohio
Posts: 422
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Downloaded, will install when my hand heals.

I could definitely use this for some of my custom code on both my site and forums.
Reply With Quote
  #40  
Old 06-29-2009, 07:05 AM
BeFit4Free's Avatar
BeFit4Free BeFit4Free is offline
 
Join Date: Aug 2008
Location: Colorado
Posts: 16
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by wAnBoA View Post
Tagged~
By the way, how can we have such menu like this following website?

http://animerender.com/forum/index.php?
That's not a vBulletin forum...
Reply With Quote
  #41  
Old 06-30-2009, 09:43 PM
Magz's Avatar
Magz Magz is offline
 
Join Date: Nov 2006
Location: UK
Posts: 147
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Im using this menu on my forums, but id like to use it on my vbadanced page too. However im guessing due to using the same css settings, it completeley throws everything out of synch.

I appreciate no support is given for vbadvanced, but has anyone managed to get this working on both forum and vbadvanced age. If so, How.

Thanks
Reply With Quote
Reply


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 08:36 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.05221 seconds
  • Memory Usage 2,368KB
  • Queries Executed 26 (?)
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
  • (10)bbcode_code
  • (5)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (6)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (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_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
  • 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
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete