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

[Antechinus]

You need js if you want to do fade in/fade out effects or whatever but you don't need it for much else. The rest can be done with css, including preloading the drop images so there is no delay in rendering on hover.

[dzinerfusion]

Ok I tried to edit my style.css but didn't have any luck. How would I be albe to perserve my main menu exactly like it is now but with a drop down on it too??

[Antechinus]

Check this out: http://www.dzinerstudio.com/index.php?topic=2220.msg16828#msg16828
The menu structure for that theme is basically the same as yours. Only differences are font, toolbar height and toolbar background image (and maybe some slight adjustment of paddings).

[dzinerfusion]

I dont wanna use javascript I'm sorry. Mind if you could help me if I put up my index.css with my style.css which will have my main menu css??

My index.css

Code Select Expand

/* The main menu. */
#nav_down
{
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #fffefc;
}
#main_menu
{
  background: url(../images/nav_bg.gif) repeat-x;
}


#main_menu ul
{
  margin:0;
}

#main_menu li
{
  display:inline;
  margin:0;
  padding:0;
}

#main_menu a
{
  float:left;
  margin:0;
  text-decoration:none;
}

#main_menu a span
{
  float:left;
  display:block;
  color:#fff;
  padding: 16px 10px 18px 10px;
  background:url(../images/nav_link.gif) no-repeat right top;
}
   
#main_menu a:hover span
{
  color:#fdeacc;
  background:url(../images/nav_hover.gif) no-repeat right top;
}
#main_menu li.active span
{
  color:#fff;
  background:url(../images/nav_hover.gif) no-repeat right top;
}

The dropdown code .

Code Select Expand

/* DropDownMenu */

div#menu {
   left: 40px;
   z-index: 11;
   height: 39px;
   background: url('images/sep_black.png') no-repeat 0 0;; padding-left:1px; padding-right:0px; padding-top:0px; padding-bottom:0px
}

div#menu ul {
   margin: 0px;
   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, #menu li span.separator {
   height: 39px;
   display: block;
   float: left;
   line-height: 32px;
   text-decoration: none;
   color: #FFFFFF;
}

div#menu li span {
   display: block;
}

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

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover {
   color: #D2D2D2;
}

div#menu li.active {
   font-weight: bold;
}

div#menu li.active ul {
   font-weight: normal;
}

div#menu li.parent span.separator {
   cursor: pointer;
}


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

div#menu li.level1 {
   background: url('images/sep_white.png') no-repeat 0 0;
}

div#menu a.level1, div#menu span.level1 {
   background: url('images/sep_black.png') no-repeat 100% 0;
   color: #FFFFFF; /*Change your menu link color in here*/
   font-size: 110%; /*Change your menu font size in here*/
     
}

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

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 {
   color: #CFD7DE;
}

div#menu li.active a.level1, div#menu li.active span.level1 {
   color: #aa1428;  /*Change your menu link hover color in here*/
   font-weight: bold;
}


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


div#menu a.level1 span.sub, div#menu span.level1 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #969696;
   margin-top: -6px;
   line-height: 10px;
}


div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub {
   color: #ffffff;
}


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

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

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


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

[Antechinus]

The javascript is only for calling the drop menus in IE6. CSS-only menus wont work in IE6 because it doesn't support hover properly.

I'm not playing with Hoochie's code because I gave up using it some time ago when I found what were, in my opinion, better alternatives.

[dzinerfusion]

OK looked at yuor code you linked me to and what do I have to add and teka out to fit my theme?>

*EDIT* Can you show me the css code for a drop down so I can modify it?

[SteveFJ]

You need js if you want to do fade in/fade out effects or whatever but you don't need it for much else. The rest can be done with css, including preloading the drop images so there is no delay in rendering on hover.

I had a good think about how best to go about things. I think the fewer files to update the better. So I've spent all day doing it in CSS. Fades with JS I'm not bothered about really.
Had a few niggling problems with IE, but that was more mistakes on my part than anything else. There are gaps between the vertical menus, but somehow, the way I've styled it, I think it works. The main menu dropped in vertically like a charm too.

Thanks very much for your help. It's been very much appreciated. 

[Antechinus]

OK looked at yuor code you linked me to and what do I have to add and teka out to fit my theme?>

