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

[Antechinus]

Found it. Starting on Line 270 you should have this:

Code Select Expand

//Çàêàí÷èâàåòñÿ âåðõíÿÿ òàáëèöà1 è âñòàâëÿåì ìåíþøêó
echo '</td></tr><tr><td colspan="3">

<div id="toolbar">
',template_menu(),'
</div>';
echo '</td></tr></table>';

but what you did was enter this:

Code Select Expand

//Çàêàí÷èâàåòñÿ âåðõíÿÿ òàáëèöà1 è âñòàâëÿåì ìåíþøêó
   echo '</td></tr><tr><td colspan="3">
   
   <div id="toolbar">
               ',template_menu(),'
            </div>';   

That's your problem.

[Sudhakar Arjunan]

Thank you .

See earlier i have the ads management inside the

Template_menu() and echo ',/td></tr></table>'

So i have never used the line you have mentioned.

Could you tell me, if there are going to be two link one after template_menu and one after template tower ads .

Will that change any design.

And now have a look at it and give me some suggestions Antechinus.

http://discuss.itacumens.com/index.php?action=forum

[Antechinus]

I don't understand what you are asking. It seems to be working except that I can't see any drop menus as a guest. Also you will need to reduce the spacing between tabs. It is fine on a 1280 screen but there is not enough width on a 1024 and it breaks the menu.

[Sudhakar Arjunan]

I mean,

http://www.simplemachines.org/community/index.php?topic=253756.msg1800404#msg1800404

On line 270, you look at the echo td tr and table.

Where i have ads mod installed , so it had came before echo td tr and table.

So now i have added a new echo td tr and table code before the ads mods, will it be a problem if i use it on and before ads mod over line 270 - 280

Ok Testing as a user, i have sent a PM to you.

Thanks a lot and i will now reduce the spacing between tabs.

[Antechinus]

It's only a problem because it will break validation but yes, you should fix it. I don't know anything about that mod you've installed. You asked me to do a menu for Energy so I did, but I was working with a fresh copy of the theme. I've you've hacked theme ask the guy that made the mod about it.

[Antechinus]

Anyway you can't run that many links in your toolbar. There simply isn't enough room for them, particularly on a 1024 screen. The whole idea of drop menus is that you don't need so many links in your toolbar.

[Sudhakar Arjunan]

It's only a problem because it will break validation but yes, you should fix it. I don't know anything about that mod you've installed. You asked me to do a menu for Energy so I did, but I was working with a fresh copy of the theme. I've you've hacked theme ask the guy that made the mod about it.

Thank you, Thank you Antechinus.

Anyway you can't run that many links in your toolbar. There simply isn't enough room for them, particularly on a 1024 screen. The whole idea of drop menus is that you don't need so many links in your toolbar.

Yes, i was just testing it on all the screens.
And now i was on Night Shift. Even today is Sunday, once i back to the same shift tomorrow. I will work on the toolbox to get minimized. Now i have reduced the padding to 10 from 21.

Thanks a lot Antechinus.

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

Anyone who can help me get this drop down for orange vista ? ( i would probably like a black drop down with this orange colour)

[Kosedragen]

Durr.. If I would want to add a dropdown menu with an image as "parent", what should I do then?
I'm trying to add a dropdown menu under the "profile"-button of the Dogal-theme =/

[Antechinus]

K, since Dogal is such a lovely theme and I haven't done a 11.x theme with image buttons yet I'll do it. Should be able to sort it next week.

[auss9960]

I have read with interest this thread, but struggled with appling it myself. I am using SMF 1.1.7 with BlueAce theme and would like to declutter my menu bar with dropdown menus. Could someone please help me with this? I's be ever so grateful.

Paul

[Antechinus]

Kosedragen: I've had a play with Dogal and there are a few things about it that are a bit tricky. I'll have another look at it when I get time. 

[Kosedragen]

Okay ^^ Thanks anyways, I'll be waiting.

[Burke ♞ Knight]

The 2.0 Beta 4 version is now a mod on the mod site.

http://custom.simplemachines.org/mods/index.php?mod=1508

[Antechinus]

Okay ^^ Thanks anyways, I'll be waiting.

Ok, sorted. Now I have to use the float: left; property with these menus so that means the row of buttons can't centre itself automatically. I've set a left margin on the toolbar that looks pretty good on the standard width of the theme when logged in or out. You can tweak it to suit yourself.

Anyway for index.template.php:

Find:

Code Select Expand

echo '
</head>

Replace with:

Code Select Expand

echo '
    <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var PreloadImages = new Array(
         "/images/submenu_top.png",
         "/images/submenu_bg.png"
      );

      var myImages = new Array();
      for(var i = 0; i < PreloadImages.length; i++)
      {
         myImages[i] = new Image();
         myImages[i].src = "'. $settings['theme_url'] .'" + PreloadImages[i];
      }
    // ]]></script>';

echo '
</head>

Find:

Code Select Expand

<div id="toolbar" align="center">',template_menu(),'</div>

Replace with:

Code Select Expand

<div id="toolbar">',template_menu(),'</div>

Find:

Code Select Expand

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

// Show the [home] and [help] buttons.
echo '
<a href="', $scripturl, '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/home.gif" alt="' . $txt[103] . '" border="0" />' : $txt[103]), '</a>', $context['menu_separator'], '
<a href="', $scripturl, '?action=help">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/help.gif" alt="' . $txt[119] . '" border="0" />' : $txt[119]), '</a>', $context['menu_separator'];

// How about the [search] button?
if ($context['allow_search'])
echo '
<a href="', $scripturl, '?action=search">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/search.gif" alt="' . $txt[182] . '" border="0" />' : $txt[182]), '</a>', $context['menu_separator'];

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '
<a href="', $scripturl, '?action=admin">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/admin.gif" alt="' . $txt[2] . '" border="0" />' : $txt[2]), '</a>', $context['menu_separator'];

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

// The [calendar]!
if ($context['allow_calendar'])
echo '
<a href="', $scripturl, '?action=calendar">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/calendar.gif" alt="' . $txt['calendar24'] . '" border="0" />' : $txt['calendar24']), '</a>', $context['menu_separator'];

// If the user is a guest, show [login] and [register] buttons.
if ($context['user']['is_guest'])
{
echo '
<a href="', $scripturl, '?action=login">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/login.gif" alt="' . $txt[34] . '" border="0" />' : $txt[34]), '</a>', $context['menu_separator'], '
<a href="', $scripturl, '?action=register">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/register.gif" alt="' . $txt[97] . '" border="0" />' : $txt[97]), '</a>';
}
// Otherwise, they might want to [logout]...
else
echo '
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/logout.gif" alt="' . $txt[108] . '" border="0" />' : $txt[108]), '</a>';
}

Replace with:

Code Select Expand

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

echo '   
      <div class="tabs">
                 <ul>';

// Show the [home] and [help] buttons.
echo '
<li><a href="', $scripturl, '"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/home.gif" alt="' . $txt[103] . '" border="0" />' : $txt[103]), '</span></a></li>', $context['menu_separator'], '
<li><a href="', $scripturl, '?action=help"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/help.gif" alt="' . $txt[119] . '" border="0" />' : $txt[119]), '</span></a></li>' , $context['menu_separator'];

// How about the [search] button?
if ($context['allow_search'])
echo '
<li><a href="', $scripturl, '?action=search"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/search.gif" alt="' . $txt[182] . '" border="0" />' : $txt[182]), '</span></a></li>' , $context['menu_separator'];

// 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">Error Log</a></li>
<li><a href="index.php?action=packages">Packages</a></li>
<li><a href="index.php?action=regcenter">Registration</a></li>
<li><a href="index.php?action=maintain">Maintenance</a></li>
<li><a href="index.php?action=news">News and Newsletters</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">Account Settings</a></li>
<li><a href="index.php?action=profile;sa=theme">Look and Layout</a></li>
<li><a href="index.php?action=profile;u=1;sa=forumProfile">Forum Profile</a></li>
                        </ul>                     
                  </div>
</li>' , $context['menu_separator'];

