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

[espressoguy]

Well if you go over to www.cssplay.co.uk, he has lots of drop-down menus there that address the IE6 issue by Conditional Comments (HTML) - no javascript required.  I don't know how these drop-down menus look or work in IE6 but of course since so few people are using IE6, it seems that what really matters is that they should simply be able to get where they need to go one way or another (and upgrade to a decent browser if they want to get there with style). 

[Antechinus]

I must admit I haven't played with his menus because the ones that interested me had too many conditions of use attached to them and the code isn't available in a convenient format. I'll fire up IE6 tonight and run it over a few of his menus.

[espressoguy]

Great; I'd like to hear/see the result (screenshot w/description would be nice).

[Antechinus]

Ran a quick check on them and they work. Interesting. I'll have to take a closer look at this.

[Jessikard]

one question please

some User use IE6 and could only see the navigationbar they won´t be able to use the dropdowns

how can i fix this ?

[olma]

Maybe you could try this?

Well if you go over to www.cssplay.co.uk, he has lots of drop-down menus there that address the IE6 issue by Conditional Comments (HTML) - no javascript required.

[Sabre™]

Here is your answer, taken from the second page.

style.css

Code Select Expand

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

Try to decrease 40

[dailytalk]

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.

I've got the same problem. How did you solve it?

[Sabre™]

Why do you keep deleting then posting this?
READ what I quoted.
That will fix it.

[dailytalk]

I already decreased it in order to get the correct space between menu and submenu but this is not the problem.

My code:

Code Select Expand

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

[[unplugged]]

The dropdowns on your site work fine for me.

[dailytalk]

The dropdowns on your site work fine for me.

The drop-down you see on my frontpage is a sugarfish drop-down menu for wordpress. I now would like install something similar for my SMF-Community side. If you are on the frontpage click on "community" in the navbar and you come to the side on which I also need a drop down.

Problem: When I install the drop-down from this topic it  looks good but 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.

[dailytalk]

Is there anybody who can help?

[dailytalk]

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.

I've got the same problem. How did you solve it?

[Antechinus]

Do you still have a gap between menu bar and the sub-menu, as illustrated in that screenshot? If you do that will be the cause of your problem.

[dailytalk]

I think that I solved now the problem...I changed the code in bold from 25px to 20px:

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

Now it works.

[dailytalk]

Just found a validation error....

Code Select Expand

echo '
                              <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>

</tr>
</table>';


Thats the message I get from the validator:

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

You should not put a "<table>" element inside elements like "<a>", "<span>", or "<font>" but its exactly what the html-code of the dropdown menu does.

How can I solve that problem? (The code mentioned above causes this validation errors)

[matasanos]

this rocks!!!!!!!!!!!!!

thanks awesome

[Antechinus]

You should not put a "<table>" element inside elements like "<a>", "<span>", or "<font>" but its exactly what the html-code of the dropdown menu does.

No, it doesn't. Take a look. There is no mention of any of those elements ion the code you quoted, nor does the menu code put a table inside any of them when installed in a theme unless you have done something strange with it.

I'm running a lightly tweaked version of this menu in Mystic Multi and it passes validation.

[dailytalk]

It doesn't? Whats that?

Go to the validator here:
http://validator.w3.org/

And make a check for this side:
http://www.dailytalk.ch/community/


The problem seem to be this code here:

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">   
         <div id="menu">       
       <ul class="menu">       
                               
<li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>                 
<li class="level1"><a href="', $scripturl, '?action=help" class="level1"><span><span class="title">' , $txt[119] , '</span></span></a></li>'; 
               
// How about the [search] button?                  if ($context['allow_search'])     
             echo '                             
    <li class="level1"><a href="', $scripturl, '?action=search" class="level1"><span><span class="title">' , $txt[182] , '</span></span></a></li>';

The complete code you find on the first page of this topic. You can see table elements and span elements....so what does this tells you?


I have a problem with the IE7. The drop down goes under some elements and this doesn't look nice. Therefore I am looking for mistakes...first I made a validator check and found some mistakes...unfortunately the validator only says whats wrong but he does not give a solution for the problem....I really need something which work with all big browsers and not only with FF, Opera, Safari and Netscape. 60% of the visitors use IE....