MyBB Community Forums

Full Version: [split] How to make this menu in MyBB
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Can somebody tell me how to make that menu from MyBB ?
Home  About Downloads  Community Forum  Features Support Ideas Mods  Wiki Blog

when one of them is selected, it is highlighted.

Thanks.
(2008-12-09, 08:54 AM)mihails_univers Wrote: [ -> ]Can somebody tell me how to make that menu from MyBB ?
Home  About Downloads  Community Forum  Features Support Ideas Mods  Wiki Blog

when one of them is selected, it is highlighted.

Thanks.

That would be a :hover effect.
.a:link {
background-color: #000;
}
.a:hover {
background-color: #343434;
}
That is a sample code.
Actually you would use a ( .a:active ) function with line <span class="active"> to have the highlighted option for what page you are on.
(2008-12-24, 10:45 PM)MyBB Workshop* Wrote: [ -> ]Actually you would use a ( .a:active ) function with line <span class="active"> to have the highlighted option for what page you are on.

like mybbworkshop said it's the active class that you need to have...

what i have at http://domainanalysis.net/ is a mini exmaple (of course for mybb if would deal with images i'm guessing, but my site gives a brief idea)

here's a piece of the code:

<li><a href="/" accesskey="h">Home</a></li>
<li class="active">Home</li>

      <li><a href="/about.php" accesskey="a">About</a></li>
      <li><a href="/news.php" accesskey="n">News</a></li>
      <li><a href="#" accesskey="k">Keywords</a></li>
      <li><a href="/whois.php" accesskey="w">Whois</a></li>
      <li><a href="/disclaimer.php" accesskey="d">Disclaimer</a></li>
      <li><a href="/contact.php" accesskey="c">Contact</a></li>


and the css looks like:

.bar li {
background:#FFFFFF none repeat scroll 0 0;
color:#808080;
float:left;
margin:0;
padding:4px 10px 8px;
}
.bar li.active {
background:#FFFFFF url(bar.gif) no-repeat scroll center bottom;
color:#9EC068;
font-weight:bold;
padding-bottom:8px;
}
.bar a {
-moz-background-clip:inherit;
-moz-background-inline-policy:inherit;
-moz-background-origin:inherit;
background:inherit inherit inherit inherit inherit;
color:#4A8EBC;
font-weight:bold;
}

now for your situation i'm guessing you would substitute images instead of the bar colours..Smile
hmm, pretty good idea. How didn't I remember this? :|
Can't just someone post what and how do I do this? This would be a great christmas present (or if I get an answer in 2 days or something, it doesn't matter Toungue) for my forums.

I also want this, but I want the menu with my own images, so it can be similiar to the theme I've made. Anyone?
If someone knows how to, please tell me what codes should I add, where and how.

Merry christmas everyone, btw.
for the images, make a class in your css, example:

bar_button{

background-image: yourfolder/yourimage.png;

}

bar_button:hover{

background-image: yourfolder/yourselectedimage.png

}

and then define every element reresenting a button in the menu with that class, if you do it with tables for example do:

<table>
<tr>
<td class="bar_button" width="30px" valign="middle">
Menu Item 1
</td>
<td class="bar_button" width="30px" valign="middle">
Menu Item 2
</td>
<td class="bar_button" width="30px" valign="middle">
Menu Item 3
</td>
(...................... and so on .......................)
</tr>
</table>

you'd just have to position that table corrctly where you want it.