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