News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[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

Upps sorryy
@HellBent
Remove this on above codes:
if ($context['allow_edit_profile'])

@ousu
I will turn back to you when came back from music festival.
İnadına SMF 1.1.X

[unplugged]

Great work!! Thanks HCM, and thanks for the SMF 2.0 rework LHVWB.
« Next Edit: Tomorrow at 08:34:45 PM by SunKing »   <---- « someone stole my sig... :o »



[unplugged]

Is there a way to get the admin menu in SMF 2.0 to use the same style as this one (so they would both look and behave the same)?
« Next Edit: Tomorrow at 08:34:45 PM by SunKing »   <---- « someone stole my sig... :o »



Manu.G

That's what I was looking for the whole time, cause our menu of the forum is having to much links.

I'm using the OverView Multi 7 Theme and I tried to add the drop down menu to the index.template.php, but I wasn't successful.  :'(

I want to have a new button in the menu were our members can find:

  • Members Map
  • Team (original Staff List)
  • Gallery
  • Chat
  • Games (original Arcade)
Is there a way for helping me?  ???
Version SMF 2.0.8
SimplePortal 2.3.5

Antechinus

Did you also add the css changes and images?

Btw Hoochie, I haven't had a chance to play with Dilber much but it looks like it's the TP upshrinks that cause the problem I was having with IE. I'll figure out a workaround for it when I have the time, if someone else doesn't sort it first.

Hoochie Coochie Man

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

I will take a look in my free time.




Style.css
Add to the end
/*
* Drop Down Menu Feature
*/


div#menu {
   z-index: 11;
   height: 40px;
   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: 40px;
   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: #444444;
}

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;
   font-size: 100%;
     
}

div#menu a.level1 span, div#menu span.level1 span {
   padding: 3px 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: #444444;
}

div#menu li.active a.level1, div#menu li.active span.level1 {
   color: #aa1428;
   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: 90%;
   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: 35px;
   left: -999em;
   width: 165px;
   font-size: 88%;
   background: url('images/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

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;;
   float: none;
   display: block;
   line-height: 25px
   background: url('images/menu_item.png') no-repeat 100% 0;
}


index.template.php
find:
echo '

<ul>';



// Show the [home] button.

echo '<li><a href="', $scripturl, '">' , $txt[103] , '</a></li>';



// Show the [help] button.

echo '<li><a href="', $scripturl, '?action=help">' , $txt[119] , '</a></li>';



// How about the [search] button?

if ($context['allow_search'])

echo '<li><a href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';



// Is the user allowed to administrate at all? ([admin])

if ($context['allow_admin'])

echo '<li><a href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';



// Edit Profile... [profile]

if ($context['allow_edit_profile'])

echo '<li><a href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';



// Go to PM center... [pm]

if ($context['user']['is_logged'] && $context['allow_pm'])

echo '<li><a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a></li>';





// The [calendar]!

if ($context['allow_calendar'])

echo '<li><a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';



// the [member] list button

if ($context['allow_memberlist'])

echo '<li><a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';





// If the user is a guest, show [login] button.

if ($context['user']['is_guest'])

echo '<li><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';





// If the user is a guest, also show [register] button.

if ($context['user']['is_guest'])

echo '<li><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';





// Otherwise, they might want to [logout]...

if ($context['user']['is_logged'])

echo '<li><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';



echo '</ul>';


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

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


find:
<div id="nav">',template_menu(),'

</div>


replace:
',template_menu(),'


Upload those pictures to your images folder

http://img50.imageshack.us/img50/1733/menubgok6.png (as menu_bg.png)
http://img527.imageshack.us/img527/10/menuitempw9.png (as menu_item.png)
and attached images of first post.
İnadına SMF 1.1.X

mattz83

How can I make the height of the button bar smaller?  This is what I'm talking about:



I think I can keep messing with the CSS file and figure it out eventually, but if anyone knew exactly, it'd be a big help.

thanks.

Hoochie Coochie Man

@mattz83

you can edit sep_black.png and sep_white.png height for that.
İnadına SMF 1.1.X

mattz83

Quote from: Hoochie Coochie Man on August 11, 2008, 03:12:36 PM
@mattz83

you can edit sep_black.png and sep_white.png height for that.

Thanks.. I have it about 80% setup like I want. This is a really useful tip. Hoever, I still have a couple of questions that maybe you can help me with...


How can I bridge the gap between the hover link and the dropdown menu as seen in this screen:



Notice the gap between Profile and its dropdown menu? That's what I'm trying to fix.

Also, I'm wondering if you or anyone knew how I could add a small 1px border around the outside of the bar, that way it'd look a little more cleanly integrated with the site.


[unplugged]

#29
That gap is in a line height somewhere, but I can't remember exactly where.  :P

But this was a fantastic tip. I modified mine a bit to accommodate a horizontal submenu, which I think looks really professional. You can take a look at it HERE.

You can see the submenu by hovering over the TEST SITE button.
(No longer need to log in)

Thanks again for this info!
« Next Edit: Tomorrow at 08:34:45 PM by SunKing »   <---- « someone stole my sig... :o »



Antechinus

Mattz, you need to add      border: 1px solid #FFFFFF;         to the relevant class in your css.

Without a link to your site I can't tell the class name but you should be able to find it yourself easily enough since you know which images are called in it.

For the drop height there will be a top margin or padding in the sub-menu hover class in css. Play with that.

Hoochie Coochie Man

@mattz83

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


Try to decrease 40
İnadına SMF 1.1.X

olma

Thanks for this, worked like a charm...well, almost.
Some of the users of my website are somewhat outdated and still uses IE6 and the dropdowns won't show there.

Any suggestions as to how I can fix it?

Antechinus

Yes. Tell them to upgrade their browsers and in the meantime leave all critical functions in the standard toolbar format.

Let's face it, if they know there are things they want that and they'll be able to use if only they download one little tiny free browser then if they refuse to do that who is to blame for their predicament?

Seriously, why should you have to drive yourself nuts about it? We all know that even FF2 is faster, more stable and more secure than IE6.

olma

Won't argue with that, and I've countless times asked them to at least upgrade to IE7 (where this menu works)
I'm using FF3 myself, and don't use IE at all if I can help it.
The thing is, the members ranges from 16-70 years and some don't now the first thing about upgrading anything...

Hoochie Coochie Man

İnadına SMF 1.1.X

Antechinus

Exactly. If they can manage to turn their computer on and operate a mouse they can easily upgrade to IE7.

olma

#37
You (and I) wish  :P

I've given them the link, but I know some of them refuse to even try (no matter how simple it is)

Antechinus

Quote from: olma on August 12, 2008, 04:31:39 AM
You (and I) wish  :P
I said they can. If they wont that is their responsibility, not yours.

Antechinus

Olma, have you tried posting a short tutorial for your pet Luddites?

Advertisement: