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

Started by Hoochie Coochie Man, August 05, 2008, 05:37:39 AM

Previous topic - Next topic

Hoochie Coochie Man



Live Demo

UserName: Test
Password: 123456

Narration for 1.1.5 SMF Default Theme




Hi, first of all open your theme's style.css, then we will add our codes for dropdown.

add to the end:
/* 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
}





Now. Every theme have "menu tab section"..
We must remove our old tabs.
So remove from this..

// Show the start of the tab section.

till
there..

}

// Generate a strip of buttons.


I'm talking about that area:
// Show the start of the tab section.
echo '
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="maintab_' , $first , '">&nbsp;</td>';

// 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>' : '';

// 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>' : '';

// 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>' : '';

// 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>' : '';

// 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>' : '';


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


Now, we must add aour new dropdown menu in here..
Here it is...

// 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>';

                  // 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></li>';
                             
                  // Edit Profile... [profile]
                  if ($context['allow_edit_profile'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=profile" class="level1 parent"><span><span class="title">' , $txt[79] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=profile" class="level2"><span>' , $txt['hcm_summary'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=account" class="level2"><span>' , $txt['hcm_account'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level2"><span>' , $txt['hcm_forumProfile'] , '</span></a></li>
                  </ul></li>';


                  // Go to PM center... [pm]
                  if ($context['user']['is_logged'] && $context['allow_pm'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=pm" class="level1 parent"><span><span class="title">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=pm" class="level2"><span>' , $txt['hcm_readmessages'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span>' , $txt['hcm_sendmessage'] , '</span></a></li>
                  </ul></li>';


                  // The [calendar]!
                  if ($context['allow_calendar'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=calendar" class="level1"><span><span class="title">' , $txt['calendar24'] , '</span></span></a></li>';


                  // the [member] list button
                  if ($context['allow_memberlist'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=mlist" class="level1 parent"><span><span class="title">' , $txt[331] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=mlist" class="level2"><span>' , $txt['hcm_viewmembers'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=mlist;sa=search" class="level2"><span>' , $txt['hcm_searchmembers'] , '</span></a></li>
                  </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>

</td>
</tr>
</table>';





Then, we must add our submenus' language strings.
Modifications.english.php
Find:
?>

Add before:
$txt['hcm_summary'] = 'Summary';
$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';


Finally upload the attached images to your theme file.




Another alternative dropdown menu.
İnadına SMF 1.1.X

Eliana Tamerin

For me, it appears as a huge block instead of a horizontal list. See the attached screenshot.
Do NOT PM me for support.

SimplePortal 2.3.6 is OUT!
SimplePortal Project Manager
Download | Docs
SimplePortal: Power of Simplicity!

Hoochie Coochie Man

Did you add style codes to your style.css?
Also can you attach your index.template.php?
İnadına SMF 1.1.X

Eliana Tamerin

Do NOT PM me for support.

SimplePortal 2.3.6 is OUT!
SimplePortal Project Manager
Download | Docs
SimplePortal: Power of Simplicity!

Hoochie Coochie Man

Can you try new style codes?
Because I replace them 1.5 hours ago.
İnadına SMF 1.1.X


Nathaniel

Wow, Very nice HCM. Works perfectly! :D

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:
    // 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:
    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:
   // 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. :D

Thanks again, to HCM.
SMF Friend (Former Support Specialist) | SimplePortal Developer
My SMF Mods | SimplePortal

"Quis custodiet ipsos custodes?" - Who will Guard the Guards?

Please don't send me ANY support related PMs. I will just delete them.

Angelotus

Hi, thanks everyone (Hoochie in particular ;) ). I have edited bits and pieces of the code to suite my needs. Please see the result at www.weeklyfun.nl (top horizontal navmenu). Ps for the dropwdown I used the DDscript.

Hoochie Coochie Man

Thanks for comments guys. And also thank you very much for 2.0 convert @LHVWB
İnadına SMF 1.1.X

Eliana Tamerin

Aha, it just needed a refresh. My bad.

Good work, HCM.
Do NOT PM me for support.

SimplePortal 2.3.6 is OUT!
SimplePortal Project Manager
Download | Docs
SimplePortal: Power of Simplicity!

Hoochie Coochie Man

Quote from: Eliana Tamerin on August 05, 2008, 08:24:37 AM
Aha, it just needed a refresh. My bad.

Good work, HCM.

Thanks..
I'm happy that you solved :)
İnadına SMF 1.1.X

ccbtimewiz

A suggestion:

Maybe you could port this as a mod for the default theme? Might be very useful. :)

Hoochie Coochie Man

For DS-Natural Theme



index.template.php
Find:
// Show the start of the tab section.
echo '
<div id="topmenu">
<ul>';
// Show the [home] button.
echo '<li><a' , $current_action=='home' ? ' class="current"' : '' , ' href="', $scripturl, '"><span>' , $txt[103] , '</span></a></li>';

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

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

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

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

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

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

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

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

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

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

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


Replace:
// Show the start of the tab section.
echo '
<div id="topmenu">
               <ul class="menu">
                     
                  <li class="level1"><a' , $current_action=='home' ? ' class="current"' : '' , ' href="', $scripturl, '"><span class="title">' , $txt[103] , '</span></a></li>

                  <li class="level1"><a' , $current_action=='help' ? ' class="current"' : '' , ' href="', $scripturl, '?action=help"><span class="title">' , $txt[119] , '</span></a></li>';

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

                  // Is the user allowed to administrate at all? ([admin])
                  if ($context['allow_admin'])
                  echo '
                                  <li class="level1"><a' , $current_action=='admin' ? ' class="current"' : '' , ' href="', $scripturl, '?action=admin"><span class="title">' , $txt[2] , '</span></a></li>';
                             
                  // Edit Profile... [profile]
                  if ($context['allow_edit_profile'])
                  echo '
                                  <li class="level1 parent"><a' , $current_action=='profile' ? ' class="current"' : '' , ' href="', $scripturl, '?action=profile"><span class="title">' , $txt[79] , '</span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=profile" class="level2"><span>' , $txt['hcm_summary'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=account" class="level2"><span>' , $txt['hcm_account'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level2"><span>' , $txt['hcm_forumProfile'] , '</span></a></li>
                  </ul></li>';


                  // Go to PM center... [pm]
                  if ($context['user']['is_logged'] && $context['allow_pm'])
                  echo '
                                  <li class="level1 parent"><a' , $current_action=='pm' ? ' class="current"' : '' , ' href="', $scripturl, '?action=pm"><span class="title">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=pm" class="level2"><span>' , $txt['hcm_readmessages'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span>' , $txt['hcm_sendmessage'] , '</span></a></li>
                  </ul></li>';


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


                  // the [member] list button
                  if ($context['allow_memberlist'])
                  echo '
                                  <li class="level1 parent"><a ' , $current_action=='mlist' ? ' class="current"' : '' , ' href="', $scripturl, '?action=mlist"><span class="title">' , $txt[331] , '</span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=mlist" class="level2"><span>' , $txt['hcm_viewmembers'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=mlist;sa=search" class="level2"><span>' , $txt['hcm_searchmembers'] , '</span></a></li>
                  </ul></li>';

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

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


style.css
find topmenu codes:
#topmenu {
display: block;
position: relative;
height: 32px;
font-size: 11px;
text-transform: uppercase;
margin: 0;
float: left;
padding: 0;
}

#topmenu ul {
margin: 14px 0 0;
padding: 0;
list-style-type: none;
width: auto;
float: left;
}

#topmenu ul li {
display: block;
float: left;
margin: 0 2px;
}

#topmenu ul li a {
display: block;
float: left;
color: #444;
text-decoration: none;
padding: 0 0 0 10px;
height: 21px;
line-height: 21px;
}

#topmenu ul li a span {
padding: 0 9px 0 0;
}

#topmenu ul li a:hover {
color: #000;
}

#topmenu ul li a:hover span {}

#topmenu ul li a.current {
color: #fff;
background: #B94C16 url('images/custom/topmenu-on-l.png') no-repeat 0 0;
}

#topmenu ul li a.current span {
display: block;
width: auto;
background: #B94C16 url('images/custom/topmenu-on-r.png') no-repeat 100% 0;
}


Replace them with:
div#topmenu {
display: block;
position: relative;
height: 32px;
font-size: 11px;
text-transform: uppercase;
margin: 0;
float: left;
padding: 0;
}

div#topmenu ul {
margin: 14px 0 0;
padding: 0;
list-style-type: none;
width: auto;
float: left;
}

div#topmenu ul li {
   position: relative;
   margin: 0px;
   padding: 0px;
   display: block;
   float: left;
   z-index: 5;
}

div#topmenu ul li a {
display: block;
float: left;
color: #444;
text-decoration: none;
padding: 0 0 0 10px;
height: 21px;
line-height: 21px;
margin-bottom: 5px;
}

div#topmenu ul li a span {
padding: 0 9px 0 0;
}

div#topmenu ul li a:hover {
color: #000;
}

div#topmenu ul li a:hover span {}

div#topmenu ul li a.current {
color: #fff;
background: #B94C16 url('images/custom/topmenu-on-l.png') no-repeat 0 0;
}

div#topmenu ul li a.current span {
display: block;
width: auto;
background: #B94C16 url('images/custom/topmenu-on-r.png') no-repeat 100% 0;
}

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

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

div#topmenu li.active a.level1, div#topmenu li.active span.level1 {
   color: #aa1428;
   font-weight: bold;
}


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


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


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


div#topmenu ul.menu ul {
   position: absolute;
   top: 7px;
   left: -999em;
   width: 165px;
   font-size: 88%;
   background: #86867D;
}

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

div#topmenu li.level1 li {
   width: 100%;
   text-indent: 15px;
}
İnadına SMF 1.1.X

BuЯЯЯЯaK


ousu

How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version

Hoochie Coochie Man

Quote from: ousu on August 07, 2008, 07:07:03 AM
How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version

I will take a look in my free time.
İnadına SMF 1.1.X

HellBent

Hi, nice work HCM, this is just what I'm looking for.  However, I'd like to have drop down button for the arcade.

If possible it would drop down in this order:


Arcade (level 1)
Multiplayer Arcade (level 2)
SMF Chess (level 2)


Here's the what I came up with (I'm a noob) and I'm getting an error:

//the [Arcade Games] list button
                if ($context['allow_arcade'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=arcade" class="level1 parent"><span><span class="title">' , $txt['arcade'] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=multiplayer" class="level2"><span>' , $txt['mp13'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=chess" class="level2"><span>' , $txt['SMFchess'] , '</span></a></li>
                  </ul></li>';



But it's not working for me. I get template errors.  I tried it with a flash chat drop down too:

Flash Chat (level One)
SMF Gallery (level two)

and with the Help button:

Help
Search
Treasury

I did them all the same as the code I've shown you.  I assume it's because some of them in each list have different "contexts"  is there anything I can do to make it work even so?


Hoochie Coochie Man

Hi @HellBent

These are the codes that you lookin for..

Quote// New button... [BUTTON NAME]
                  if ($context['allow_edit_profile'])
                  echo '
                                  <li class="level1 parent"><a href="MAIN ITEM LINK" class="level1 parent"><span><span class="title">MAIN ITEM</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="ITEM 1 LINK" class="level2"><span>ITEM 1</span></a></li>
                      <li class="level2"><a href="ITEM 2 LINK" class="level2"><span>ITEM 2</span></a></li>
                      <li class="level2"><a href="ITEM 3 LINK" class="level2"><span>ITEM 3</span></a></li>
                  </ul></li>';

İnadına SMF 1.1.X

ousu

Quote from: Hoochie Coochie Man on August 07, 2008, 07:10:42 AM
Quote from: ousu on August 07, 2008, 07:07:03 AM
How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version
Please could you PM me after you see about this.

Thank you.
I will take a look in my free time.


HellBent

Oh wow, thanks Hoochie Coochie, I can't wait to try it out  :D

Quote from: Hoochie Coochie Man on August 07, 2008, 09:44:51 AM
Hi @HellBent

These are the codes that you lookin for..

Quote// New button... [BUTTON NAME]
                  if ($context['allow_edit_profile'])
                  echo '
                                  <li class="level1 parent"><a href="MAIN ITEM LINK" class="level1 parent"><span><span class="title">MAIN ITEM</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="ITEM 1 LINK" class="level2"><span>ITEM 1</span></a></li>
                      <li class="level2"><a href="ITEM 2 LINK" class="level2"><span>ITEM 2</span></a></li>
                      <li class="level2"><a href="ITEM 3 LINK" class="level2"><span>ITEM 3</span></a></li>
                  </ul></li>';



Advertisement: