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

[Nathaniel]

There isn't any documentation on adding buttons for SMF 2 Beta, although the topics (containing examples of new buttons/subbuttons) below may help you to understand that fucntion and how it works.
http://www.simplemachines.org/community/index.php?topic=266093.msg1737062#msg1737062
http://www.simplemachines.org/community/index.php?topic=239787.0

[Antechinus]

Kthnx.

[Marcus Forsberg]

Once again I've found something I'm not skilled enough to do.

Could anybody help me customise this for Kelo-Lt theme?

[Antechinus]

I'm a tad snowed under right now but if someone doesn't sort you in the next few days I'll have a look at it.

[Marcus Forsberg]

Thanks!

It feels as if I should be able to do it, but I just can't. Freaky. 

[Antechinus]

Yeah I know what you mean. I was the same until it clicked. After that it seems easy.

[yoeri]

visionsmc

[T-Bag]

Hello. I have some problems  with the menu posted on the first page of this topic. For example, menu is displayed with spaces (left and right). Look the image:



Anybody can help me to fix it? My theme is the Default, and SMF version 1.1.5
Thanks in advance.

[Antechinus]

Once again I've found something I'm not skilled enough to do.

Could anybody help me customise this for Kelo-Lt theme?

Ok, sorted. You should be fine from here on if you want to tweak it. I just copied the menu that I released Mystic Multi with since I had all the code on my desktop. Do wotcha like with it. 

Index.template.php

Find:

Code Select Expand

// Start of the tab section.
echo '
<ul>';

// Show the default [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'home' ? 'current' : '' , '"><a href="', $scripturl, '">' , $txt[103] , '</a></li>';

// Show the [help] button.
echo ($current_action=='help' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'help' ? 'current' : '' , '"><a href="', $scripturl, '?action=help">' , $txt[119] , '</a></li>';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action=='search' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'search' ? 'current' : '' , '"><a href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action=='admin' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'admin' ? 'current' : '' , '"><a href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action=='profile' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'profile' ? 'current' : '' , '"><a href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action=='pm' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'pm' ? 'current' : '' , '"><a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a></li>';


// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action=='calendar' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'calendar' ? 'current' : '' , '"><a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action=='mlist' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'mlist' ? 'current' : '' , '"><a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';


// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action=='login' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'login' ? 'current' : '' , '"><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action=='register' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'register' ? 'current' : '' , '"><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action=='logout' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'logout' ? 'current' : '' , '"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';

echo '</ul>';

// The end of tab section.


Replace with:

Code Select Expand

// Show the start of the tab section.

echo '
             
                 <div id="menu">
                     <ul class="menu">
                     
                             <li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>';

                 // Show the [Help] button.
                 echo'
                             <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>';

                 // Is the user allowed to administrate at all? ([admin])
                 if ($context['allow_admin'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=admin" class="level1"><span><span class="title">' , $txt[2] , '</span></span></a>
<ul>                             
                             <li><a href="', $scripturl, '?action=packages" class="level2"><span>' , $txt['packages'] , '</span></a></li>
                             <li><a href="', $scripturl, '?action=theme;sesc=', $context['session_id'],';sa=edit" class="level2"><span>' , $txt['modtheme'] , '</span></a></li>
<li><a href="', $scripturl, '?action=maintain" class="level2"><span>' , $txt['maintain'] , '</span></a></li>
<li><a href="', $scripturl, '?action=news" class="level2"><span>' , $txt['newsand'] , '</span></a></li>
</ul>
</li>';
                             
                 // Edit Profile... [profile]
                 if ($context['allow_edit_profile'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=profile" class="level1"><span><span class="title">' , $txt[79] , '</span></span></a>
                             <ul>                             
                             <li><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level2"><span>' , $txt['forpro'] , '</span></a></li>
                             <li><a href="', $scripturl, '?action=profile;sa=theme" class="level2"><span>' , $txt['layout'] , '</span></a></li>
<li><a href="', $scripturl, '?action=profile;sa=account" class="level2"><span>' , $txt['account2'] , '</span></a></li>
<li><a href="', $scripturl, '?action=profile;sa=notification" class="level2"><span>' , $txt['notification2'] , '</span></a></li>
</ul>
</li>';


                 // Go to PM center... [pm]
                 if ($context['user']['is_logged'] && $context['allow_pm'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=pm" class="level1"><span><span class="title">' , $txt['messages'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></span></a>
                             <ul>
                             <li><a href="', $scripturl, '?action=pm;f=outbox" class="level2"><span>' , $txt['outbox'] , '</span></a></li>
                             <li><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span>' , $txt['sendmess'] , '</span></a></li>
<li><a href="', $scripturl, '?action=pm;sa=pmprefs" class="level2"><span>' , $txt['pm_options'] , '</span></a></li>
<li><a href="', $scripturl, '?action=pm;sa=search" class="level2"><span>' , $txt['searchmess'] , '</span></a></li>
                             </ul>
</li>';                 

                 // the [Recent Posts] button
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=recent" class="level1"><span><span class="title">' , $txt['latest2'] , '</span></span></a>
                             <ul>';
if ($context['allow_calendar'])
echo'
<li><a href="index.php?action=calendar" class="level2"><span>' , $txt['viewcal'] , '</span></a></li>';
if ($context['allow_memberlist'] && $context['user']['is_logged'])
echo'
                             <li><a href="', $scripturl, '?action=mlist" class="level2"><span>' , $txt['viewlist'] , '</span></a></li>                             
                             <li><a href="', $scripturl, '?action=mlist;sa=search" class="level2"><span>' , $txt['searchlist'] , '</span></a></li>';
                 echo'    </ul>
</li>';

// If the user is a guest, show [login] button.
                 if ($context['user']['is_guest'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=login" class="level1"><span><span class="title">' , $txt[34] , '</span></span></a></li>';
                           
                 // If the user is a guest, also show [register] button.
                 if ($context['user']['is_guest'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=register" class="level1"><span><span class="title">' , $txt[97] , '</span></span></a></li>';
                                         
                 // Otherwise, they might want to [logout]...
                 if ($context['user']['is_logged'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="level1"><span><span class="title">' , $txt[108] , '</span></span></a></li>';

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

// The end of tab section.


Style.css

Add to the end of the file:

Code Select Expand

/* Drop Down Menu Feature */

div#menu {
     z-index: 11;
     height: 26px;
     background: url(images/custom/nav-div.png) 100% 0 no-repeat;
     margin: 0 0 0 0;
}

div#menu ul {
     margin: 0px;
     margin-left: -2px;
     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 {
     height: 26px;
     display: block;
     float: left;
     line-height: 26px;
     text-decoration: none;
     color: #FFFFFF;
     font-size: 0.85em;
}

div#menu li span {
     display: block;
}

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

div#menu a:hover {
     color: #EAEAB8;
     font-size: 0.85em;
}

div#menu a.level1, div#menu span.level1 {
     font-size: 100%;
     background: url(images/custom/nav-div.png) no-repeat 100% 0;
     color: #FFFFFF;
     font-size: 0.85em;     
}

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

div#menu li:hover a.level1, div#menu li:hover span.level1 {
     color: #FFFFFF;
     font-size: 0.85em;
      background: url(images/custom/nav_pointer.png) 50% 0 no-repeat;
}

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

div#menu ul.menu ul {
     position: absolute;
     top: 29px;
     left: -999em;
     width: 165px;
     font-size: 100%;
     padding: 6px 0 6px 0;
     margin-left: -1px;
     margin-top: -2px;
     background: url(images/custom/menu_bg.png) no-repeat 0 100%;
}

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

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


Modifications.english.php

Add the following:

Code Select Expand

// Menu strings

// Recent posts button and sub menu strings.

$txt['latest2'] = 'Latest';

$txt['viewcal'] = 'View Calendar';

$txt['viewbook'] = 'View Bookmarks';

$txt['viewlist'] = 'View Memberlist';

$txt['searchlist'] = 'Search Memberlist';

//Admin button sub menu strings

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

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

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

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

$txt['modtheme'] = 'Modify Themes';

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

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

// Messages button  and sub menu strings.

$txt['messages'] = 'Messages';

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

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

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

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

// Profile button sub menu strings

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

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

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

$txt['ignore'] = 'Ignore User Options';

$txt['notification2'] = 'Notification/Email';

Finally, put this image in your images/custom folder.



Go nuts.

[Marcus Forsberg]

Thanks, it works, but the edited links doesn't look very good, check the image.
You see the difference between the edited "Startsida" and the untouched "Forum"

I tried fixing it, but I'm not that skilled in CSS.

[Antechinus]

What do you mean "untouched"?

[Antechinus]

You can't mix and match this by leaving some of your old menu in and adding bits of the drop code for some buttons. No_can_do. It's a complete replacement job.

When I said Find:     Replace with: I meant Find:     Replace with:

I did not mean "chop a bit out of this and try to jam it sideways into your existing menu". 

When I said "do what you like with it" I meant you can change the text and links to suit yourself as long as you follow the correct syntax.

[Marcus Forsberg]

I was going to fix the entire emnu like that, jsut wanted to test whit one button first.
But as you see, the text style is a lot different.

[Antechinus]

It's the same font: Verdana bold. If you want it one px smaller or whatever just adjust font-size but replace the whole thing first so you can see it working properly.

[Antechinus]

If you look in the menu section of the css you'll see four places where there's #FFFFFF.
After that put   font-size: 0.85em;  in all four.

ETA: Also at the start in div#menu change the margin to 0 0 0 0 instead of  0 0 0 10px

[Marcus Forsberg]

Everything works and the font size is fixed, but look at this new image.
The | that is after each button is higher up then before. It's suppose to be in the middle of the menu.

[Antechinus]

Well when I tested it on my local it was in the middle. What browser are you using?

[Marcus Forsberg]

Firefox 3.0

[Antechinus]

Same here. Weird. I'm running on XP but that shouldn't matter.

Anyway have you cleared cache and cookies and done a hard refresh after changing the code?

[Marcus Forsberg]

I did.