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

* Navigator

Expand - Collapse

* Statistic


  • *Total Posts: 16431
  • *Total Topics: 2522
  • *Online Today: 10
  • *Most Online: 292
(12. Nov 2016, 09:37:31)
  • *Users: 0
  • *Guests: 0
  • *Spiders: 2
  • *Total: 2

  • *Google (2)

* Calendar

Mo
Tu
We
Th
Fr
Sa
Su
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Birthdays
Apr 23: klein.michael (41)
Apr 24: Poet1960 (57)

Drop menus for SMF default theme (Core).

Started by antechinus, 05. Jan 2009, 06:03:44

previous topic - next topic

0 Members and 0 Guests are viewing this topic.

antechinus

05. Jan 2009, 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
05. Jan 2009, 08:29:06
Nice job!

Cool

#2
05. Jan 2009, 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
29. Sep 2010, 07:45:12
can i use this code to other curve themes
DOn't BeLiEve tHat yOu kNow EverYthiNg!!

antechinus

#4
05. Oct 2010, 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.