*EDIT* Can you show me the css code for a drop down so I can modify it?

I did show you the css. It's in the OP of that topic I linked you to. That topic contains complete instructions for installing a drop menu.

[Antechinus]

So how are you going with this?

[SPerroud]

Cool man.
Thx

[akosiparusa]

is there a way to install this on 1.1.9, i can't find the codes on default's style.css?!

[H]

Do you still want help with this on 1.1.9?

[akosiparusa]

what was really added on the index.template? im asking this because i have other mods installed, maybe there is a format i jut need to follow.

this is how i wanted mine to look like. using 1.1.9

1. HOME

2. FORUM

3. RULES

4. SITE PANEL
   - HELP
   - CALENDAR
   - GALLERY
   - MEMBERS
   - TAGS
   - SEARCH

5. USER CPANEL
   - ADMIN
   - PROFILE
   - MY BOOKMARKS
   - MY MESSAGES

6. CONTACT

7. LOGOUT

currently, I have SMF Media Gallery,  bookmarks, rules, contact, tinyportal based on the codes below:

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>';
 
// Show the [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'home' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '">' , $txt[103] , '</a>
</td>' , $current_action == 'home' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

if($settings['TPortal_front_type']!='boardindex')
// Show the [forum] button.
echo ($current_action=='forum' || $context['browser']['is_ie4']) ? '<td class="maintab_active_first">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action=='forum' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=forum">'.$txt['tp-forum'].'</a>
</td>' , $current_action=='forum' ? '<td class="maintab_active_last">&nbsp;</td>' : '';
// Show the [help] button.
echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'help' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=help">' , $txt[119] , '</a>
</td>' , $current_action == 'help' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Show the [rules] button.
global $user_info, $modSettings;
if ($user_info['is_guest'] ? !empty($modSettings['rules_enable_guest_access']) : !empty($modSettings['rules_enable_member_access']))
echo ($current_action == 'rules' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'rules' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=rules">', !empty($modSettings['rules_tab_label']) ? $modSettings['rules_tab_label'] : $txt['rules'], '</a>
</td>' , $current_action == 'rules' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'search' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=search">' , $txt[182] , '</a>
</td>' , $current_action == 'search' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'admin' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=admin">' , $txt[2] , '</a>
</td>' , $current_action == 'admin' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action == 'profile' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'profile' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>
</td>' , $current_action == 'profile' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

    // The [bookmarks] button
if (allowedTo('make_bookmarks'))
echo ($current_action == 'bookmarks' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'bookmarks' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=bookmarks">' , $txt['bookmarks'] , '</a>
</td>' , $current_action == 'bookmarks' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'pm' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>
</td>' , $current_action == 'pm' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'calendar' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
</td>' , $current_action == 'calendar' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// [SMF Media Gallery]
if (allowedTo('mgallery_access'))
echo ($current_action == 'mgallery' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'mgallery' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=mgallery">' , $txt['mgallery_gallery'] , '</a>
</td>' , $current_action == 'mgallery' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action == 'mlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'mlist' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a>
</td>' , $current_action == 'mlist' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [contact] button
if ($context['allow_view_contact'])
echo ($current_action == 'contact' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'contact' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=contact">' , $txt['smfcontact_contact']  , '</a>
</td>' , $current_action == 'contact' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// the [tags] button
echo ($current_action == 'tags' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'tags' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=tags">' , $txt['smftags_menu']  , '</a>
</td>' , $current_action == 'tags' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';



// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action == 'login' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'login' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=login">' , $txt[34] , '</a>
</td>' , $current_action == 'login' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action == 'register' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'register' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=register">' , $txt[97] , '</a>
</td>' , $current_action == 'register' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'logout' ? 'active_back' : 'back' , '">
<a onclick="return log_out()" href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>' , $current_action == 'logout' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The end of tab section.
echo '
<td class="maintab_' , $last , '">&nbsp;</td>
';
// TinyPortal
if($context['TPortal']['leftbar'])
             echo '<td style="padding-left: 1ex;"><a href="javascript:void(0);" onclick="shrinkHeaderLeftbar(!current_leftbar); return false;"><img id="upshrinkLeftbar" src="', $settings['images_url'], '/', empty($options['collapse_leftbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTempLeftbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" /></td>';
         if($context['TPortal']['rightbar'])
             echo '<td style="padding-left: 1ex;"><a href="javascript:void(0);" onclick="shrinkHeaderRightbar(!current_rightbar); return false;"><img id="upshrinkRightbar" src="', $settings['images_url'], '/', empty($options['collapse_rightbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTempRightbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" /></td>';
// TinyPortal end
echo '
</tr>
</table>';

}

[sepulchre]

Apologies for the daft question... but how do I create a menu without a link (i.e. a header to sub menus which will carry links) my php is not great and I've tried all evening to get it to work without much success.

[Antechinus]

Just use <a href="#"> for the anchor tag part of it.

[JeremyB.]

Spanish Translation:

Code Select Expand

$ txt [ 'hcm_summary'] = 'Resumen';
$ txt [ 'hcm_account'] = 'Configuración de la cuenta »;
$ txt [ 'hcm_forumProfile'] = 'Foro de perfil ";
$ txt [ 'hcm_readmessages'] =' leer tus mensajes';
$ txt [ 'hcm_sendmessage'] = 'Enviar un mensaje';
$ txt [ 'hcm_viewmembers'] =' Ver los Miembros ";
$ txt [ 'hcm_searchmembers'] =' Buscar los diputados;

Polish Translation:

Code Select Expand

$ txt [ 'hcm_summary'] = 'Opis';
$ txt [ 'hcm_account'] = "Ustawienia konta";
$ txt [ 'hcm_forumProfile'] = 'Forum Profil ";
$ txt [ 'hcm_readmessages'] =' Czytaj Wiadomości ";
$ txt [ 'hcm_sendmessage'] = 'Wyślij wiadomość';
$ txt [ 'hcm_viewmembers'] =' Pokaż Memberlist ";
$ txt [ 'hcm_searchmembers'] =' Search for Members ";

Portuguese Translation:

Code Select Expand

$ txt [ 'hcm_summary'] = 'Resumo';
$ txt [ 'hcm_account'] = 'Configurações;
$ txt [ 'hcm_forumProfile'] = 'Forum Perfil';
$ txt [ 'hcm_readmessages'] =' leia suas mensagens';
$ txt [ 'hcm_sendmessage'] = 'Enviar uma mensagem';
$ txt [ 'hcm_viewmembers'] =' Ver As Membros »;
$ txt [ 'hcm_searchmembers'] =' Search For Members';

-JB

[sepulchre]

Just use <a href="#"> for the anchor tag part of it.

Knew it would be simple, cheers!

[FireDitto]

I'm on 1.1.10, with a slightly altered default layout;

My menu is going to have 6 tabs + the Log in/out/registers showing up "if" as applicable.
I don't want the main tabs to be links, I just want them to be... sitting there.
Under those, I'll have all the links to the places I want to go.

I have three issues I would like help with:

1. How do I make it so none of the top level are actually links, but just tabs that hide the second level tabs that are links?
2. How do I link to external pages; I want to link to my website from the forum menu.]
3. How do I change the menu names? So, instead of "Profile" I can have "Personal" and so such?

An example of what I want, menu wise:
{I shoved it in code box to make it take up a little less space}

Code Select Expand

Website [not a link]
- Link 1
- Link 2

Information [not a link]
- Admin [if]
- Staff Listing
- Member List [if]
- Contact [it's a mod]
- Help
- Search

Forums [Not a link]
- Administration I'd like to make this an if, so if you don't have administrative powers, you can't access these forums]
- area 1
- area 2
- area 3 etc [I use the multi-forums mod]

Personal [if, not a link]
- Profile
- Messages
- Personas [another mod]

Forms [not a link, also a mod]
- Form 1
- Form 2
- Form 3

Other [not a link]
- Chat [is a mod]
- Pages [another mod]
- Gallery [and again]
- Calendar


Log In / Log Out / Register


Many thanks for any help, guys.

[Antechinus]

1/ Read the post above yours. I just answered that question.

2/ You put the url for the page you want to link to. <a href="http://www.goatseftw.com" class="level1">

3/ If you're just running English and don't care about supporting multiple languages, replace the $txt strings with whatever you like.  span class="title">Personal</span>

[FireDitto]

Ahh, thank you very much.

And sorry about #1. Didn't realise that was the answer to what I was asking. >_>;