HTML CSS a:current

[brummie]

Evening, help needed desperately as ive exhausted my skill set

I am creating a basic menu using <ul> <li> but i want to use a.current as a class to highlight the selected page i'm on.

Now - ive got it up and running for a absolute url but id like to use only a part url so anything within a directory and sub directories are highlighted too.

Anyone know if this is possible? I cant find any information as i am not quite even sure what im looking for. Some sort of wildcard for the url??

TIA

 

[touch]

It will probably be something like:
.current ul li{ **highlighting code** }
So that you are selecting all of the sub items contained within the .current item. Depends on how your page is structured though.
Is it a live site that we can look at?

 

[kaku]

I can't work out what you're trying to do from your description. Maybe draw a picture to explain it?

 

[Fallen god]

What are you using for the website e.g if its a PHP framework then it should be much easier to figure out what page your on.

 

[brummie]

Yeah PHP

<{php}>  
$pageurl = getenv("REQUEST_URI"); 
 $GLOBALS['Tpl']->assign( 'pageurl', $pageurl); 
 <{/php}>

    <div id="nav" class="<{$pageurl}>">
      <ul>
        <li class="<{if $pageurl == "/"}>current<{/if}>"><a href="<{AppUrl }>">Home</a></li>

The problem lies if i select a page that is not an exact url. The link in the nav bar is not highlighted.

ie /news/index.php is highlighted but /news/page1.php isnt.
Id like everything in directory /news/ to be highlight in the navigation menu.


Make sense?

 

[brummie]

It will probably be something like:
.current ul li{ **highlighting code** }
So that you are selecting all of the sub items contained within the .current item. Depends on how your page is structured though.
Is it a live site that we can look at?

Sorry not a live site yet its not actually working yet

 

[KhalPanda]

You'll want to be doing something like this:

<div id="nav" class="<{$pageurl}>">
<ul>
<li class="<{if $pageurl == "/"}>current<{/if}>"><a href="<{AppUrl }>">Home</a></li>
<li class="<{if substr($pageurl, 0, 5) == "/news"}>current<{/if}>"><a href="<{AppUrl }>">News</a></li>

This just compares the first part of your URL (that containts '/news') and checks that it matches the first section.

So with my example, all of these URL's would apply the 'current' class to your li tag:

/news
/news/woohoo
/news/news-title
/news/woop/herp/derp

So as long as your URL schema is structured so that anything related to news is under /news, it should work.

 

[brummie]

Cheers mate ill give it a go this evening.

Cant wait ! thx again

 

[kaku]

You could use something like:

$uri = explode('/', $_SERVER['REQUEST_URI']);

then $uri becomes an array of all of the URI components.
It's an easier to use alternative to checking substr all the time.

 

[inogen]

aye, that's the way.

You could also create a function that writes the the list items / anchors / class

Then call the function with call_function($uri, $linkText); Put the function in an include and neatness abounds.