Menu Content

[brianjw]

I go on SimpleMachines website everyday and I see this really cool design. Not the smf default theme but something else. It is the menu they have above the forum that shows on every page. I want to know how to add this kind of menu and if someone could make one that will match all themes (like it will take the css from the theme for the colors)

Thanks so much!
Then just tell me how to add it
Brianjw

[IchBin]

The problem is that it is not CSS. Its CSS + images. You'd have to make your own color images for everytheme. You could make a similar menu but not with images and do that easier. You should look into it. Look at the template_menu function and see what you can do.

[Nokonium]

You can make CSS buttons by using a mouseover to change the colours, you should be able to find information about that on the web. The ones in the Definition theme are if I recall correctly, done using a flash script that Block found on the web.

[brianjw]

Good idea
dont know where to start, lol

[Nokonium]

This site uses css button menus http://www.nokonium.plus.com/black-cat/black-cat-index.htm

This is a horizontal button strip from the site

Code Select Expand

<tr>
Ã,  Ã, Ã, 
<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated1.htm">ag-1</a></td>
Ã,  Ã, Ã, 
<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated2.htm">ag-2</a></td>
Ã,  Ã, Ã, 
<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated3.htm">ag-3</a></td>
Ã,  Ã, Ã, 
<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated4.htm">ag-4</a></td>

<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated5.htm">ag-5</a></td>

<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated6.htm">ag-6</a></td>

Ã,  Ã, Ã, 
<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated7.htm">ag-7</a></td>
Ã,  Ã, Ã, 
<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated8.htm">ag-8</a></td>
Ã,  Ã, Ã, 
<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated9.htm">ag-9</a></td>
Ã,  Ã, Ã, 
<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated10.htm">ag-10</a></td>

<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated11.htm">ag-11</a></td>

<td class="off" onmouseover="this.classname='on'; return true"
Ã,  onmouseout="this.classname='off';"><a href="animated12.htm">ag-12</a></td>
Ã,  Ã,  </tr>

The style sheet has two button styles - td.on and td.off

To use it as a button row in the index.template you will need to replace the active part - i.e. <a href="animated12.htm">ag-12</a> with something that you want, i.e. an article

Code Select Expand

http://my-domain/index.php?page=8 or php code i.e.

Code Select Expand

<a href="', $scripturl, '?action=help">' , $txt[119] , '</a> will open the help section.