UKBusinessLive
02-06-2009, 10:00 PM
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
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