[Tip] Drop Down Menu Tutorial (..for all themes)

[olma]

Haven't written an step-by-step tutorial, only given them the links to IE7 and FF3.
But it's on my to-do list, if my alterations to the menu doesn't work (I'll probably write it anyway).

[Antechinus]

I think I'll do one as well. Can put it in the drop menu under the Help button. 

[mattz83]

Thanks for the help, guys. I never got the border around it quite like I wanted, there were still small gaps on the left and right of the actual bar before the first button begins. I just left it alone, it looks good enough without a border. Anyway, thanks again... nice tip.

[angrybanana5000]

How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version

I will take a look in my free time.

<snip>

Could you post how to do this for SMF Beta 2 3.1? The other guide a few posts back didn't work for me

[iGate]

hey hoochie, wonderful stuff.

one question how does one get this to work with TP. i tried to replace my menu and the re-add the TP specific "forum" button, but it didn't work.

fyi: i am using mysic jade TP version.

thx

[razorblitz07]

I'm having a bug over at http://fiestahq.sparkonline.net/forum/index.php



When I hover over a link that is supposed to drop down, I can't click on the links in the sub-menu.  As soon as I move the cursor over to the sub-menu, the sub-menu disappears.  Takes a few tries to actually click on the sub-menu links without it going away.

There is also an image sticking out on the right-hand side of the navigation bar.  Don't know why it's like that.

Here are my files:

styles.css
index.template.php

[BuЯЯЯЯaK]

@razorblitz07

changed css 

http://www.upload.gen.tr/d.php/s2/ot3gv3ny/styles.css.html

[razorblitz07]

Awesome, works now!  What about that small rectangular image that was sticking out where the Logout button was supposed to end?  And this may sound weird but how do I put a background image on the bar?  I want it to be beveled.

[razorblitz07]

Alright well, I fixed the image sticking out problem and I got it so that their is a background image.  Now I have an issue with the background image repeating itself (table row height is too tall).  I don't know how but does anyone know how to reduce the height of the table row?

[angrybanana5000]

How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version

I will take a look in my free time.

<snip>

Could you post how to do this for SMF Beta 2 3.1? The other guide a few posts back didn't work for me

Anyone?

[pomai]

Could any one help me?  I am using the default theme, all I want to do is add a drop down menu for my links, I have added a tab for my gallery and don't want to lose that.  I would like the link tab right before the logout tab??

[Antechinus]

Why don't you just put a basic drop menu form in one of the theme's top bars? Plenty of room for it there. The default theme's buttons are tiny and would look rather strange IMO if you added this menu to it. 

[razorblitz07]

Does anyone know what property or code adjusts the height of the link buttons?  I want to reduce my table row height because the background image I put in repeated itself.

[Sabre™]

@ razorblitz07

Try adjusting this part in your addition to the CSS

Code Select Expand

font-size: 110%; /*Change your menu font size in here*/

I modified mine a bit to accommodate a horizontal submenu......... You can take a look at it HERE

Hi mate, do you mind sharing how you made the drop menu appear horizontal?
Or if anyone else would like to share

Thank You in advance

[razorblitz07]

This is my CSS:

Code Select Expand


/* DropDownMenu */

div#menu {
   left: 40px;
   z-index: 11;
   height: 39px;
}

div#menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   float: left;
}

div#menu li {
   position: relative;
   margin: 0px;
   padding: 0px;
   display: block;
   float: left;
   z-index: 5;
   font-weight: bold;
}

div#menu li a, #menu li span.separator {
   height: 37px;
   display: block;
   float: left;
   line-height: 35px;
   text-decoration: none;
   color: #FFFFFF;
}

div#menu li span {
   display: block;
}

div#menu li span {
   background-repeat: no-repeat;
   background-position: 95% 0px;
}

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover {
   color: #D2D2D2;
}

div#menu li.active {
   font-weight: bold;
}

div#menu li.active ul {
   font-weight: normal;
}

div#menu li.parent span.separator {
   cursor: pointer;
}


div#menu ul.menu {
   padding-right: 1px;

}

div#menu li.level1 {

}

div#menu a.level1, div#menu span.level1 {
   color: #FFFFFF; /*Change your menu link color in here*/
   font-size: 70%; /*Change your menu font size in here*/
     
}

div#menu a.level1 span, div#menu span.level1 span {
   padding: 0px 8px 0px 17.1px;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 {
   color: #CFD7DE;
}

div#menu li.active a.level1, div#menu li.active span.level1 {
   color: #aa1428;  /*Change your menu link hover color in here*/
   font-weight: bold;
}


div#menu a.level1 span.title, div#menu span.level1 span.title{
   padding: 0px;
}


div#menu a.level1 span.sub, div#menu span.level1 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #969696;
   margin-top: -6px;
   line-height: 10px;
}


div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub {
   color: #ffffff;
}


div#menu ul.menu ul {
   position: absolute;
   top: 40px;
   left: -999em;
   width: 160px;
        font-size: 88%;
}

div#menu li:hover ul, div#menu li.sfhover ul {
   left: 0px;
   z-index: 100;
}

div#menu li.level1 li {
      width: 100%;
   text-indent: 15px;
}


div#menu li.level1 li a, div#menu li.level1 li span.separator {
   height: 25px;
   padding: 0px;
   margin: 0px 1px;
   margin-top:-5px;
   background: #89A7C1; /*Change your submenu background color in here*/
   float: none;
   display: block;
   line-height: 25px
}


This is what my menu looks like:

[[unplugged]]

