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

[Adish - (F.L.A.M.E.R)]

   Price........i know you are doing a great job by helping the users. I appritiate all the work you do. But help out silly noobs like me It would be much helpful though.. i checked out many examples myself but messed out the menu alot.. (it isnt i didnt try things, but didnt get it right though. )

[Antechinus]

Dude, I didn't get it right the first half a dozen times I tried it either, and I didn't have the benefit of several examples that were already set up for SMF themes. Damned near drove me mental. There are lots of other things I want to do now.

Try doing one or two of the examples that are in the thread already. The themes are free anyway so it isn't as if it will cost you anything. Get those to work (and it's simply a matter of following the instructions) and you'll have a good basis for comparison. You can play with various css properties one at a time and see the effects.

[Adish - (F.L.A.M.E.R)]

Yea thats what i am trying to do.. its just the drop downs work fine.. but the navigation gets messy.. i need to get into coding soon i think... I understand you have other priorities..

[yoeri]

I try to edit the visionsmc theme. but it wont work can you help me
http://custom.simplemachines.org/themes/index.php?lemma=519

[[unplugged]]

Dude, I didn't get it right the first half a dozen times I tried it either, and I didn't have the benefit of several examples that were already set up for SMF themes. Damned near drove me mental. There are lots of other things I want to do now.

Try doing one or two of the examples that are in the thread already. The themes are free anyway so it isn't as if it will cost you anything. Get those to work (and it's simply a matter of following the instructions) and you'll have a good basis for comparison. You can play with various css properties one at a time and see the effects.

I know exactly what you mean. 

[HR]

Has anybody got any idea how to add a level 3 to this.. I would think it would take additional css but an example would be helpful.

[[unplugged]]

There are plenty of CSS-based menus that have practically unlimited levels. You can find a bunch of great examples of them here.

[Beltazar_DSA]

Oh wow..    I have been looking for this or something like this for a while now..    And while I was just thinking of something completely new...  I just saw this thread..  awesome..    going to attempt this in a bit..   

Thanks..

Beltazar
dreamslayervisions

[Antechinus]

I try to edit the visionsmc theme. but it wont work can you help me
http://custom.simplemachines.org/themes/index.php?lemma=519

I have already told you that I would do that for you if, and only if, you show me that you have written permission form Yagiz to remove his copyright from your copy of his theme.

As a designer myself who does the right thing by other designers I take copyright removal seriously for my own themes and other people's themes. I even add an extra page to some of my themes to give credit where it is due. If you can't respect other people's work enough to give them credit for it then I see no reason why I should help you.

[Kosedragen]

Auch..

antechinus; this is not working properly at all =/
The drop down menus have no background (even though I added the images to the image folder) and you've hard coded the txt-strings. My forum runs on two languages, so I tried to add the strings myself.. With minimum success. The strings are only shown after you have clicked on the proper button.

Take a look:


Translated it reads:
Account Settings
Look and Layout
Forum Profile

Please help me one more time ^^;

[Antechinus]

Dogal doesn't have its own languages folder so you need to create one.
In this you put the ThemeStrings.whateverlanguage.php files. This example is for English.

Code Select Expand

<?php
// Version: 1.1; ThemeStrings.

//Admin button sub menu strings.

$txt['banlist'] = 'Ban List';

$txt['packages'] = 'Packages';

$txt['regist'] = 'Registration';

$txt['errorlog'] = 'Forum Error Log';

$txt['maintain'] = 'Forum Maintenance';

$txt['newsand'] = 'News and Newsletters';

// Messages button sub menu strings.

$txt['inbox'] = 'Inbox';

$txt['outbox'] = 'Outbox';

$txt['sendmess'] = 'Send Message';

$txt['searchmess'] = 'Search Messages';

$txt['pm_options'] = 'Personal Message Options';

// Profile button sub menu strings.

$txt['summary'] = 'Summary';

$txt['forpro'] = 'Forum Profile';

$txt['layout'] = 'Look and Layout';

$txt['account'] = 'Account Settings';

?>


To do the same file for Norwegian all you need to do is copy this one and rename it to ThemeStrings.norwegian.php (or maybe norwegian-utf8 if you use that). Then you simply edit the text on the right to whatever you want displayed. So if I change this:

Code Select Expand

$txt['account'] = 'Account Settings';

to this:

Code Select Expand

$txt['account'] = 'Your Account Settings Just In Case You Were Wondering What They Were';

it wont fit on the drop menu but it sure will look different.
I'm sure you get the idea. You can do the same for any language you want to use.

You also need to find this in index.template.php:

Code Select Expand

/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;

and change it to:

Code Select Expand

/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;

/* Call to Theme String for languages  */
    if(loadlanguage('ThemeStrings') == false)
       loadLanguage('ThemeStrings', 'english');

This will load strings for your selected language and will default to English if one of your strings is missing. Once you have this and the languages folder in place you can create new ThemeStrings files and add whatever $txt strings you want to them.

Using the ThemeStrings.english.php example I gave above the Admin and Profile buttons should look like this.

Code Select Expand

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '
<li><a href="', $scripturl, '?action=admin"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/admin.gif" alt="' . $txt[2] . '" border="0" />' : $txt[2]), '</span></a>
     <div class="sub">
                         <ul>
                                <li><a href="index.php?action=viewErrorLog;desc">',$txt['errorlog'],'</a></li>
<li><a href="index.php?action=packages">',$txt['packages'],'</a></li>
<li><a href="index.php?action=regcenter">',$txt['regist'],'</a></li>
<li><a href="index.php?action=maintain">',$txt['maintain'],'</a></li>
<li><a href="index.php?action=news">',$txt['newsand'],'</a></li>
                        </ul>                     
                  </div>
</li>' ,$context['menu_separator'];

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '
<li><a href="', $scripturl, '?action=profile"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/profile.gif" alt="' . $txt[79] . '" border="0" />' : $txt[79]), '</span></a>

<div class="sub">
                         <ul>
                        <li><a href="index.php?action=profile;sa=account">',$txt['account'],'</a></li>
<li><a href="index.php?action=profile;sa=theme">',$txt['layout'],'</a></li>
<li><a href="index.php?action=profile;u=1;sa=forumProfile">',$txt['forpro'],'</a></li>
                        </ul>                     
                  </div>
</li>' , $context['menu_separator'];

Hope that all makes sense. Now about the images I'm not sure. If they are in the images folder then the stylesheet should call them. I ran this modifed theme on my local host and the images were fine.

Did you add the image preload code before your closing head tag? Without that they can take a few seconds to render if you have a slow connection.

Figured it out. I have several of these images for different themes in the same Photobucket account. You'll need to rename them to submenu_top.png and submenu_bg.png.
Do that and they'll work.

[Kosedragen]

Thank you so much : D It works like a charm!

Buuut, there is one minute problem left. That would be this:

When I try to add the forum button again it jumps down for some reason o.O How can I fix that?

[Antechinus]

You've run out of space in the menu bar. Use fewer buttons.

[Kosedragen]

Yeah I figured that might be why; but why did it not happen before? I've had all of those buttons on one row before I added the dropdown.

[Antechinus]

Well reduce the left margin then. You have some space there.

[Kosedragen]

Ah nevermind. The calendar-button was useless anyways x3

Again; I'm extremely grateful. Thank you ^^

[Jessikard]

Has anybody got any idea how to add a level 3 to this.. I would think it would take additional css but an example would be helpful.

that´s what i want too....
i tried several codes but only with getting error and i don´t want to install another menubar

[yoeri]

Antechinus.

I dont have written permission form Yagiz to remove the copyright from his theme.
I removed the copyright because the links do not work.

Style by: kreativfantasy.com | Ported to SMF by: cakal93

Regards yoeri

[Acans]

Wow, Very nice HCM. Works perfectly!

For those that are using SMF 2 Beta, here is a quick edit that I did to make it work with the new version of SMF.

You will need to add the style code to the 'style.css' file as described above by HCM. 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.

For SMF 2 Beta ONLY.

Find the 'template_menu()' function from your index.template.php
You should find some code like this:

Code Select Expand

    // Show the start of the tab section.

From then on, the function will have some html that serves only to create the buttons.

For the default theme, it looks like this:

Code Select Expand

    echo '
            <table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
                <tr>
                    <td class="maintab_' , $first , '">&nbsp;</td>';

    foreach ($context['menu_buttons'] as $act => $button)
        echo ($button['active_button'] || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '                <td valign="top" class="maintab_', $button['active_button'] ? 'active_back' : 'back', '">
                    <a href="', $button['href'], '">', $button['title'], '</a>
                </td>', $button['active_button'] ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

    // The end of tab section.
    echo '
                <td class="maintab_' , $last , '">&nbsp;</td>
            </tr>
        </table>';

Replace it with this code:

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">';
                       
    //    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>
                 </td>
              </tr>
          </table>';

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

Thanks again, to HCM.

i can only find template_menu() but nothing else in my index.template.php for smf 2.0.4

[Jessikard]

  can anyone help to get a level3 in this menu for smf 1.1.7

thx Jessi