To use this website completely, it is necessary to store cookies on your computer.
 

Drop menus for SMF default theme (Core).

Started by antechinus, 2009 January 05, 06:03:44

previous topic - next topic

0 Members and 0 Guests are viewing this topic.

antechinus

2009 January 05, 06:03:44
Lady Night Owl asked me to do these as she uses some variations of Core that she did herself.
Hex codes and images in this post are for the theme in unmodified form but are easily changed for customised versions.

Start with index.template.php

Find:

Code Select
echo '
</head>
<body>';
}



Add before:

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

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



Find:

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

echo '
<div id="main_menu">
<ul class="clearfix">';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a', $button['active_button'] ? ' class="active"' : '', ' title="', $act , '" href="', $button['href'], '">
<span', isset($button['is_last']) ? ' class="last"' : '', '>', ($button['active_button'] ? '<em>' : ''), $button['title'], ($button['active_button'] ? '</em>' : ''), '</span>
</a>
</li>';
}

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



Replace with:

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

echo '
<div class="tabs"><div class="menu-first"></div>
<ul>';
foreach ($context['menu_buttons'] as $act => $button)
{
echo '   <li><a ', $button['active_button'] ? ' class="current"' : '' , ' href="', $button['href'], '">
         <span class="menu-left"></span>
<span class="menu">' , $button['title'] , '</span>
<span class="menu-right"></span></a>';

          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
                             <div class="sub">
<ul>';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                <li><a href="', $sub_button['href'], '">' , $sub_button['title'] , '</a></li>';
            echo '
                                 </ul>
</div>';      
         }

echo' </li>';

}

echo '
           
</ul><div class="menu-last"></div>
</div>';
}



Style.css: add the following to the end of the file.

Code Select
/*Drop menu codes*/

.tabs {
float: left;
margin: 0 0 10px 0;
font-size: 9px;
list-style: none;
color: #FFFFFF;
     padding: 0 0 0 10px;
font-family: tahoma, sans-serif;
text-transform: uppercase;
}

.tabs a:link{
     color: #FFFFFF;
cursor: pointer;
}

.tabs a:visited {
     color: #FFFFFF;
}

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

.tabs ul li a.current {
color: #FFFFFF;
}

.tabs ul li a.current:hover {
color: #E4EDF4;
}

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

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

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

.menu-first {
width: 8px;
height: 17px;
line-height: 17px;
display: block;
float: left;
overflow: hidden;
padding: 0 0 4px 0;
     background: url(images/maintab_first.gif) no-repeat bottom left;
}

a .menu-left {
width: 8px;
height: 17px;
line-height: 17px;
display: block;
float: left;
overflow: hidden;
padding: 0 0 4px 0;
     background: url(images/maintab_back.gif) 0 100% repeat-x;
}

a .menu {
width: auto;
height: 17px;
line-height: 17px;
display: block;
float: left;
overflow: hidden;
padding: 0 0 4px 0;
     background: url(images/maintab_back.gif) 0 100% repeat-x;
}

a .menu-right {
width: 8px;
height: 17px;
line-height: 17px;
display: block;
float: left; 
     padding: 0 0 4px 0;
     background: url(images/maintab_back.gif) 0 100% repeat-x;
}

.menu-last {
width: 8px;
height: 17px;
line-height: 17px;
display: block;
float: left; 
     padding: 0 0 4px 0;
     background: url(images/maintab_last.gif) no-repeat bottom right;
}

.tabs li a:hover .menu-left,
.tabs li:hover a .menu-left {}

.tabs ul li a.current .menu-left {
     background: url(images/maintab_active_first.gif) no-repeat bottom left;
}

.tabs li a:hover .menu,
.tabs li:hover a .menu {}

.tabs ul li a.current .menu {
     background: url(images/maintab_active_back.gif) repeat-x bottom left;
}

.tabs li a:hover .menu-right,
.tabs li:hover a .menu-right {}

.tabs ul li a.current .menu-right {
     background: url(images/maintab_active_last.gif) no-repeat bottom right;
}

.tabs li a:hover,
.tabs li.hover a,
.tabs li:hover a {
     color: #E4EDF4;
text-decoration: none;
}

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

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

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

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

.tabs li:hover li a,
.tabs li.current li a {
color: #3E6488;
text-decoration: none;
background: none;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
line-height: 15px;
width: 146px;
}

.tabs li:hover li a:hover,
.tabs li.current li a:hover {
     color: #003B6F;
line-height: 15px;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
background: url(images/submenu_bg.png) no-repeat;
}

/*IE*/
.tabs li li a:hover {
color: #003B6F;
line-height: 15px;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
background: url(images/submenu_bg.png) no-repeat;
}
/**/

/* End of drop menu codes. */


Add the two submenu images to your images folder and it's all sorted.  8)
Screenshot is also attached if you want to see what the menus look like.

I've checked these in FF3, IE7, IE 6 ,Safari 3.1 and Opera 9.5 and they should be fine in other browsers.
You'll only see the standard SMF menu in IE6. Don't bother complaining if you use IE6. I don't care about IE 6.
These codes will also work with RC1 when it is released. No, I'm not answering any questions about RC1.


[attachment deleted by admin]
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

Demon Slushy

#1
2009 January 05, 08:29:06
Nice job!

Cool

#2
2009 January 05, 09:32:02
nice one and i agree to
QuoteI don't care about IE 6
 |I Use: SMF 2.0.5 | PortaMx 1.51
Q: What do you do when you see a bear in the woods?
A: Play Dead!
H-A-H-L = Happy Admins Have Linux

justdownload.us

#3
2010 September 29, 07:45:12
can i use this code to other curve themes
DOn't BeLiEve tHat yOu kNow EverYthiNg!!

antechinus

#4
2010 October 05, 02:28:04
The code for RC3 will be different, and the Curve theme has drop menus as a standard feature anyway.
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.