vb.org Archive - Forum Home Enhancements - UKBL ~ Quality Drop Down Menu System

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)

- - Forum Home Enhancements - UKBL ~ Quality Drop Down Menu System (https://vborg.vbsupport.ru/showthread.php?t=203521)

The problem comes when it's put into a window though. Full screen it's fine, but when the window becomes smaller than the navbar, instead of getting cut off it goes to a new line.

Nice just what we needed

Hi man, good modification... installed ofcourse.

And here an example: http://www.nv-arg.com.ar/foro/

Also, i have a request, how can i do to drop the menu when you click in the button and not by a mouseover? Thx to much.

Installed and heavily modded. Here's an example. http://www.scalemotorcars.com/forum/

Changes

Ive used the nested menus already built into the mod. Would be nice if that was clearer in the instructions. also, rather then have all that code in the header template I crated another template and just called it into the header.

Also moved most of the JS and CSS into one file with the rest of my extra code.

Thanks for this mod its much cleaner then VB's menu. :up:

Quote:

Originally Posted by Scalemotorcars (Post 1913334)

It would be nice to know with clear instructions how you moved the JS and CSS, etc...

RIGHT SIDE SUB-MENU OFF SCREEN ISSUE
It would be nice to have the right side sub-menu problem addressed. In your site you have a sub-menu that opens off screen! Your right side sub-menus for your Forum FAQ and Gallery FAQ open off screen because they pop up off to the right. We need an open to have the right side sub-menus pop up off to the left of the menu so they stay on screen!

See Attached Screen Shot of Sub-Menu Problem

Anyone have a solution to this bug/issue??? My laptop screen resolution is set at: 1280 x 800 Without the option to open a sub-menu to the right or the left of a drop menu there will always be of screen problems. This hack needs code added so we can choice to have a sub-menu open to the left of a drop menu. Anyone have a way to do this?

nice modification buddy ... but conditions must be added to the menu
in order to restrict the view of items .. what I mean is that you should use the if condition to make things only shown to members ..

Best regards

Im sure that can be done and Ill mess with it when I have more time. :up:

As for the CSS I already had a Css file I used for extra code so I just added it to the bottom. Im sure you could do the same by adding it to the (extra CSS) in the style editor.

Same for the JS, I just added it to another JS that was global.

I did leave some of the JS in place because it seems to be location specific. Example.

right before this line.....

HTML Code:

<ul id="qm0" class="qmmc">

        <li><a class="qmparent" href="javascript:void(0)">First button title</a>

I kept this in place.

HTML Code:

<!--%%%%%%%%%%%% Quality Menu Styles [Keep in head for full validation!] %%%%%%%%%%%-->

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

And at the very end of the menu code I kept this line in place.

HTML 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,false,0,500,false,false,false,false,false);</script>

All other Js and Css was moved to global files respectively.

Quote:

Originally Posted by KID_1194 (Post 1913478)

Yep, Ive already tried it and it works fine. Need to put it back thanks for the reminder. :D

great mod, thanks so much :)

can you tell me how to make the text bold, i did search the thread but can not find where it has been asked...i know this is a simple question but not sure at the moment i am brain dead, hehe

thanks again

Quote:

Originally Posted by bluej (Post 1915042)

ok, i found it in another part of the code :cool:

font-weight:bold;

help needed, info on next post :)

Quote:

Originally Posted by Bigj85 (Post 1800313)

Thanks for the centering tip :)
I now have it centered and used an extra <td> on each side to fill out the leftover space.
Looks even better now,here's a pic
MY MENU

Thanks UKB, great menu

where do you add the <td> ? on each side of what? :confused:

uninstalled, no support

It's basic css. Why not Google it?

Quote:

Originally Posted by bluej (Post 1927664)

uninstalled, no support

UKBL is just busy in Real Life at the moment ;)

Code:

<table cellpadding=0 cellspacing=0 align="center"><tr>

<td><!-- Copy and paste this entire line including the td and /td before and after as seen here --></td>

<td>



----[ your menu structure]----



</td>

<td><!-- Copy and paste this entire line including the td and /td before and after as seen here --></td>

</tr></table>

It depends on your style too ;)

I am in the middle of installing this grate mod, but on explorer (8) the drop down menu text is centered, in safari and other it is left aligned like it should.

