Webmastersite.net
Register Log In

Navigation Menu

Title Navigation Menu
Description adding css for a navigation menu
Message Text Just got WSN Links and love it. As I go through the manual and learn the codes I can help with template mods. Didn't see this anywhere and it's a simple one that I've used on my site and thought I'd share. Simply modify the image paths, sizes, and colors to your personal choice. Add the following to your stylesheet (styles/default.css by default):
#navbar_menubar {
margin-left: 0;
position: relative;
width: 100%;
display: block;
height: 25px;
font-size: 14px;
font-weight: bold;
font-family: Arial;
} 

#navbar_menu {
position: relative;
display: block;
height: 25px;
font-size: 10pt;
font-family: Arial;
font-weight: bold;
} 

#navbar_menu ul {
margin: 0;
padding: 0;
list-style-type : none;
width: auto;
} 

#navbar_menu ul li {
display: block;
float: left;
margin: 0;
border-right: 2px outset #BDBDBD;
border-left : 1px outset #6699FF;
} 

#navbar_menu ul li a:link, #navbar_menu ul li a:visited {
display: block;
float: left;
color: #FFF;
text-decoration: none;
padding: 0 20px 0 20px;
height: 25px;
background-image: url('../images_default/navbar_off.gif');
background-position: top left;
} 

#navbar_menu ul li a:hover {
background-image: url('../images_default/navbar_on.gif');
background-position: top left;
} 

#navbar_menu ul li a.current, #navbar_menu ul li a.current:hover {
background-image: url('../images_default/navbar_current.gif');
background-position: top left;
} 
ADD the following to your WRAPPER under Global templates:
<div id="navbar_menubar">
<div id="navbar_menu">
<ul>
<IF {TID} contains main.tpl><li><a class="current" href="{DIRURL}">Home</a></li>
<OTHERWISE>
<li><a href="{DIRURL}/"> </IF>
<IF {SWITCH_MEMBERS}>
<IF {TID} contains register.tpl><li><a class="current" href="{DIRURL}/register.php">Join</a></li>
<OTHERWISE>
<li><a href="{DIRURL}/register.php">Join</a></li>
</IF>
</IF>
<IF {SWITCH_SITEMAP}>
<IF {TID} contains sitemap.tpl><li><a class="current" href="{DIRURL}/sitemap.php">Sitemap</a></li>
<OTHERWISE>
<li><a href="{DIRURL}/sitemap.php">Sitemap</a></li>
</IF>
</IF>
<IF {SWITCH_CONTACT}>
<IF {TID} contains contactform.tpl><li><a class="current" href="{DIRURL}/contactform.php">ContactUS</a></li>
<OTHERWISE>
<li><a href="{DIRURL}/contactform.php">ContactUS</a></li>
</IF>
</IF>
</ul>
</div>
</div> 
This will simulate a menu that will show highlighted based on what template your are using.
Rating
  • 0/5
  • 1
  • 2
  • 3
  • 4
  • 5
0/5 based on 0 votes.
Ownership Webmist
Views 644 views. Averaging 0 views per day.
Similar Topics
Submission Date Oct 16, 2007 - 8:58 PM