The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
|||||||
|
How To Highlight Current Item in a CSS Menu?
 aveon
Join Date: May 2006
Posts: 410
06-24-2007, 10:00 PM
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... 
|
|
#2
06-25-2007, 11:21 PM
|
||||
|
||||
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))
|
|
#5
01-10-2008, 10:46 PM
|
|||
|
|||
|
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
|
 |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
|
|
All times are GMT. The time now is 06:02 AM.