Any idea how to solve this?

Found it by inserting > text-align:left; in the SUB Container

Is there away to have 2 columns - 1 dropdown ? I have one dropdown that goes off the page so i would like it to be in two colums. Thanks in advance for your help

This has made a dramatic improvement to the appearance of my forum! Thank you so much! :):):)

It is one of my favorites. YOU ARE ONE OF THE BEST moders in vbulletin man.

Just a question. I need something to feet to my forum (colors design etc). Anytime you can take a look (when you have free time) and pm me if you want anything from me friend (i can donate with paypal or anything you ask for).

http://www.bytheway.gr

Could you please tell me how I can Center the menu content on the page? Currently its leaning more to the left ... here is an example :

https://vborg.vbsupport.ru/external/2010/01/36.png

I would like to have the menu in the middle of the page instead of the left side. Please let me know if its possible to change it.

It's aligned to the left, not leaning.

Center menus are so 1980. Also this issue is covered in this thread quite extensively.

I found the answer at page 8, thanks for the mod !

Quote:

Originally Posted by columbusgeek (Post 1959154)

It's aligned to the left, not leaning.

Center menus are so 1980. Also this issue is covered in this thread quite extensively.

Bah :p next time just help the man :p

Quote:

Originally Posted by KeyHunterz (Post 1959395)

I found the answer at page 8, thanks for the mod !

It was all on page 8 ;) but for those coming in to this thread near the end or this page here it is below ;)

Quote:

Originally Posted by UKBusinessLive (Post 1764656)

The only way you can make the tabs central is by extending them the full width of your forums

https://vborg.vbsupport.ru/external/2010/01/29.png

you need to find this in the CSS

Code:

/*"""""""" (MAIN) Items""""""""*/        

        #qm0 a        

        {        

                padding:3px 60px 3px 3px;

                margin:0px 60px 0px 0px;

                background-color:transparent;

                color:#aaaaaa;

                font-family:Arial;

                font-size:11px;

                text-decoration:none;

                border-width:0px 1px 0px 0px;

                border-style:solid;

                border-color:#aaaaaa;

and change the padding and margin (in Red) to a higher value.

The only problem you have then is that it will be set to your resolution, people with other screen resolutions will just see a mess, or the menu bars on two rows.

i did state before the reson its coded like it is, is that it will work in all resolutions and in All Browsers, Changing the above will create problems when viewing, thats why i don't recommend it.

Thanks ;)

Quote:

Originally Posted by UKBusinessLive (Post 1764959)

Hi

All those points have been covered already, I will answer them below...

I love the color of the bar, but is there any way to change just the color of the actually drop down menus?

The first half of the code is the css, You can change different colors by simply changing the hex numbers - background-color:#000000;

there are serveral hex number referances in the css, that do different parts of the menu, Change the ones you need.

Code:

/* UKBL ~ Menu 0 */



        /*"""""""" (MAIN) Container""""""""*/        

        #qm0        

        {        

                width:auto;

                padding:5px 50px;

                margin:0px;

                background-color:#000000;

                background-image:url(qmimages/gradient_16.gif);

                border-width:1px;

                border-style:solid;

                border-color:#000000;

        }





        /*"""""""" (MAIN) Items""""""""*/        

        #qm0 a        

        {        

                padding:3px 30px 3px 3px;

                margin:0px 20px 0px 0px;

                background-color:transparent;

                color:#aaaaaa;

                font-family:Arial;

                font-size:11px;

                text-decoration:none;

                border-width:0px 1px 0px 0px;

                border-style:solid;

                border-color:#aaaaaa;

        }





        /*"""""""" (MAIN) Hover State""""""""*/        

        #qm0 a:hover        

        {        

                color:#ffffff;

                border-color:#ffcc33;

        }





        /*"""""""" (MAIN) Hover State - (duplicated for pure CSS)""""""""*/        

        #qm0 li:hover>a        

        {        

                color:#ffffff;

                border-color:#ffcc33;

        }





        /*"""""""" (MAIN) Active State""""""""*/        

        body #qm0 .qmactive, body #qm0 .qmactive:hover        

        {        

                color:#ffffff;

                border-color:#ffcc33;

        }





        /*"""""""" (SUB) Container""""""""*/        

        #qm0 div, #qm0 ul        

        {        

                padding:15px;

                background-color:#000000;

                border-width:1px;

                border-style:solid;

                border-color:#ffcc33;

        }





        /*"""""""" (SUB) Items""""""""*/        

        #qm0 div a, #qm0 ul a        

        {        

                padding:3px 20px 3px 5px;

                margin:0px;

                color:#cccccc;

                border-width:0px;

                border-color:#ffcc33;

        }





        /*"""""""" (SUB) Hover State""""""""*/        

        #qm0 div a:hover        

        {        

                color:#ffcc33;

                text-decoration:underline;

        }





        /*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/        

        #qm0 ul li:hover>a        

        {        

                color:#ffcc33;

                text-decoration:underline;

        }





        /*"""""""" (SUB) Active State""""""""*/        

        body #qm0 div .qmactive, body #qm0 div .qmactive:hover        

        {        

                color:#ffcc33;

                text-decoration:underline;

        }





        /*"""""""" Individual Titles""""""""*/        

        #qm0 .qmtitle        

        {        

                margin:2px 5px 5px;

                color:#f6f6f6;

                font-family:Arial;

                font-size:11px;

                font-weight:bold;

        }





        /*"""""""" Individual Horizontal Dividers""""""""*/        

        #qm0 .qmdividerx        

        {        

                border-top-width:1px;

                margin:4px 5px;

                border-color:#aaaaaa;

        }





        /*"""""""" Custom Rule""""""""*/        

        ul#qm0 li .qmparent        

        {        

                background-image:url(http://www.ukbusinesslive.co.uk/forum/images/arrow_14.gif);

                background-repeat:no-repeat;

                background-position:90% 50%;

How can I make certain links open in a new window?

Below is a link from a Menu Structure

Code:

<li><a href="http://www.ukbusinesslive.co.uk/forum/calendar.php" title="My Calender">My Calender</a></li>

To get the link to open in a new browser window, what you do is add the target="_blank" attribute to your link tag, like this in your Menu Links area

Code:

<li><a href="http://www.ukbusinesslive.co.uk/forum/calendar.php" target="_blank" title="My Calender">My Calender</a></li>

https://vborg.vbsupport.ru/external/2010/01/30.png

Is there a way to add a different drop down menu to one of my additional CMPS pages?

Not sure what you mean by this? If your saying that you want to add a second different menu altogether then you can if you add it to the CMPS header, If you want simply to add a further menu item or new tab, then you simply copy a menu block from the code and paste it underneath the last menu block in the code, Below is a menublock you can use, just edit the links to your requirements

Code:

<li><span class="qmdivider qmdividery" ></span></li>

        <li><a class="qmparent" href="javascript:void(0);">CALENDER</a>



                <ul>

                <li><a href="http://www.ukbusinesslive.co.uk/forum/calendar.php" title="My Calender">My Calender</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>

The Is there any way to make one of the sections just a button/link and not a drop down menu? If so, how?

if you simply want a button/link without dropdowns then just get the first part of the code

[CODE]

Code:

<li><span class="qmdivider qmdividery" ></span></li>

        <li><a class="qmparent" href="javascript:void(0);">CALENDER</a>

Delete the menu dropdown links below it, thats all these..

Code:

<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><a href="http://www.ukbusinesslive.co.uk/forum/search.php?searchid=167" title="Post Last 24 Hrs">Post Last 24 Hrs</a></li>

                <li><a href="javascript:void(0);">New Item</a></li>

                </ul></li>

and then you need to add your link to the menu tab so from this

Code:

<li><span class="qmdivider qmdividery" ></span></li>

        <li><a class="qmparent" href="javascript:void(0);">CALENDER</a>

you need to add your url here (In Red)

Code:

<li><span class="qmdivider qmdividery" ></span></li>

        <li><a class="qmparent" href="YOUR_URL.COM">TAB_NAME_HERE</a>

How can I add a link to mark forums read? Trying to replace the old navigation bar.

To make a link that when people press it will make all forums read, you'll need to add a url like this to the menu

Code:

http://yourforum.com/forumdisplay.php?do=markread

don't forget to change yourforum.com to the name of your own forum ;-)

I hope thats answered your questions,

;-)

How can I make can be clicked to open menus ?

Quote:

Originally Posted by NumaNK (Post 1983659)

How can I make can be clicked to open menus ?

You can try...

In the code provided replace any instances of onmouseover example:

Code:

b=sp[i];if(b.tagName=="A"){lsp=b;b[w]=qm_oo;if(w==e)b.onmouseover=function(event){clearTimeout(qm_tt);qm_tt=null;qm_la=null;

with onclick example:

Code:

b=sp[i];if(b.tagName=="A"){lsp=b;b[w]=qm_oo;if(w==e)b.onclick=function(event){clearTimeout(qm_tt);qm_tt=null;qm_la=null;

I did not test so let us know ;)

Mike

Hi, I've been using this mod for quite some time now. In fact I don't use the navbar or postbits any longer as this is truly awesome... so thanks for the mod and spending time on it for us all :)
However, I would like to ask one question if I may.
In postbits there was a rather nice welcome block and I would like to integrate this with your menu system. Can this be done and if so how please.
Thanks :D

Quote:

Originally Posted by Halfhidden (Post 2005037)

Can you post a sample of the code or a screenshot?

Thanks for the reply.
Heres the code I've been working on to add the welcome block to the drop down menu

Code:

<if condition="$show['member']">

        <td class="alt2" nowrap="nowrap">

        <div class="smallfont">

                <strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />

                <phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>



                <if condition="$show['notifications']">

                        <div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>

                        <if condition="$show['popups']">

                                <script type="text/javascript"> vBmenu.register("notifications"); </script>

                        <else />

                                <script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>

                                <script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications");  </script>

                        </if>

                <else /><if condition="$show['pmstats']">

                        <div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>

                </if></if>



                <if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>

        </div>

        </td>

<else />

        <td class="alt2" nowrap="nowrap" style="padding:0px">

                <!-- login form -->

                <form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">

                <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>

                <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">

                <tr>

                        <td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">$vbphrase[username]</label></td>

                        <td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>

                        <td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label></td>

                </tr>

                <tr>

                        <td class="smallfont"><label for="navbar_password">$vbphrase[password]</label></td>

                        <td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>

                        <td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>

                </tr>

                </table>

                <input type="hidden" name="s" value="$session[sessionhash]" />

                <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />

                <input type="hidden" name="do" value="login" />

                <input type="hidden" name="vb_login_md5password" />

                <input type="hidden" name="vb_login_md5password_utf" />

                </form>

                <!-- / login form -->

</if>

Here's a screen shot of what my drop down looks like now and another showing the welcome block added but in the wrong place. I'm trying to add the welcome block to the end of the menu and have the welcome block within the menu as if it was part of the table or div.
Hope that's clear?
And thanks for your help so far.

Hi Last Superman. Don't worry about trying to alter the Drop down menu.
I understand that this is off topic anyway and I wouldn't want to use up your free time trying to do this when you are bound to have better things to do.
It's a great drop down menu and I'm keen to keep it rather than use the nave bar.
I'll look into way of getting the drop down menu in to nav bar rather than in the header.
Thanks anyway and keep up the good work. :D

Anyway you could make a white one, like your black one?

OK, not to worry. I've discovered how to put the drop down menu inside the navbar.
It was important to me because I had used up quite a bit of space with the header, navbar, drop down menu and Google ads before you even get to the forum.
I've pasted a screen shot for anyone interested in placing their drop down menu inside the navbar.
And here how to do it... really simple!
Edit navbar in your template and do a search for

PHP Code:


		
			
<td class="alt1" width="100%">

Directly beneath that line paste your drop down menu.

Hey Last Superman,

Was there ever a solution for the vbulletin navbar to open drop down links upon hover and not click?

It would make the drop down mod better and this would solve the centralizing too.

I get an error using IE8:

No Definition for "qmad"! Line 69, Code 0

How to fix that?

This looks great !
Any chance we can get this for VB4 ??
:)

Does anyone have step-by-step instructions on how to clean things up by having the javascript and CSS in separate files rather than all within the code in the template?

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01607 seconds Memory Usage 1,899KB 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 (14)bbcode_code_printable (3)bbcode_html_printable (1)bbcode_php_printable (11)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (3)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)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 pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: