Advertisement:

Author Topic: [Tip] Drop Down Menu Tutorial (..for all themes)  (Read 221458 times)

Offline Hoochie Coochie Man

  • SMF Hero
  • ******
  • Posts: 5,135
  • Gender: Male
    • İstanblues.org
[Tip] Drop Down Menu Tutorial (..for all themes)
« on: August 05, 2008, 05:37:39 AM »


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:
Code: [Select]
/* 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..

Code: [Select]
// Show the start of the tab section.
till
there..

Code: [Select]
}

// Generate a strip of buttons.

I'm talking about that area:
Code: [Select]
// 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...

Code: [Select]
// 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:
Code: [Select]
?>
Add before:
Code: [Select]
$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.
« Last Edit: November 10, 2008, 05:25:28 AM by *erhan »
İnadına SMF 1.1.X

Offline Eliana Tamerin

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,585
  • Gender: Female
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #1 on: August 05, 2008, 07:14:28 AM »
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!

Offline Hoochie Coochie Man

  • SMF Hero
  • ******
  • Posts: 5,135
  • Gender: Male
    • İstanblues.org
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #2 on: August 05, 2008, 07:30:40 AM »
Did you add style codes to your style.css?
Also can you attach your index.template.php?
İnadına SMF 1.1.X

Offline Eliana Tamerin

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,585
  • Gender: Female
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #3 on: August 05, 2008, 07:37:32 AM »
Attached both.
Do NOT PM me for support.

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

Offline Hoochie Coochie Man

  • SMF Hero
  • ******
  • Posts: 5,135
  • Gender: Male
    • İstanblues.org
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #4 on: August 05, 2008, 07:44:56 AM »
Can you try new style codes?
Because I replace them 1.5 hours ago.
İnadına SMF 1.1.X

babjusi

  • Guest
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #5 on: August 05, 2008, 07:47:48 AM »
Nice work again HCM :)

Offline Nathaniel

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 3,117
  • Gender: Male
    • Verbtest.com
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #6 on: August 05, 2008, 08:01:55 AM »
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:
Code: [Select]
    // 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]
    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]
   // 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.

Offline Angelotus

  • Sr. Member
  • ****
  • Posts: 881
  • Gender: Male
    • Weeklyfun.nl | The Dutch Society of Fun
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #7 on: August 05, 2008, 08:03:20 AM »
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.

Offline Hoochie Coochie Man

  • SMF Hero
  • ******
  • Posts: 5,135
  • Gender: Male
    • İstanblues.org
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #8 on: August 05, 2008, 08:06:06 AM »
Thanks for comments guys. And also thank you very much for 2.0 convert @LHVWB
İnadına SMF 1.1.X

Offline Eliana Tamerin

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,585
  • Gender: Female
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #9 on: August 05, 2008, 08:24:37 AM »
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!

Offline Hoochie Coochie Man

  • SMF Hero
  • ******
  • Posts: 5,135
  • Gender: Male
    • İstanblues.org
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #10 on: August 05, 2008, 08:38:14 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

Offline ccbtimewiz

  • SMF Hero
  • ******
  • Posts: 5,300
  • Gender: Male
  • OXEN
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #11 on: August 05, 2008, 08:40:11 AM »
A suggestion:

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

Offline Hoochie Coochie Man

  • SMF Hero
  • ******
  • Posts: 5,135
  • Gender: Male
    • İstanblues.org
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #12 on: August 06, 2008, 06:36:37 AM »
For DS-Natural Theme



index.template.php
Find:
Code: [Select]
// 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:
Code: [Select]
// 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:
Code: [Select]
#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:
Code: [Select]
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

Offline BuЯЯЯЯaK

  • SMF Hero
  • ******
  • Posts: 2,121
  • Gender: Male
  • Burak
    • dinle sevgili
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #13 on: August 06, 2008, 07:14:33 AM »
Nice work bro =)

Offline ousu

  • Semi-Newbie
  • *
  • Posts: 90
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #14 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

Offline Hoochie Coochie Man

  • SMF Hero
  • ******
  • Posts: 5,135
  • Gender: Male
    • İstanblues.org
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #15 on: August 07, 2008, 07:10:42 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

Offline HellBent

  • Semi-Newbie
  • *
  • Posts: 38
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #16 on: August 07, 2008, 08:42:56 AM »
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:

Code: [Select]
//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?


Offline Hoochie Coochie Man

  • SMF Hero
  • ******
  • Posts: 5,135
  • Gender: Male
    • İstanblues.org
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #17 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>';

İnadına SMF 1.1.X

Offline ousu

  • Semi-Newbie
  • *
  • Posts: 90
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #18 on: August 07, 2008, 06:34:28 PM »
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.


Offline HellBent

  • Semi-Newbie
  • *
  • Posts: 38
Re: [Tip] Drop Down Menu Tutorial (..for all themes)
« Reply #19 on: August 08, 2008, 08:50:36 AM »
Oh wow, thanks Hoochie Coochie, I can't wait to try it out  :D

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