Drop menus for SMF default theme (Core).

Started by antechinus, 10 years ago

previous topic - next topic

0 Members and 1 Guest are viewing this topic.

antechinus

*
10 years ago
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
10 years ago
Nice job!

Cool

*
#2
10 years ago
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
8 years ago
can i use this code to other curve themes
DOn't BeLiEve tHat yOu kNow EverYthiNg!!

antechinus

*
#4
8 years ago
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.

* Shouts

Feline
9 months ago
Today we update our Forum to the Version 1.45
Feline
a year ago
Today we update our Forum to Version 1.4
This release is full compatible with the EU GDPR
Feline
a year ago
Update for PortaMx 1.54 ecl released.
With this updates the Portal works with PHP 7.x and SMF 2.0.15
Feline
a year ago
PortaMx Forum 1.3
released !

*
Feline
a year ago
Today we switched to PHP 7.2 and activate Opcode caching.
Fast .. Very fast *
Feline
2 years ago
Today we upgrade our old SMF 2.0 Forum to PortaMx Forum *

* Calendar

Su
Mo
Tu
We
Th
Fr
Sa
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
HolidaysJun 20: Fronleichnam (de)
Jun 21: Summer Solstice (en)