how can i make my menu determine which tabs is active?
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?
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?
#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.
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
@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.
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...
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
Code:
#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);
}
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?
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
Code:
#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;
}
Before you post, read our: 
how can i make my menu determine which tabs is active?
