homepage Welcome to WebmasterWorld Guest from 54.198.42.213
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Side Navigation - Current Page / thisPage
Apply Style to Current page with 2 <ul>
swaggerking




msg:3281099
 11:03 pm on Mar 13, 2007 (gmt 0)

I have two navigations on my pages and all using <ul><li>.

1) Global which is in my top header (horzitonal) = #tabs{ }
2) sub/side navigation (vertical) = #sidenav{ }

I've used bodyID to identify current page within global/ top header navigation <body id="travel">

Now for my problem:
"Travel" has a few sub-categories: Air, Car, Hotel, Cruise, etc. I would l like to apply a style to sub-category when it's my current page when I'm under "Travel".

I'm just not sure how to show and the highlight the current page within my sub-categories under "Travel" which are displayed in my side navigation.

Basically "Travel" is highlighted in my Header and the sub-category page that I'm want to be highlighted as well.

 

SuzyUK




msg:3281531
 11:01 am on Mar 14, 2007 (gmt 0)

Welcome to WebmasterWorld! swaggerking

I think this recent post [webmasterworld.com] might be what you're looking for

Suzy

PSWorx




msg:3281678
 2:22 pm on Mar 14, 2007 (gmt 0)

Are your pages static html or dynamic php/perl/asp/aspx/cf (cold fusion)?

If there static then all you need to do is create a definition in css for your subnav which has the selected effects you desire then in the <li> or <a> depending on how you want it apply the definition id="" or class="" according to how your definition is set in the css, which would be #styledef or .styledef with the {} and the styles inside.

You will need to add the id or class tothe link you want selected on each page you want it selected for the selected formatting to show up, if your site is dynamic in the sense of using server side scripting like php/perl/asp and your menus are generated from a database or flat file array then you may want to write a function which identifies the current page i.e. via a get request (in this case current page and sub page) and have it auto inject the required id or class to the css definition) and that should do the trick.

Sorry for lack of code im just verbalising what to do here, if you need an example show me some html and ill show u how i think it should look.

swaggerking




msg:3281917
 5:20 pm on Mar 14, 2007 (gmt 0)

Thanks.
I'm providing a link to what I'm trying to do. And yes, I will be using ASP and SSI.

<snip>
I've tried stripping the html down to the essentials for this example. Since this site is cookied dependent upon zip code you may need to insert our local zip: ##

I will be using SSI for the side navigation. I don't want to manually put it in for each sub-page under travel (air,hotel,car,cruise). I need help finding/developing a function that will call and ID "thispage" dependent upon which sub-page I'm on.

[edited by: SuzyUK at 12:04 pm (utc) on Mar. 15, 2007]
[edit reason] No site specifics, thanks. See TOS #13 [WebmasterWorld.com] [/edit]

PSWorx




msg:3281976
 6:22 pm on Mar 14, 2007 (gmt 0)

Create an associative array containing the links and ref name to the links for example (php syntax)

$_SERVER['sidebar_links'] = array (

'air' => 'Air',
'hotel' => 'Hotel',
'car' => 'Car',
'cruise' => 'Cruise'

)

Ive used names for the keys but u may use numbers.


In each of the asp pages which load the menu create a variable named like so at the very top of the page before any other of YOUR code (remember im in php code here not asp!):

$_SERVER['selected'] = '';


Now say we are in car.asp, set the selected variable to car like so:

$_SERVER['selected'] = 'car';

Now create a function what will load in the array of links, loop through the array and probe for the existance of $_SERVER['sidebar_links][$_SERVER['selected']], which is just looking for the key in this case car, which has the value Car, upon finding that add the code to the link and your done.

When i say add the code to you link, the function will also be creating the links into the html format you require with the option to insert the css id or class attribute on the link that is the selected page.

Very bloated example uness you need the side menu to be dynamic and are expecting to have a number of pages in there, using this method all menus will be updated automatically and if used correctly should select the link if thats the page being loaded.

Ill write an example in php so you can see the concept.

PSWorx




msg:3282024
 7:13 pm on Mar 14, 2007 (gmt 0)

In this example i will use the key value to build the links aswell so keep the keys as the are which should be the same as your asp page names without the extension i.e. car not car.asp.

//Array of links, lets store this in another file, make sure the array is accessable to your
//function, in this case i make it global by making it a _SERVER var, not sure on this for asp!
$_SERVER['sidebar_links'] = array (
'air' => 'Air',
'hotel' => 'Hotel',
'car' => 'Car',
'cruise' => 'Cruise');

//In the asp file set the following variable to that of the actual files name without the
//extension, this is used to tell the script which link to highlight, this is a global
//make sure you do the same in asp
$_SERVER['selected'] = 'car';

//Function to set the link select, probably store this in a functions file of some sort
function selecta_link($array){
$_SERVER['sidelinks']=NULL; // Initialize this variable as we will be adding to it more than once

//Foreach to split the keys and values, we use the key in the file name
//and also to match with the selected variable to apply css to the selected link
foreach( $array as $key => $value){

//If statement to do the checking process, this portion will put the id="" or class=""
//into a var $_SERVER['selected'] which we use during the link building process next
//Were essentially trying to see if the key/value exists here
if( $key === $_SERVER['selected'] ){
$_SERVER['selectedlink']=' class="thispage"';
}else{
$_SERVER['selectedlink']=NULL;
} //End if

$_SERVER['sidelinks'] .= '<li'.$_SERVER['selectedlink'].'><a href="'.$key.'.asp">'.$value.'</a></li>'."\n";

} //End for

return $_SERVER['sidelinks'];

} //End function

//Prints the menu - make sure to have hte <ul></ul> tags around this
echo selecta_link($_SERVER['sidebar_links']);

The concept is there and should work in php you just need to convert it into asp.

PSWorx




msg:3282635
 12:14 pm on Mar 15, 2007 (gmt 0)

Its not good posting on these things when youve just woke up.

[edited by: PSWorx at 12:16 pm (utc) on Mar. 15, 2007]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved