Forum Moderators: not2easy

Message Too Old, No Replies

how to make an unclicked link look clicked?

         

Makaveli2007

4:02 pm on Mar 10, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I didn't know how to describe this better sorry! This is what I'm trying to do:

I have a navigation on top with different categories (vocabulary, grammar, etc.).

And a navigation on the left side of the website which goes into the subcategories: If the person clicks on "vocabulary" on top, there'll be a navigation to the left reading: "vocabulary learning advice", "basic vocabulary", "business vocabulary", ...

For that navigation on the left side I'm simply using :active so if somebody clicks on "business vocabulary" for example he can see on which page he currently is.

My problem, however, is this: The first button in my subnavigation on the left-side says "vocabulary learning advice" and I want this one to look clicked when somebody clicks on "vocabulary" in the top-navigation. However it should not look 'clicked' anymore if the person clicks on another link in the subnavigation.

I'm sorry if this reads a bit complicated, but I don't know how to explain it better..however I just had an idea, maybe I have to make another page so the link structure looks like this: homepage ---> vocabulary introduction page ---> vocabulary menue page.

Is that how you guys would do it or is there an easier way around it?

thanks!

Makaveli2007

4:04 pm on Mar 10, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



ah silly me! I just totally forget about the :active command (pseudo operator?) and give the clicked link a class or an ID as I have to make a single page for each of those categories anyway, right?

SuzyUK

5:14 pm on Mar 10, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



right.. ignore :active

once inside the vocabulary section of your site simply make sure the page either via a class on the body or a wrapper div has a class name (or ID) unique to that section of the site and then target the 'active' link regardless of which menu it's in.. using specificity

e.g.


<body id="whatever" class="vocabulary">..
<div class="nav top">..
<div class="nav side">..

.nav a {all regular nav rules}
.vocabulary .side a {more specific rules for side menu}

or if you are scripting these pages (via php or something) you can put an 'active' classname directly onto the link

[edited by: SuzyUK at 5:15 pm (utc) on Mar. 10, 2008]

Makaveli2007

12:41 am on Mar 11, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I must admit I'm a bit confused now. I read it carefully twice, but am still not sure if I understood it exactly.

However, I just ignored the :active and used a class which I call 'selected' for the left navigation and it works just the way I want to, so I hope it's alright this way.

Another very silly newbie question, though:

Do I make one .html file for each section (and sub-section (and so on)) such as

home.html

vocabularymain.html, businessvocabulary.html, vocabularylearningadvice.html, vocabularywhatever.html,...

grammarmain.html, grammarexercises.html, grammarlearningadvice.html, grammarwhatever.html,...

and put all those files in the same folder on my webhost (such as /publichtml)?

(and then control their layout using one CSS-file to control the design of all those .html pages).

What I'm mostly wondering about is..I've heard about different type of file or folder-structures when it comes to web design...flat folder structures or deep ones, etc.?

thanks for your help!

EDIT: just read up about it - I think the only thing to watch out for is probably if I want to use more than one folder for the html-files (or image files), etc....and the only thing that matters with this in the end is that it's well organized, right? If that's about it no need to go into further detail :-)

[edited by: Makaveli2007 at 12:48 am (utc) on Mar. 11, 2008]