[Developer]

How To Highlight Current Item in a CSS Menu?

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:

PHP 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;
}


Done With Css Menu...

Now Lets Create Our Html Menu...

HTML Code:

PHP 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>


Done With The HTML Menu.....

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:

PHP Code:

define('THIS_SCRIPT', 'xxx');


the definition is located where the xxx is... and at this point the if conditional going to be

Code:

PHP Code:

<if condition="THIS_SCRIPT=='xxx'">


**if you have more than one .php files which u want to use on your menu your conditional string will go like Code:

PHP 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:

PHP 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:

PHP Code:

<if condition="in_array($foruminfo['forumid'], array(1, 2, 3, 4, 5))">


this part is done ass well..

#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:

PHP Code:

<if condition="in_array(THIS_SCRIPT, array(xxx, xxx, xxx, xxx)) OR in_array($foruminfo['forumid'], array(x, x, x, x, x))">


and it is simple as that..

Now Lets Apply Our Conditional To Our CSS Menu;

Our Html Menu Was

HTML Code:

PHP 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 Lets Begin**

first link is HTML Code:

PHP Code:

<li><a href="index.php">Main Page</a></li>


so lets apply the conditional...

our .php definition is 'index' so our if conditional will look like HTML Code:

PHP Code:

<if condition="THIS_SCRIPT=='index'">


and our menu going to be like

HTML Code:

PHP 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>


lets apply this on evey link which is using .php page...

HTML Code:

PHP 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>


Our Last Item was HTML Code:

PHP Code:

<li><a href="forumdisplay.php?f=1">Announcements</a></li>


.. So lets begin applying our conditional on our link...

we will be using HTML Code:

<if condition="in_array($foruminfo['forumid'], array(1, 2, 3, 4, 5))">

and our menu is going to be

HTML Code:

PHP 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>


So Finally We Are Done!!

here is our html menu!

HTML Code:

PHP 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>


I Hope U Enjoyed it...