How To Highlight Current Item in a CSS Menu?

[aveon]

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

<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 define('THIS_SCRIPT', 'xxx'); the definition is located where the xxx is... and at this point the if conditional going to be

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

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

<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

<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 <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 <if condition="THIS_SCRIPT=='index'"> and our menu going to be like

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


<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 <li><a href="forumdisplay.php?f=1">Announcements</a></li>.. So lets begin applying our conditional on our link...

we will be using <if condition="in_array($foruminfo['forumid'], array(1, 2, 3, 4, 5))">and our menu is going to be

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


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

aveon...

[Alfa1]

To save some of you from carpal tunnel syndrome, here is a range of forumID's you can copy paste:

array(1 , 2, 3, 4 ,5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190))

[ReQueM]

thank u aveon :up:

[KoC]

Very important post. Thank you...

[blastup]

that is freaken awesome thanks for this useful post..i used it and works great on my forum.. great tutorial .. a recommendation to all the people use the <else /> condition. if you say like you want the rest of the forum to display something use the <else />.so you do not have to define using individual ids .. it is just everything else.. alright peace out - if you need help let me know i own a webmasters forum at http://millionwebmasters.com

[unleash]

Thanks alot, this was very very helpful, i was looking for this

[career]

Thanks Aveon!

[NetRover]

Awesome, thank you so much for this advice. I've manage nice active tabbed forums with subforums.

good stuff.