Site in read-only mode

This site is now read-only following the release of MyBB 1.8 and the new mods site.

If you are looking for MyBB 1.8 mods please click here to visit the new mods site.

You can continue to download submissions for MyBB 1.6 and earlier here, however new submissions will only be accepted via the new mods site.

Rating

  • Rated /5 with 13 votes
  • 1
  • 2
  • 3
  • 4
  • 5

Adding a Custom Menu Bar

Wanna add extra Custom Menu Bar? Then here is how you do it:


CSS PART First:

ACP >>> Templates & Style >>> Themes >>> Your Theme >>> global.css:

Add this:

Code:
/*Top level list items*/
.suckertreemenu ul li {
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

/*Top level menu link items style*/
.suckertreemenu ul li a {
display: block;
width: 182.5px; /*Width of top level menu link items*/
padding: 4px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
-moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

/*1st sub level menu*/
.suckertreemenu ul li ul {
left: 2px;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li {
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul {

left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a {
display: block;
width: 180px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 4px 0px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover {
background-color: black;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon {
background: #F3F3F3 url(http://www.dynamicdrive.com/cssexamples/media/arrow-down.gif)no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon {
background: #F3F3F3 url(http://www.dynamicdrive.com/cssexamples/media/arrow-right.gif)no-repeat center right;
}

* html p#iepara {
/*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

* html .suckertreemenu ul li {
float: left; height: 1%;
}

* html .suckertreemenu ul li a {
height: 1%;
}


Now The Coding Part:

ACP >>> Templates & Style >>> Templates >>> Your Template >>> Header >>> header:

Add this at the very top:

Code:
<script type="text/javascript">
var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
        if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
            ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
            ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
        }
        else{ //else if this is a sub level menu (ul)
          ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
        }
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
  }
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>


Then find this:

Code:
{$welcomeblock}


Add this below:

Code:
<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="#" class="home" style="border-left: 1px solid black">Tab 1</a></li>
<li><a href="#" class="online">Tab 2</a></li>
<li><a href="#" class="help">Tab 3</a></li>
<li><a href="#" class="memberlist">Tab 4</a>
<ul>
  <li><a href="#">Sub Section 1</a>
    <ul>
    <li><a href="#">Sub Section 1</a></li>
    <li><a href="#">Sub Section 1</a></li>
    </ul>
</li>
<li><a href="#">Sub Section 2</a>
    <ul>
    <li><a href="#">Sub Section 2</a></li>
    <li><a href="#">Sub Section 2</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="#">Tab 5</a></li>
</ul>
<br style="clear: left;" />
</div>


You have your very own custom menu. More custom themes are available at: http://www.dynamicdrive.com/style