Hi mate, do you mind sharing how you made the drop menu appear horizontal?
Or if anyone else would like to share

Thank You in advance

Somehow, I wasn't notified of a reply here. I will see about getting you step-by-step details on the horizontal menu soon. Sorry about that. 

[Sabre™]

@ razorblitz07
Sorry bud, I can only point out looking at the prescribed areas of the code, and trial n era.
Thats how I got mine positioned to how I like, but also remember adjusting my header values aswell. My theme is different to yours, so may probably have a different structure.
Someone more knowledgeable than I should be able to assist you.
Good luck mate


@ SunKing
lol no problem buddy.
Im just glad you found your way to my post
Thank You in advance

« Next Edit: Tomorrow at 08:34:45 PM by SunKing »      <~~ Classic!! lol

[[unplugged]]

Let's see. First, I grabbed a few menu scripts from CSSPlay. Then it was just a matter of comparing how the menu was set up here in this thread to the one I decided on from CSSPlay. Now, I use SMF 2.0 so I used the instructions provided by LHVWB found here.

I used one of the Pro Dropline menus for mine, but it really doesn't matter, as they are all set up the same basic way. Copy the desired css stuff to your style.css. It will be found in the first part of the included .html from inside the menu.zip. Then, look at how the menu is set up. It's an unordered list just like the one described here. You just need to replace the parts of the script here with the corresponding parts from the new menu you just downloaded. You'll see what I mean Last, don't forget to upload the images found in the .zip, and make sure the URLs in the <style> part match where you uploaded them to.

I did have to play around with some of the css like heights and widths, and also with some of the padding and such.

Here is the code for my menu exactly as I have it on my site.
this is from my index.template.php:

Code (template_menu()) Select Expand

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

   // Show the start of the tab section.
   echo '
          <table width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
                   <td class="catbg" style="border-left:1px solid #696969;border-right:1px solid #696969;" >
                    <div class="pro_linedrop">
                           <ul class="select">';
                       
    //    Go through each of the main menu buttons.
    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
                             <li class="line"><a href="', $button['href'], '"><span><span class="title">' , $button['title'] , '</span></span><!--[if IE 7]><!--></a><!--<![endif]-->';
          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '<!--[if lte IE 6]><table><tr><td><![endif]-->
                            <ul class="sub">';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                                 <li class="line2"><a href="', $sub_button['href'], '"><span style="">' , $sub_button['title'] , '</span></a></li>';
            echo '
                            </ul>
                            <!--[if lte IE 6]></td></tr></table></a><![endif]-->';
        }
       
        echo '
                            </li>';
    }
    echo '<img src="'.$settings['images_url'].'/parts/sep.png" height="28px" width="2px" />
                           </ul>
                    </div>
                 </td>
              </tr>
          </table>';
}

This is the css from my style.css:

Code (style.css) Select Expand

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_left_right_line.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.pro_linedrop {
height:28px;
width:100%;
position:relative;
font-family:tahoma, sans-serif;
font-size:9px;
text-transform: uppercase;
font-weight:bold;
z-index:500;
}

.pro_linedrop .select {
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
}

.line {
background: url(../images/parts/sep.png) no-repeat 0 0;
}

.pro_linedrop li {
float:left;
}

.pro_linedrop li.lrt {
float:right;
}

.pro_linedrop .select a {
display:block;
height:28px; /* height of menu */
float:left;
padding:0 10px 0 10px;
text-decoration:none;
line-height:28px;
white-space:nowrap;
color:#fff;/*left text*/
}

.pro_linedrop .select a b {
display:block;
padding:0 30px 0 15px;
}

.pro_linedrop .select a:hover,
.pro_linedrop .select li:hover a {
padding:0 10px 0 10px;
cursor:pointer;
color:#fb0;
}

.pro_linedrop .select a:hover b,
.pro_linedrop .select li:hover a b {
display:block;
padding:0 30px 0 15px;
cursor:pointer;
}

.pro_linedrop ul ul {display:none;}

/* IE6 only */
.pro_linedrop table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.pro_linedrop .sub {
margin:0;
padding:0;
list-style:none;
}

.pro_linedrop .sub li {background:transparent;}

.pro_linedrop .select :hover .sub {
height:22px;
display:block;
position:absolute;
float:left;
width:100%;
top:28px; /* sub-menu location */
left:0;
text-align:center;
background:url(../images/parts/titlebar.png);
border:1px solid #555;
}

.pro_linedrop .select :hover .rt li {float:right;}

.pro_linedrop .select :hover .sub li a {
display:block;
height:22px;
line-height:22px;
float:left;
background:transparent url(line/transparent.gif);
padding:0 10px;
margin:0;
white-space:nowrap;
color:#333;
font-size:9px;
}

.pro_linedrop .select :hover .sub li.subline a {color:#c00;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#fb0;
line-height:22px;
position:relative;
}

And then I uploaded the images to forum/Themes/{my theme}/parts/.

That's it. Easier to do than to write!

[razorblitz07]

I fixed all the bugs that were on my navigation bar but now I'm trying to figure out how to reduce the height of the bar itself.  I want it shortened in height.  Making the font smaller doesn't affect the height at all.

[Sabre™]

@ razorblitz

Look in your index.template and find this

Code Select Expand

   // Show the start of the tab section.
   echo '
         <table width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
               <td class="catbg" height="32">

Change the height value to whatever you like.
Use your other edits in the css(font etc etc) to adjust the text to the size, and position you like.

@ SunKing

Thanks mate.
Im in the process of a few tweaks, so will play with your code tomorrow.
Thank you for your time, and assistance mate