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

[Antechinus]

That code is not putting a table inside a span or any of the other elements mentioned. It's doing it the other way around: putting the other elements inside a table. This is what I meant. The error message is telling you that there is a table inside a span (or whatever) when in fact there isn't. This means that the problem is something else.

Like I said I'm running a lightly tweaked version of this menu and the version I'm running passes both xhtml and css validation. It also functions flawlessly in IE7, so it can be done. I must admit I haven't tried getting Hoochie's code validated in its original form so I'm not going to speculate about that. I modified the code before submitting the theme for validation, but basically all I did was remove a few minor things I felt were unnecessary.

[Antechinus]

I've just run an xhtml validation on the page you linked to and I didn't get the error mentioned in your post. Of course you may have changed some code since posting. In fact the source code seems rather different from what is shown in your post.

Why are you running a toolbar div with a table inside it and another div (#menu) inside that? I eliminated the table from my menu and run the menu div straight inside the toolbar div. Works perfectly.

[shadownexusruler]

i want to add a drop down menu under the forum button of my mysticjadetp10 theme i want to put help,search,members,my messages all under the forum button could some one show me how to do it

[dailytalk]

i want to add a drop down menu under the forum button of my mysticjadetp10 theme i want to put help,search,members,my messages all under the forum button could some one show me how to do it

Go to the default theme.  default/languages/Modifications.english.php (if you use other language change there as well example.... Modifications.german.php) and find the code here:

$txt['hcm_account'] = 'Account Settings';
$txt['hcm_forumProfile'] = 'Forum Profile';
$txt['hcm_readmessages'] = 'Read Your Messages';
$txt['hcm_sendmessage'] = 'Send A Message';
$txt['hcm_viewmembers'] = 'View The Memberlist';
$txt['hcm_searchmembers'] = 'Search For Members';

Than add code for submenus you want add....example:

$txt['hcm_summary'] = 'Summary';
$txt['hcm_Politik1']= 'Schweizer Politik';
$txt['hcm_Politik2']= 'Internationale Politik';
$txt['hcm_Politik3']= 'Umweltpolitik';

(You can see on my side)

Than go to the theme you are using and add in the indextemplate.php under the main menu button some submenus....

This must look similar to this:
    <li class="level1 parent"> <li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a>
                                       <ul class="level2">   
                                      <li class="level2"><a href="', $scripturl, '?board=2.0" class="level2"><span>' , $txt['hcm_Politik1'] , '</span></a></li>   
                                      <li class="level2"><a href="', $scripturl, '?board=15.0" class="level2"><span>' , $txt['hcm_Politik2'] , '</span></a></li>
                                      <li class="level2"><a href="', $scripturl, '?board=17.0" class="level2"><span>' , $txt['hcm_Politik3'] , '</span></a></li>

                  </ul></li>';                 

So the parent is the main menu button...this here  $scripturl, '?board=2.0 is the link to the side you wanna link. In my example its board 2.0.

[dailytalk]

That code is not putting a table inside a span or any of the other elements mentioned. It's doing it the other way around: putting the other elements inside a table. This is what I meant. The error message is telling you that there is a table inside a span (or whatever) when in fact there isn't. This means that the problem is something else.

Like I said I'm running a lightly tweaked version of this menu and the version I'm running passes both xhtml and css validation. It also functions flawlessly in IE7, so it can be done. I must admit I haven't tried getting Hoochie's code validated in its original form so I'm not going to speculate about that. I modified the code before submitting the theme for validation, but basically all I did was remove a few minor things I felt were unnecessary.

I still get 11 errors...coze I changed nothing. Did you really use the complete link?  You must really take the complete link including /community.

I took the code you find on the first side. Did you also make a W3C-Validator-Check for your side? I think you must have the same error message coze you should basically use the same code. (The code you find on the first page of this topic) Before I used the submenu code I had no W3C-Errors. (I know this for sure coze I still have the old index.template.php one just with another ending...

Regarding my IE7 Problem....the submenus go under the nav links.

On this side you can see what I mean when you move the cursor over the menu button "Übersicht".  (But only if you use IE with FF and the other browsers the problem doesn't exist.)

[[unplugged]]

Just wanted to say again what a great [tip] this is!!

I tweaked it so the drop down is a second level horizontal menu. Works great. I themed it using a menu from CSSplay and it looks fantastic. I made it static, so when you scroll to the bottom of a long page, the menu is still right there!  I have spent a long long time making it just the way I wanted it only to find out that IE really isn't webmaster friendly. It wouldn't render the dropdowns properly, so I commented them out so only non-IE browsers could see them. IE wouldn't even render the horizontal <UL> correctly, but I could not just comment out my site's menu. So, I had to comment out the "good" menu and comment in a sub-standard look-a-like that has no dropdowns, and therefore has none of the "extra" content located in those dropdowns.

My question is this. Is there a fool-proof way to get Internet Explorer (all versions) to render these menus as intended? I have read several pages on "workarounds", but I cannot seem to get any of them to "workaround" properly for everything. 

[doggymommy]

Hi everyone!

I'm brand new to all this coding and everything.. I'm trying to learn as my summer project =) So I apologize in advance for my stupidity...

I would like a drop down menu with the arcade, chess, and multiplayer in it so it takes up less space because I had too many menu options and not enough space... I made a big mess trying to figure this out and I'm having to redo my menu bar. =( I'd like to have it say "Games" and then have "Arcade", Multiplayer Games", and Chess". I've read on this that there is a code for this but when I tried to do it it just made a block instead of a dropdown. Could someone give me a complete play by play in simple newbee girl language?

Thanks!!!
Oh... and I have TemTem theme

[Antechinus]

I still get 11 errors...coze I changed nothing. Did you really use the complete link?  You must really take the complete link including /community.

Yes I used the complete link. It was in your earlier post so I just clicked it and ran a validation once your site had loaded. I did get a stack of errors but not the one you mentioned (table inside span, etc).

I took the code you find on the first side. Did you also make a W3C-Validator-Check for your side? I think you must have the same error message coze you should basically use the same code. (The code you find on the first page of this topic) Before I used the submenu code I had no W3C-Errors. (I know this for sure coze I still have the old index.template.php one just with another ending...

Yes of course I ran a W3 validator check on my theme. I didn't have any choice. The infernal theme approval team here wont let me get away with shortcuts.
Anyway there were no error messages. Like I said: it passes full css and xhtml validation.

Regarding my IE7 Problem....the submenus go under the nav links.

On this side you can see what I mean when you move the cursor over the menu button "Übersicht".  (But only if you use IE with FF and the other browsers the problem doesn't exist.)

Ok, I'll fire up Exploder and take a look.

ETA: Have you tried increasing the z-index setting for the drops? That may fix it.

[shadownexusruler]

that's nice and all but that didn't really help me for what i was asking about i wanted to add some thing's under the forum button like help,search ,profile, my messages, members i just need some some to create a code showing how's it could be done if someone wanta do it for me i will attach my index.template.php and modifications.English.php file i need this done for mysticjadetp10

[matasanos]

any tip/fox to make it works with IE6?

[Hoochie Coochie Man]

any tip/fox to make it works with IE6?

Nope!

[Antechinus]

any tip/fox to make it works with IE6?

Yeah. Upgrade to IE7. Seriously. It's free. If they're too dumb to take advantage of it that's their problem.

[matasanos]

any tip/fox to make it works with IE6?

Yeah. Upgrade to IE7. Seriously. It's free. If they're too dumb to take advantage of it that's their problem.

Yes, i know..but some users are too lazy..you know..internet is full of that kind of people

[Antechinus]

Hi everyone!

I'm brand new to all this coding and everything.. I'm trying to learn as my summer project =) So I apologize in advance for my stupidity...

I would like a drop down menu with the arcade, chess, and multiplayer in it so it takes up less space because I had too many menu options and not enough space... I made a big mess trying to figure this out and I'm having to redo my menu bar. =( I'd like to have it say "Games" and then have "Arcade", Multiplayer Games", and Chess". I've read on this that there is a code for this but when I tried to do it it just made a block instead of a dropdown. Could someone give me a complete play by play in simple newbee girl language?

Thanks!!!
Oh... and I have TemTem theme

I'm not familiar with that theme but I'll have a look at it tonight. Shouldn't be any more difficult than any other theme. 

Btw, everyone starts out with no experience. 

ETA: I've just manually searched the first twenty pages of the Themes Site (since the search function here has had the cactus) and I couldn't see the Tem Tem theme. If you can give me a link to the theme's thread I'll have a look at this for you.

[olma]

Could it be this one?

http://custom.simplemachines.org/themes/index.php?lemma=518

[Antechinus]

Yup. That's it. Thanks.

[jepot5]

Hi,
I would like some help. I see that the code covers the whole menu.
I have customised my menu and I just want to add 2 buttons.
Affiliates and Navigation
and I the buttons should not have a link. If you click/hover on the button, it will just show the submenus.
And my menu uses images. I would like the main item to be images but not the sub item and you can hover on them to show the subitems.
I am using a custom theme for my site - http://custom.simplemachines.org/themes/index.php?lemma=101
(I have replaced the text Home, Profile, etc with images.)

[Antechinus]

Hi everyone!

I'm brand new to all this coding and everything.. I'm trying to learn as my summer project =) So I apologize in advance for my stupidity...

I would like a drop down menu with the arcade, chess, and multiplayer in it so it takes up less space because I had too many menu options and not enough space... I made a big mess trying to figure this out and I'm having to redo my menu bar. =( I'd like to have it say "Games" and then have "Arcade", Multiplayer Games", and Chess". I've read on this that there is a code for this but when I tried to do it it just made a block instead of a dropdown. Could someone give me a complete play by play in simple newbee girl language?

Thanks!!!
Oh... and I have TemTem theme

Sorted. The Donations button is set to display just before the login/logout buttons and Chess, Arcade and Multiplayer are in the drop underneath Games (which itself is just a blank button to hold the drop menu).

I've checked it on my local and it seems ok, but please note that I'm not going to get into doing mod support. If you need help with the actual mods please use the relevant mod thread as the mod authors know more about them than I do.

Anyway grab this zip and extract the files (index.template.php, style.css, images folder and languages folder) and upload/overwrite them into TemTem. Should be good to go once you have the actual mods installed.

[doggymommy]

DUDE!!! That is so awesome! It's PERFECT!! Thank you SO much!!!

[Nathaniel]

As pointed out by SpectroPro my SMF 2 Beta fix doesn't work for SMF 2 Beta 4, so here is the solution for that version.

You will need to add the css style code to the 'style.css' file as described above by HCM in the first post. But the other edits are unecessary, as this shows you how to do the second edit and the language strings are included for the drop down bits in SMF 2 Beta 4. You will have to copy the images that are attached to that post as well.

For SMF 2 Beta 4 ONLY.

Find the 'template_menu()' function from your index.template.php. The code in the function has the html that shows your menu.

For the default theme, it looks like this:

Code Select Expand

    echo '
    <div id="main_menu">
        <ul class="clearfix">';

    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
            <li id="button_', $act, '">
                <a', $button['active_button'] ? ' class="active"' : '', ' title="', $act , '" href="', $button['href'], '">
                    <span', isset($button['is_last']) ? ' class="last"' : '', '>', ($button['active_button'] ? '<em>' : ''), $button['title'], ($button['active_button'] ? '</em>' : ''), '</span>
                </a>
            </li>';
    }

    echo '
        </ul>
    </div>';

Replace it with this code:

Code Select Expand

    echo '
    <div id="menu">
        <ul class="menu">';

    //    Go through each of the main menu buttons.
    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
            <li class="level1"><a href="', $button['href'], '" class="level1"><span><span class="title">' , $button['title'] , '</span></span></a>';
          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
            <ul class="level2">';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                <li class="level2"><a href="', $sub_button['href'], '" class="level2"><span>' , $sub_button['title'] , '</span></a></li>';
            echo '
            </ul>';
        }
        echo '
            </li>';
    }
   
    echo '
        </ul>
    </div>';

Also this css fix is required so that it works for SMF 2 Beta 4. Make sure that you have added the css from the first post in this topic before you try to make this edit.

Find this code from your 'style.css' file:

Code Select Expand

div#menu ul.menu {
   padding-right: 1px;
   background: url('images/sep_white.png') no-repeat 100% 0;
}

Replace with this code:

Code Select Expand

div#menu ul.menu {
   padding-right: 1px;
   background: url(images/catbg.jpg) #88A6C0 repeat-x; /* Change your mainmenu background color/image here */
}

You will have to change the css code for custom themes, but you get the idea.

Edit: Updated code, there was a xhtml error with a closing </li> tag. Thank you to antechinus for pointing it out.