...

View Full Version : how can i make my menu determine which tabs is active?



LJackson
08-25-2009, 01:26 PM
Hi All,

i am after some advice please,

i have created a menu which is working, however the only part i am unsure of is when clicking on one of the tabs and the new page is displayed how do i tell the tab which tab is current, therefor change colour :)

each of my php pages sets the value of a session e.g
entertainment => $_SESSION['page'] = 'entertainment';
computing =>$_SESSION['page'] = 'computing';
and so on

so would i use this session value along with if statments to determin which tab is current?

e.g


if($_SESSION['page'] == "entertainment"){
<li id="current">
<a href="entertainment.php">Entertainment</a></li>
}
else{
<li><a href="entertainment.php">Entertainment</a></li>
}

and perform that sort of check for each tab to see if it matches the session value? or is there a better way?

here is my menu code

<div id="menu">
<ul>
<li id="current"><a href="index.php">Home</a></li>
<li><a href="entertainment.php">Entertainment</a></li>
<li><a href="computing.php">Computing</a></li>
<li><a href="electronics.php">Electonics</a></li>
<li><a href="clothing.php">Clothing</a></li>
<li><a href="health.php">Health &amp; Beauty</a></li>
<li><a href="misc.php">Miscellaneous</a></li>
</ul>
<ul class="right">
<li><a href="#">By Item</a></li>
<li><a href="#">By Store</a></li>
<li><a href="#">By Brand</a></li>
</ul>
</div>

also i would like to disable the tabs in the ul class right unless the $_SESSION['page'] equals entertainment,computing or electronics is this possible?

thanks guys
Luke

abduraooft
08-25-2009, 01:38 PM
[...]perform that sort of check for each tab to see if it matches the session value? or is there a better way?

I'd do it like

<div id="menu" class="<?php echo $_SESSION['page'];?>">
<ul>
<li class="home"><a href="index.php">Home</a></li>
<li class="entertainment"><a href="entertainment.php">Entertainment</a></li>
<li class="computing"><a href="computing.php">Computing</a></li>
..............
</ul>
</div>


.home li.home, .entertainment li.entertainment, .computing li.computing{
/* set active style here*/
}

LJackson
08-25-2009, 01:54 PM
hi mate, i have tried the above but i am unable to get it working :(

here is my entire code, i've probably messed up somewhere :(


<?php
session_start();
$_SESSION['page'] = "entertainment";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#menu {
float:left;
width:940px;;
background:#DAE0D2 url(images/menu/bg.gif) repeat-x bottom;
font-size:13px;
line-height:normal;
}
#menu ul {
margin:0;
padding:15px 5px 0;
list-style:none;
float:left;
width:708px;
}
#menu .right {
float:right;
width:208px;
}
#menu li {
float:left;
background:url(images/menu/norm_left_on.gif) no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#menu li:hover {
background-image:url(images/menu/norm_left2.gif);
}
#menu a {
float:left;
display:block;
background:url(images/menu/norm_right_on.gif) no-repeat right top;
padding:5px 10px 4px 1px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#menu a {float:none;background-image:url(images/menu/norm_right_on.gif);}
/* End IE5-Mac hack */
#menu a:hover {
color:#333;background-image:url(images/menu/norm_right2.gif);
}
#menu #current {
background-image:url(images/menu/norm_left2.gif);
}

#menu #current a {
background-image:url(images/menu/norm_right2.gif);
color:#333;
padding-bottom:5px;
}
.home li.home, .entertainment li.entertainment, .computing li.computing, .electronics li.electronics, .clothing li.clothing, health li.health, misc li.misc{
background-image:url(images/menu/norm_right2.gif);
padding-bottom:5px;
}

</style>
</head>

<body>
<?php print $_SESSION['page'];?>
<div id="menu" class="<?php echo $_SESSION['page'];?>">
<ul>
<li class="home"><a href="index.php">Home</a></li>
<li class="entertainment"><a href="entertainment.php">Entertainment</a></li>
<li class="computing"><a href="computing.php">Computing</a></li>
<li class="electronics"><a href="electronics.php">Electonics</a></li>
<li class="clothing"><a href="clothing.php">Clothing</a></li>
<li class="health"><a href="health.php">Health &amp; Beauty</a></li>
<li class="misc"><a href="misc.php">Miscellaneous</a></li>
</ul>
</div>
</body>
</html>

any ideas mate

thanks
Luke

abduraooft
08-25-2009, 01:58 PM
Might be a specificity issue, try

#menu.home li.home a, #menu.entertainment li.entertainment a, #menu.computing li.computing a, #menu.electronics li.electronics a, #menu.clothing li.clothing a, #menu.health li.health a, #menu.misc li.misc a{
background-image:url(images/menu/norm_right2.gif);
padding-bottom:5px;
} instead.

LJackson
08-25-2009, 02:11 PM
ah ha thats doing something now :)

but because im using the sliding doors method only the right hand side highlights any idea how i can get the left hand side to highlight also?

here (http://www.kernow-connect.com/Price%20Comparison/menu.php)is the menu so you can see what i mean

cheers
Luke

abduraooft
08-25-2009, 02:16 PM
Um... you might need to repeat the same for your all <li> tags, like

#menu.home li.home, #menu.entertainment li.entertainment /* and so on */{
background-image:url(images/menu/norm_left2.gif);
}
If you are getting tired of repeating the same CSS selectors, then read http://www.codingforums.com/showpost.php?p=846390&postcount=4 too :)

funnymoney
08-25-2009, 02:23 PM
you can also try something like this


<?php

if (!empty($_GET)) {
$key = array_keys($_GET);
$key = $key[0];
}
else {
$key = "home";
}

$menu =
<<<EOF
<style type="text/css">


li#active a {
color: #bb0000;
}
</style>
<div id="menu">
<ul>
<li class="home" %style%><a href="?home">Home</a></li>
<li class="entertainment" %style%><a href="?entertainment">Entertainment</a></li>
<li class="computing" %style%><a href="?computing">Computing</a></li>
<li class="electronics" %style%><a href="?electronics">Electonics</a></li>
<li class="clothing" %style%><a href="?clothing">Clothing</a></li>
<li class="health" %style%><a href="?health">Health &amp; Beauty</a></li>
<li class="misc" %style%><a href="?misc">Miscellaneous</a></li>
</ul>
</div>
EOF;
$match = preg_match ("/\"$key\" \%style\%/", $menu, $matches);

$active = "\"$key\" id=\"active\"";

$patterns = array("/{$matches[0]}/", "/%style%/");
$replace = array($active, "");

$menu = preg_replace($patterns, $replace, $menu);

print $menu;

?>

LJackson
08-25-2009, 02:34 PM
thanks abduraooft :)

@funnymoney thanks for your reply mate, but as i have it working now i dont want to start changing the method :) but its nice to see there are different ways of doing things...

does anyone know how i can disable certain tabs if the session <> entertainment,computing etc... i would like to disable the tabs on the right hand side if possible.

thank you
Luke

funnymoney
08-25-2009, 04:29 PM
@funnymoney thanks for your reply mate, but as i have it working now i dont want to start changing the method :)

you don't need to change method, just instead of $_GET use $_SESSION

LJackson
08-26-2009, 01:10 AM
ah right lol looks a lot more confusing :D

im still unable to disable certain tabs is this possible?

thanks
Luke

abduraooft
08-26-2009, 07:00 AM
im still unable to disable certain tabs is this possible? What do you mean by "disable tabs" ? Make them invisible?

LJackson
08-26-2009, 02:22 PM
just not clickable maybe? :), i only want them to be used if the current page is entertainment,computing etc... so if the page is home for example then the 3 tabs would not be able to be clicked on and may have a different colour image so that its clear they are disabled.

ultimatly what i want to do is when on one of the 6 main category pages have 2 tabs highlighted eg, the current page and the by item tabs, then i want the by item tab to change if the by store/by brand is selected then that one would be highlighted as well as the current category tab.

kinda like having two menus i suppose the left one and the right one each one having a highlighted tab if the page is one of the category pages,

sorry if this doesnt make sence :)
its a bit of a brain teaser...

thanks mate
Luke

LJackson
08-26-2009, 02:39 PM
ok im kinda getting somewhere with the multi select thingy :)

i have created a new session (view) and have changed my menu like so

<div id="menu" class="<?php echo $_SESSION['page'];?>">
<ul>
<li class="home<?php if($_SESSION['page']=='home') { echo ' selected'; } ?>"><a href="index.php">Home</a></li>
<li class="entertainment"><a href="entertainment.php">Entertainment</a></li>
<li class="computing"><a href="computing.php">Computing</a></li>
<li class="electronics"><a href="electronics.php">Electonics</a></li>
<li class="clothing"><a href="clothing.php">Clothing</a></li>
<li class="health"><a href="health.php">Health &amp; Beauty</a></li>
<li class="misc"><a href="misc.php">Miscellaneous</a></li>
</ul>
</div>
<div id="menu" class="<?php echo $_SESSION['view'];?>">
<ul class="right">
<li class="item"><a href="#">By Item</a></li>
<li class="store"><a href="stores.php">By Store</a></li>
<li class="brand"><a href="brand.php">By Brand</a></li>
</ul>
</div>


so effectivly i have two menus? the current problem is that because both divs are classed as menu they are both 700+ pixels wide and therefor the right hand side menu is underneath the other one?

do i need to create a new set of css for the new menu or is there another way?

here is the new css for the right tabs

#menu.item li.item a, #menu.store li.store a, #menu.brand li.brand a{
background-image:url(images/menu/norm_right2.gif);
}

#menu.item li.item, #menu.store li.store, #menu.brand li.brand{
background-image:url(images/menu/norm_left2.gif);
}

thanks
Luke

LJackson
08-26-2009, 03:00 PM
right i think i have solved both issues(think :) )

i now have a menu which selects two tabs and looks like it did before, and from what i understand of this i can get the tabs to look disabled by changing the value of the view session to none for example and the create a class for none, this none can be applied to all pages except the main category pages.

i had to change all my css to allow for the "new" menu.
for example where my css said #menu da da da i have now had to change it so that it says #menu, #menu_r da da da but it seems to be working. the only problem that i can think of that i may runinto is when i remove the <a> tag from a tab the background images may screw up?

but im getting there, i think lol
cheers
Luke

LJackson
08-26-2009, 03:53 PM
ok 1 very small (i hope) problem, the menu for some reason is adding alot of extra space to the right of my page, causing a scroll bar with no content?

any one know of any reason why this should be?

its defo the menu thats causing this to happen as it wasnt there before :)

here is the menu css

#menu {
float:left;
width:700px;
background:#DAE0D2 url(../images/menu/bg.gif) repeat-x bottom;
font-size:13px;
line-height:normal;
}
#menu_r {
float:right;
width:240px;
background:#DAE0D2 url(../images/menu/bg.gif) repeat-x bottom;
font-size:13px;
line-height:normal;
}
#menu ul, #menu_r ul {
margin:0;
padding:15px 5px 0;
list-style:none;
float:left;
width:708px;
}
#menu .right {
float:right;
width:220px;
}
#menu li, #menu_r li {
float:left;
background:url(../images/menu/norm_left_on.gif) no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#menu li:hover, #menu_r li:hover {
background-image:url(../images/menu/norm_left2.gif);
}
#menu a, #menu_r a {
float:left;
display:block;
background:url(../images/menu/norm_right_on.gif) no-repeat right top;
padding:5px 10px 4px 1px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#menu a, #menu_r a {float:none;background-image:url(../images/menu/norm_right_on.gif);}
/* End IE5-Mac hack */
#menu a:hover, #menu_r a:hover {
color:#333;background-image:url(../images/menu/norm_right2.gif);
}
#menu #current, #menu_r #current {
background-image:url(../images/menu/norm_left2.gif);
}

#menu #current a, #menu_r #current a {
background-image:url(../images/menu/norm_right2.gif);
color:#333;
padding-bottom:5px;
}
#menu.home li.home a, #menu.entertainment li.entertainment a, #menu.computing li.computing a, #menu.electronics li.electronics a, #menu.clothing li.clothing a, #menu.health li.health a, #menu.misc li.misc a{
background-image:url(../images/menu/norm_right2.gif);
padding-bottom:5px;
}

#menu.home li.home, #menu.entertainment li.entertainment, #menu.computing li.computing, #menu.electronics li.electronics, #menu.clothing li.clothing, #menu.health li.health, #menu.misc li.misc{
background-image:url(../images/menu/norm_left2.gif);
}
#menu_r.byitem li.byitem a, #menu_r.store li.store a, #menu_r.brand li.brand a{
background-image:url(../images/menu/norm_right2.gif);
}

#menu_r.byitem li.byitem, #menu_r.store li.store, #menu_r.brand li.brand{
background-image:url(../images/menu/norm_left2.gif);
}
.menucontainer{
float:left;
width:940px;
}

and html

<div class="menucontainer">
<div id="menu" class="<?php echo $_SESSION['page'];?>">
<ul>
<li class="home<?php if($_SESSION['page']=='home') { echo ' selected'; } ?>"><a href="index.php">Home</a></li>
<li class="entertainment"><a href="entertainment.php">Entertainment</a></li>
<li class="computing"><a href="computing.php">Computing</a></li>
<li class="electronics"><a href="electronics.php">Electonics</a></li>
<li class="clothing"><a href="clothing.php">Clothing</a></li>
<li class="health"><a href="health.php">Health &amp; Beauty</a></li>
<li class="misc"><a href="misc.php">Miscellaneous</a></li>
</ul>
</div>
<div id="menu_r" class="<?php echo $_SESSION['view'];?>">
<ul class="right">
<li class="item"><a href="#">By Item</a></li>
<li class="store"><a href="stores.php">By Store</a></li>
<li class="brand"><a href="brand.php">By Brand</a></li>
</ul>
</div>
</div>

here (http://www.kernow-connect.com/Price%20Comparison/entertainment.php)is a page to show you what i mean.

any ideas what might be causing this? (the page validates)
thanks
Luke

LJackson
08-27-2009, 12:50 AM
still cant figure this out! any ideas as to what might be causing it?

thanks
Luke

LJackson
08-27-2009, 01:03 AM
ok i have sorted it thanks,

had to add a new class for the menu_r ul which was causing the problems :)

thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum