UKBL Quality Drop Down Menu System

MobileHacks

New Member
This is just so easy to edit and install, as long as you feel confident with a few simple edits and uploading a graphics file to your images directory or even your photobucket account, if you don't want to mess about uploading to your server.

UKBL ~ Quality Drop Downs sit quite happily on top of your forums accessable from all pages of the forum


They look like any bog standard Menu Nav bar but when you hover the mouse over it you'll see the dropdowns, I've uploaded a test version to my forum, Take a look for yourselves UK Business Live Forums

I've left the Top White Easy Men Bar in place also so you can compare both of them.

When you go over the menu bar the dropdowns should appear like in the picture below

See how the chosen links are highlighted

So now we come to the installation stage.

Download the dropdown.zip file below and open the VBOrg_Menu.txt file in notepad or any other text editor, as we need to edit a few files.

The first one we need to edit is the url of our Graphic File, So to cut a long story short we'll upload our graphic file to our Photobucket account, or any other account or image directory on your server, So firstly find

PHP:
    /*"""""""" (MAIN) Container Edit Picture URL Here :-) """"""""*/    
    #qm0    
    {    
        padding:5px;
        background-image:url(http://i475.photobucket.com/albums/rr114/ukbusinesslive/center_tile_blue.gif);
        border-width:1px;
        border-style:solid;
        border-color:#eeeeee;
    }
and this is the line we need to edit, so that it gives us a nice gradiant blue acdcross the menu bar

PHP:
background-image:url(http://i475.photobucket.com/albums/rr114/ukbusinesslive/center_tile_blue.gif);
Just replace the url within the brackets ( ) and thats it

Then we go and do the menu edits, You don't want your members click on your forum menu and ending up on my site So what we need to do now is change the menu links for yours, It take about 15 min's but its not hard to do, so lets do it.....

First find where our menu starts, This will be right at the bottom of the code, The HTML part of this and the first bit we need to change starts from here...

PHP:
<li><a class="qmparent" href="javascript:void(0)">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>
Basically each tab is made up of a block like what you see above, You have the Main Tab Description which looks like this

PHP:
<li><a class="qmparent" href="javascript:void(0)">MY CONTROL PANEL</a>
and you have all the sub links underneath and they look like this...

PHP:
<li><a href="http://www.ukbusinesslive.co.uk/forum/profile.php?do=editavatar" title="Edit Avatar">Edit Avatar</a></li>
and its this one which we need to edit, basically if you want to keep the same link, all you need to do is to chasnge my url UK Business Live Forums to your forums URL, and thats it, your link should work for your site.


If you want to change the link altogether and put your own, then replace the full URL with one that you want and don't forget to edit the end part "Edit Avatar" as that is the title thats shown on the dropdown.

When you've finished all your editing, we need to upload this whole code to your Header Template of the Style that your Currantly using on your forum, So once you've saved your edited code, Just copy and paste directly to your Header, Go right to the end and click paste, save the template and thats it, The Graphic File which you need to upload to your server or image host is also in the zip file.
 
Thx for the post. I have it installed but having a little problem.

As soon as my mouse hoovers over the menu my page jumps to javascript:void(0) before I get a chance to click on anything. All it shows at that point is a clock that I added from here.

Live Clock
http://www.vbteam.info/66179-post1.html


I have copied and pasted each link that I changed into a new window to ensure they are correct.

Using Firefox and also checked in IE both the same.

Ok, I removed the live clock. When I installed the clock I did it a little different than what was posted. I had added this to the navbar template to call up date_clock.js. Once I removed this all is OK.

<!-- announcements start-->
<table cellpadding="{tableouterborderwidth}" cellspacing="0" border="0" bgcolor="{tablebordercolor}" {tableouterextra} width="{contenttablewidth}" align="center"><tr><td>
<table cellpadding="4" cellspacing="{tableinnerborderwidth}" border="0" {tableinnerextra} width="100%">
<tr id="cat">
<td bgcolor="{categorybackcolor}"><normalfont color="Blue"><div class="smallfont">
<script type="text/javascript" language="javascript" src="clientscript/date_clock.js"></script>
<script type="text/javascript" language="javascript">dT();</script>
</div> </normalfont></td>
</tr>
<tr>
<td bgcolor="{firstaltcolor}"><smallfont>Check out the new Live Clock!

</smallfont></td>
</tr>
</table>
</td></tr></table>
<! -- announcements end-->


Thanks, the drop down menu looks great.
TMW
 
Thx for the update, will give them a shot today.

On quick ?, with the drop down menus working can I now get rid of regular navbar links? I searched trying to find this info but no luck.

thx
 
MobileHacks said:
Updated Added Black Menu + Blue Button

thanks bro you rock
113.gif


tmwtbd said:
Thx for the update, will give them a shot today.

On quick ?, with the drop down menus working can I now get rid of regular navbar links? I searched trying to find this info but no luck.

thx

yes you can replace the links in navbar with this bar or can entirely replace the code ;)
 
yes great just what i needed. check my forums out at Xbox Gaming Legends {XGL}

i do have an issue however with the navbar it seems when i hightlight one of the menus and the dropdown comes up then i will move the mouse away from the drop down and the dropdown still remains for a second or more. is their a code to edit to make it abit more speedy so the dropdown menu closes as soon as the mouse pointer is away?
 
Potleg said:
yes great just what i needed. check my forums out at Xbox Gaming Legends {XGL}

i do have an issue however with the navbar it seems when i hightlight one of the menus and the dropdown comes up then i will move the mouse away from the drop down and the dropdown still remains for a second or more. is their a code to edit to make it abit more speedy so the dropdown menu closes as soon as the mouse pointer is away?

Find at the end of ur header
PHP:
<script type="text/javascript">qm_create(0,false,0,500,false,false,false,false,false);</script>
you can increase the speed by decreasing the 500ms default value to ur own, have a play around, i've set mine to 10ms :D .. also lookin at ur site .. it seems ur dropdown needs some less paddin in css .. have fun playin around

regards
 
Say for example here is your menu block:
Code:
<li><span class="qmdivider qmdividery" ></span></li>
    <li><a class="qmparent" href="http://www.aboxcafe.com/forums/index.php">FORUMS</a>

        <ul>
                   
                   <li><a href="http://www.aboxcafe.com/forums/announcement.php?f=2" title="Forum Rules & Guidelines">Forum Rules & Guidelines</a></li>
                   <li><a href="http://www.aboxcafe.com/forums/forumdisplay.php?f=2" title="Announcements and News">Announcements and News</a></li> 
                  <li><a class="qmparent" href="http://www.aboxcafe.com/forums/forumdisplay.php?f=189" title="AB Awards Ceremony">◊ <IMG SRC="http://img.photobucket.com/albums/v643/wanboa/16mpgn.gif" BORDER=0 NAME="">  AB Awards Ceremony</a>
                   <li><a class="qmparent" href="http://www.aboxcafe.com/forums/forumdisplay.php?f=5" title="Contests and Events">◊ Contests and Events</a>
            <ul>
What we need to do is to add a new sub menu to the dropdowns and we do this like this (Shown in Red)
Code:
<li><span class="qmdivider qmdividery" ></span></li>
    <li><a class="qmparent" href="http://www.aboxcafe.com/forums/index.php">FORUMS</a>

        <ul>
                   
                   <li><a href="http://www.aboxcafe.com/forums/announcement.php?f=2" title="Forum Rules & Guidelines">Forum Rules & Guidelines</a></li>
                   <li><a href="http://www.aboxcafe.com/forums/forumdisplay.php?f=2" title="Announcements and News">Announcements and News</a></li> 
                  <li><a class="qmparent" href="http://www.aboxcafe.com/forums/forumdisplay.php?f=189" title="AB Awards Ceremony">◊ <IMG SRC="http://img.photobucket.com/albums/v643/wanboa/16mpgn.gif" BORDER=0 NAME="">  AB Awards Ceremony</a>
                     <ul>
                  [color=Red]<li><a href="http://www.aboxcafe.com/forums/awards.php" title="Award Panel">• Award Panel</a></li>[/color]
            </ul> </li>
                   <li><a class="qmparent" href="http://www.aboxcafe.com/forums/forumdisplay.php?f=5" title="Contests and Events">◊ Contests and Events</a>           <ul>

basically its the addition of a new <ul> Tag (In Blue) on the menu line which you want to break off, Don't forget to add the end tag too
wink.gif
</ul>
 
Back
Top