3 replies [Last post]
rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 7 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Not sure if I can explain this... but here goes...
Using a list and css for menu items.
html in page:
<body class="home"> each page has it's own class
<div id="topnav">
<ul>
<li id="home"><a href="xxx.htm">Home</a></li>
<li id="products"><a href="aaa.htm">Products</a></li>
<li id="services"><a href=bbb.htm">Serivces</a></li>
</ul>
</div>
css file has typical stuff for displaying list inline
as well as the info for class..
body.home #topnav li#home a,
body.products #menu li#products a,
body.services #menu li#services a{
color: #000033;
background: #FFCCCC;
cursor: default;
}
These code snippets will hi-lite the menu item of the current page.
What I want to do, is in addition to the hi-lite, is have the link disabled. But, I don't want to have to use something like..
<li id="home"><a href="">Home</a></li>
to achieve this effect.
I want it to be dynamic so I don't have to code each page. I've played around with li id="current" or "active" but that doesn't seem to do the trick.
I'm sure some asp code like request url or server variable would do this, but would like to know if I can do it just using css.
Hope this is clear enough for you...
thanks

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Menu design

You can not use CSS to make the link inactive.

What I normally do is
a) have a different colour (of course)
b) use cursor: default; in my CSS so you do not get a hand cursor.

In other words, if the user hovers over the link the cursor does not change, so the user does not think it is a link.

Hint:
---
I have never understood why some have a different class for each link, unless each link will have different attributes.

If all links will look and behave the same then use one class for them all and just have other class's when the attributes will be different.
---

Regards
Day

The only way to learn is to do it yourself

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 7 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Menu design

Thanks Day...
I am using cursor:default...
Your hint has me confused though... using different classes was the only way I could come up with to change the menu item characteristics dynamically without having to code an "active" or "current" into the li id= portion of the list on each page...are you saying I don't have to do this and can still get the desired effect? If so, I'd be interested in some tips on how to do this.
thanks

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Menu design

Sorry missed something in your code - which was the class for each page and misunderstood.

I had been thinking that the menu was manually maintained on every page, but you are correct and if you are using scripts to reproduce the menu then that would be the best way unless the script looked after it.

Regards
Day

The only way to learn is to do it yourself