UKBL ~ Easy Vertical Menu System

[UKBusinessLive]

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 https://vborg.vbsupport.ru/external/2009/02/32.gif

https://vborg.vbsupport.ru/external/2009/02/104.png

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

https://vborg.vbsupport.ru/external/2009/02/105.png

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


/*"""""""" 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

/*"""""""" 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....

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

<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

<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

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

<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

https://vborg.vbsupport.ru/external/2009/02/102.png

Enjoy :D

[UKBusinessLive]

:D Reserved :cool:

[YsTyle]

great idea, i will try it :)

[UKBusinessLive]

great idea, i will try it :)

Thanks, Let us know how you got on ;)

[wAnBoA]

Tagged~
By the way, how can we have such menu like this following website?

http://animerender.com/forum/index.php?

[UKBusinessLive]

Tagged~
By the way, how can we have such menu like this following website?

http://animerender.com/forum/index.php?

Not sure i know what you mean???

Do you mean Horizontal Dropdown Menus ?? https://vborg.vbsupport.ru/showthread.php?t=203521

You can change the above dropdown code to make it look like that otherwise i could design one for you similar for your site, PM me for details ;)

[Forum Lover]

Not sure i know what you mean???

Do you mean Horizontal Dropdown Menus ?? https://vborg.vbsupport.ru/showthread.php?t=203521

You can change the above dropdown code to make it look like that otherwise i could design one for you similar for your site, PM me for details ;)

UK, can we have it designed on vb's default style please? Thanks on credit. :p

[AURFSCAN]

This could be very useful. I'll use my forum themes last post gif. since its allready there and it
will all look the same /images/kirsch/buttons/lastpost.gif :)

installed but it will take me a while to do the edits , colors, text, links etc.


testing in a vbadvanced module only visible to me

thankyou

[Allan]

Do you have demo please ?

[UKBusinessLive]

UK, can we have it designed on vb's default style please? Thanks on credit. :p

Hi

Its easy enough to change the Hex Colors for the colors you want, If i get time later i will change it myself to the default VBulletin Colors and upload a new zip with the vb colors for all you guys that use the VBulletin Default

:cool:

[UKBusinessLive]

Do you have demo please ?

Hi Allan,

Will be doing that for you in a moment, bear with me :)

here you go Allan http://www.ukbusinesslive.co.uk/forum/vertical.html

Check out the menu from the sub menu, on "Todays Post" "Calendar"

just going to add this to the first Post also ;)

[Allan]

Ok, thanks ;)

[UKBusinessLive]

:UK, can we have it designed on vb's default style please? Thanks on credit. :p

You mean something like this ;)

https://vborg.vbsupport.ru/external/2009/02/102.png

Just made the vertical menus the same Default Color as VBulletin, for all you guys using the default VBulletin theme

Just going to Install the zip file to the first post :D

[AURFSCAN]

Hi Uk...

I'm half way through editing. How do I get rid of the yellow box with text when you hover link?

thx

[UKBusinessLive]

Hi Uk...


I'm half way through editing. How do I get rid of the yellow box with text when you hover link?



thx

LOL, thats the Tool Tip :D to delete it just remove this part of the code where you have your menu links (in Red)


<li><a href="http://www.ukbusinesslive.co.uk/forum/calendar.php?do=add&c=1" title="Ranged Event" >Ranged Event</a></li>

[AURFSCAN]

Yeah I know :rolleyes: its early here.... trying to stay awake listening and keeping tabs on the bushfires here in victoria , australia

thanks uk

[UKBusinessLive]

Yeah I know :rolleyes: its early here.... trying to stay awake listening and keeping tabs on the bushfires here in victoria , australia

thanks uk

No problems buddy, You make sure you have a hose pipe handy :D

Its pretty hot down there, i take it??

[AURFSCAN]

43 degrees Celsius - 110 Fahrenheit :(

bit cooler now

I have one last drama if you could help that would be great.

In firefox its all good, in ie the arrows are on the left out of the container, problably my fault :rolleyes:
I'm trying to track it down but works perfect in ff

thx again

[UKBusinessLive]

You need to make sure that the code in the "Custom Rule" sections are not altered except to change the URL of your arrows, Just check both of them, one is directly below the other.

/*"""""""" 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%;

also the "Add on Core"

// Item Bullets Add On
a.ibullets_apply_to = "parent";
a.ibullets_main_image = "http://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://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";


Just make sure you havn't changed any of the setting in there.

Hope that helps ;)

[AURFSCAN]

Thanks uk for the great support.


I tried the code in a html page within vbulletin (easy pages and Logician's WebTemplates) in ie and it works fine..
so the problem lies within the vbadvanced module.

Since I'm going to use your VMS :) in ultimate side colums , there wont be a problem in ie.

Any idea as to why VMS wont display properly in a vbadvanced block in ie for me ?

thankyou

[UKBusinessLive]

Thanks uk for the great support.


I tried the code in a html page within vbulletin (easy pages and Logician's WebTemplates) in ie and it works fine..
so the problem lies within the vbadvanced module.

Since I'm going to use your VMS :) in ultimate side colums , there wont be a problem in ie.

Any idea as to why VMS wont display properly in a vbadvanced block in ie for me ?

thankyou

You may need to separate the CSS and the HTML, Place the CSS part of the code into the "Additional CSS Definitions " in your style manager and the HTML where you'd normally add your code, Be it the header or some other template for VBa

I had this problem with My Easy Menu Tabs, So it should work. ;)

Just seen the bushfires in Victoria on the news here in the UK, :eek: Be careful mate ;)

[dvbusuario]

to add a module of vbadvanced only copy the code in a new module template and the begin of code add <td> and the final of code add </td>

94435


Install!!!

Thank You!

[UKBusinessLive]

to add a module of vbadvanced only copy the code in a new module template and the begin of code add <td> and the final of code add </td>

https://vborg.vbsupport.ru/external/2009/02/101.png

Install!!!

Thank You!

Wow thanks for that :D

Menu looks Great :up::up:

[AURFSCAN]

Have it working perfect now.

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

In the code remove

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

<!-- 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,fal se);</script>

to

<!-- 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,fals e);</script>


thanks for a great mod uk :up:

[UKBusinessLive]

Have it working perfect now.

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

In the code remove

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

<!-- 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,fal se);</script>

to

<!-- 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,fals e);</script>


thanks for a great mod uk :up:

Thanks for the Update and fix :up:

(Hope all is well your end ;) )

[KrU$ty]

Hmm, from looking at the css code, you have used the same css titles in this mod as you did in your other menu mod, and its playing havoc with my display when in use.

I think it might be a good idea to use different css identifiers in this mod compared to your other menu mod to avoid issues.

Just a suggestion.

[UKBusinessLive]

Hmm, from looking at the css code, you have used the same css titles in this mod as you did in your other menu mod, and its playing havoc with my display when in use.

I think it might be a good idea to use different css identifiers in this mod compared to your other menu mod to avoid issues.

Just a suggestion.

Are you using the vertical menus as well as the dropdown menu ???

[KrU$ty]

Are you using the vertical menus as well as the dropdown menu ???

Yep. The dropdown menu css has been added to the additional css, however because both mods have the same css, the drop down menu inherits items from the vertical making the dropdown also become vertical as well as including the arrows etc.

Hope that makes sense.

[luan7749]

WoW, I like It, Thank my friend !

[UKBusinessLive]

WoW, I like It, Thank my friend !

Thanks :D

[Saint_I_Am]

Is there a way to remove the light coloured border from around the oustide of the box? see picture below.

[UKBusinessLive]

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

[Saint_I_Am]

will send you a pm with code and link to my site

[Coleccromos]

<div align="left">Hello again!

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

Thanks</div>

[UKBusinessLive]

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

[Coleccromos]

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 (https://vborg.vbsupport.ru/showthread.php?t=203521).

I put my doubts in that post.

Sorry

[Neutral Singh]

Have it working perfect now.

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

In the code remove

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

<!-- 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,fal se);</script>to

<!-- 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,fals e);</script>
thanks for a great mod uk :up:

Although it works but it shows javascript error like qmad variable no defined.

[Ryan Ashbrook]

Downloaded, will install when my hand heals.

I could definitely use this for some of my custom code on both my site and forums. :)

[BeFit4Free]

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

[Magz]

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

[Dean C]

I can't be bothered to read through all of this thread, but this kind of menu can be done in most major browsers using just CSS. You have to use a couple of lines of JS to make it work in IE6 but you can greatly simplify your code :)

http://www.pmob.co.uk/temp/dropdown-vertical3.htm

[khuhner]

I'm trying to get this installed and saw the line:

That's its folks, Just save your code and upload it to the header or other section (side Columns) of your forum or website.

What exactly do I need to do to add this to my home page (added via vBadvanced) of my site?

Kurt

[khuhner]

Bump.

[khuhner]

Can anybody help me? I added this code to vba, using a Module, and added the code around it:

<tr>
<td class="$bgclass">
<!-- I Inserted the vbull_vert.txt contents here -->
</td>
</tr>

However this is what happens (see attacthment).

Everything works fine when I "Preview" the module, but when it's added to a page, it doesnt work.

Any thoughts, ideas, or suggestions? :confused:

Kurt

[khuhner]

Bump

[RobbieZ]

Has anyone figured out how to use the dropdown menu with this one?

At the moment it clashes with the CSS.

[TheLastSuperman]

I'm trying to get this installed and saw the line:



What exactly do I need to do to add this to my home page (added via vBadvanced) of my site?

Kurt

See below

Bump.

See below

Can anybody help me? I added this code to vba, using a Module, and added the code around it:

<tr>
<td class="$bgclass">
<!-- I Inserted the vbull_vert.txt contents here -->
</td>
</tr>

However this is what happens (see attacthment).

Everything works fine when I "Preview" the module, but when it's added to a page, it doesnt work.

Any thoughts, ideas, or suggestions? :confused:

Kurt

See below

Bump

Kurt, if you still run a 3.x forum and want this please pm me and I'll help you sort all this out then I'll post here how we made it work.

Has anyone figured out how to use the dropdown menu with this one?

At the moment it clashes with the CSS.

Are you trying this with 3.x or as a widget in 4.x? If you can clarify or provide a screenshot I'll see what I can do, if I don't reply promptly please PM I frequent a lot of threads daily and might not return here for a while unless poked lol.

Mike