|
How To Highlight Current Item in a CSS Menu?
by
25 Jun 2007
Hello everyone! This tutorial will show you how to highlight the current link on a css menu. ok lets make a quick simple css menu... CSS Starts Code:
#navcontainer
{
margin-bottom: 1em;
overflow: hidden;
width: 460px;
}
#navlist
{
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist li
{
border-left: 1px solid #000;
float: left;
line-height: 1.1em;
margin: 0 .5em 0 -.5em;
padding: 0 .5em 0 .5em;
}
#navlist li a:hover,#navlist a#active
{
border-left: 1px solid red;
text-decoration: underline;
float: left;
line-height: 1.1em;
margin: 0 .5em 0 -.5em;
padding: 0 .5em 0 .5em;
}
Now Lets Create Our Html Menu... HTML Code:
<div id="navcontainer"> <ul id="navlist"> <li><a href="index.php">Main Page</a></li> <li><a href="usercp.php">UserCP</a></li> <li><a href="search.php">Search</a></li> <li><a href="calendar.php">Calendar</a></li> <li><a href="forumdisplay.php?f=1">Announcements</a></li> </ul> </div> Now there are not many ways on vb to get the current link highlighted but we have if conditionals which will help us in this situation so first of all lets see the conditionals which will be helpful for us... #1 Links Using the .php pages (#ex. search.php, index.php) for .php pages every php page has a definition somewhere at the top of the .php file and that string goes like Code:
define('THIS_SCRIPT', 'xxx');
Code:
<if condition="THIS_SCRIPT=='xxx'"> Code:
<if condition="in_array(THIS_SCRIPT, array(xxx, xxx, xxx))"> we are done for this point... #2 Highlighting Forumdisplay Pages (#ex. forumdisplay.php?f=1) this is going to be difficult for beginners because if you have a planny of forums in one category and u want the link to be highlighted for each of them it will take us some time to go over everyone of it but don't worry it is easy after you start... so here we go... we will be using an if conditional for this one ass well... Our conditional will be Code:
<if condition="in_array($foruminfo['forumid'], array(x, x, x, x, x))"> to apply this code in our menu we have to see the forum id's we can check them either in admincp or in forum itself.. ones u get the forumid's selected for our menu lets put them in our conditional... main category id>> 1 sub categories>> 2, 3, 4, 5 Code:
<if condition="in_array($foruminfo['forumid'], array(1, 2, 3, 4, 5))"> #3. How To Combine 2 Conditional Together... if you want to use a .php file and a forumdisplay page for your menu you need to combine the two conditional together and it will going to look like; Code:
<if condition="in_array(THIS_SCRIPT, array(xxx, xxx, xxx, xxx)) OR in_array($foruminfo['forumid'], array(x, x, x, x, x))"> Now Lets Apply Our Conditional To Our CSS Menu; Our Html Menu Was HTML Code:
<div id="navcontainer"> <ul id="navlist"> <li><a href="index.php">Main Page</a></li> <li><a href="usercp.php">UserCP</a></li> <li><a href="search.php">Search</a></li> <li><a href="calendar.php">Calendar</a></li> <li><a href="forumdisplay.php?f=1">Announcements</a></li> </ul> </div> first link is HTML Code:
<li><a href="index.php">Main Page</a></li> our .php definition is 'index' so our if conditional will look like HTML Code:
<if condition="THIS_SCRIPT=='index'">
HTML Code:
<if condition="THIS_SCRIPT=='index'"><li id="active"><a href="index.php" id="active">Main Page</a></li><else /><li><a href="index.php">Main Page</a></li> HTML Code:
<if condition="in_array(THIS_SCRIPT, array(usercp, profile, private, moderation))"><li id="active"><a href="usercp.php" id="active">UserCP</a></li><else /><li><a href="usercp.php">UserCP</a></li></if> <if condition="THIS_SCRIPT=='search'"><li id="active"><a href="search.php" id="active">Search</a></li><else /><li><a href="search.php">Search</a></li></if> <if condition="THIS_SCRIPT=='calendar'"><li id="active"><a href="calendar.php" id="active">Calendar</a></li><else /><li><a href="calendar.php">Calendar</a></li>/if> HTML Code:
<li><a href="forumdisplay.php?f=1">Announcements</a></li> we will be using HTML Code:
[code]<if condition="in_array($foruminfo['forumid'], array(1, 2, 3, 4, 5))">[/code]
HTML Code:
<if condition="in_array($foruminfo['forumid'], array(1, 2, 3, 4, 5))"><li id="active"><a href="forumdisplay.php?f=1" id="active">Announcements</a></li><else /><li><a href="forumdisplay.php?f=1">Announcements</a></li></if>  !!here is our html menu! HTML Code:
<if condition="THIS_SCRIPT=='index'"><li id="active"><a href="index.php" id="active">Main Page</a></li><else /><li><a href="index.php">Main Page</a></li> <if condition="in_array(THIS_SCRIPT, array(usercp, profile, private, moderation))"><li id="active"><a href="usercp.php" id="active">UserCP</a></li><else /><li><a href="usercp.php">UserCP</a></li></if> <if condition="THIS_SCRIPT=='search'"><li id="active"><a href="search.php" id="active">Search</a></li><else /><li><a href="search.php">Search</a></li></if> <if condition="THIS_SCRIPT=='calendar'"><li id="active"><a href="calendar.php" id="active">Calendar</a></li><else /><li><a href="calendar.php">Calendar</a></li>/if> <if condition="in_array($foruminfo['forumid'], array(1, 2, 3, 4, 5))"><li id="active"><a href="forumdisplay.php?f=1" id="active">Announcements</a></li><else /><li><a href="forumdisplay.php?f=1">Announcements</a></li></if> aveon... |