// The [calendar]!
if ($context['allow_calendar'])
echo '
<li><a href="', $scripturl, '?action=calendar"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/calendar.gif" alt="' . $txt['calendar24'] . '" border="0" />' : $txt['calendar24']), '</span></a></li>' , $context['menu_separator'];

// If the user is a guest, show [login] and [register] buttons.
if ($context['user']['is_guest'])
{
echo '
<li><a href="', $scripturl, '?action=login"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/login.gif" alt="' . $txt[34] . '" border="0" />' : $txt[34]), '</span></a></li>' ,$context['menu_separator'],'
<li><a href="', $scripturl, '?action=register"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/register.gif" alt="' . $txt[97] . '" border="0" />' : $txt[97]), '</span></a></li>';
}
// Otherwise, they might want to [logout]...
else
echo '
<li><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/logout.gif" alt="' . $txt[108] . '" border="0" />' : $txt[108]), '</span></a></li>';

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

For style.css:

Find:

Code Select Expand

#toolbar {
font-size: 1.0em;
height: 43px;
}

Replace with:

Code Select Expand

/*Drop menu codes*/

#toolbar {
    font-size: 11px;
height: 40px;
margin: 0 0 0 67px;
    padding: 0 0 0 0;
background: none;
}

.tabs {   
    margin: auto;
    padding: 0 0 0 0;
    list-style: none;
    background: none;
}

.tabs a:link{
    cursor: pointer;
}

.tabs a:visited { }

.tabs ul {   
    height: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
float: left;
}

.tabs ul li a.current { }

.tabs li {
    padding: 0;
    position: relative;
    z-index: 1;
float: left;
}

.tabs li:hover {
    z-index:2;
}

.tabs li a {
    display: block;
    line-height: 40px;
    overflow: hidden;
float: left;
}

a .menu {
    width: 108px;
    height: 40px;
    line-height: 40px;
    display: block;
     padding: 0 2px 0 0;
float: left;
}

.tabs li:hover .sub,
.tabs li.hover .sub {
    display: block;
}

.tabs li .sub {
    display: none;
    position: absolute;
    top: 20px;
    left: 0px;
    height: 16px;
    width: 186px;
    padding-top: 16px;
    background: url(images/submenu_top.png) no-repeat;
}

.tabs li ul {
    width: 186px;
    height: auto;
    margin: 0 0 0 0;
    padding: 2px 0 12px 9px;
    list-style: none;
    background: url(images/submenu_bg.png) 0 100% no-repeat;
}

.tabs li:hover li,
.tabs li.current li {
    width: 100%;
    padding: 0;
    background: none;
}

.tabs li:hover li a,
.tabs li.current li a {
    color: #335E1F;
    background: none !important;
    text-decoration: none;
    margin: 0 0 0 0;
    padding: 2px 7px 2px 17px;
    line-height: 15px;
    width: 144px;
}

.tabs li:hover li a:hover,
.tabs li.current li a:hover {
     color: #4FAF00;
    background: none;   
    line-height: 15px;
    margin: 0 0 0 0;
    padding: 2px 7px 2px 17px;
}

/*IE*/
.tabs li li a:hover {
    color: #4FAF00;
    line-height: 15px;
    margin: 0 0 0 0;
    padding: 2px 7px 2px 17px;
    background: none;
}
/**/

/* End of drop menu codes. */

To adjust the left margin of the toolbar change the 67px to suit.
Also put these two images in the theme's images folder.

 

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

Anything with orange vista...? Please...

[Antechinus]

Orange Vista makes my eyes bleed and I'm not coding whilst wearing shades.

If one of the more mellow looking Vista's uses the same format I might have a look at that. Maybe. Then again, you probably know as much about coding as I do. 

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

naah.. i dunno anything in coding lol... trust me.. i dont know anything..

[Kosedragen]

Haha, funny. Thanks, mate ^^

[Antechinus]

Meh. I'm kinda over doing these menus. By the time I get my head around a new theme (and they're all different) and sort the css and images so the thing works and looks good it always takes me a minimum of an hour and sometimes more.

There are heaps of examples here already. If anyone wants custom work done they can pm and we'll sort out a price.