Solved

How do I highlight a menu item (an active element ) of a simple text menu (LHS) ?

Posted on 2007-04-04
5
417 Views
Last Modified: 2008-01-09
I am having a simple text menu in the LHS of the page. It is not a multi level menu. I want the menu item to be highlighted in white color when active and green otherwise. In short all menu items should be in green except the white one which is active (i.e highlighted)

Can you throw some light on this on how this can be achieved ? I am using struts and JSP
0
Comment
Question by:avanworld
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 86

Expert Comment

by:CEHJ
ID: 18851183
0
 
LVL 7

Expert Comment

by:Animasu
ID: 18851543
a{color:green;}
a:hover{color:white;}

Like that?

If you want just a specific <a> element to have the changed (the above dose them all) then use something like

a#element{color:green;}
a:hover#element{color:white;}

or

a.element{color:green;}
a.element:hover{color:white;}

then place it in the <a> tag like so <a class="element" href="#">eh...?</a>

you can find some more information about this here

http://www.pixel2life.com/tutorials/css_stylesheets/rollovers/

I Hope this helps you out!!

- Animasu
0
 

Author Comment

by:avanworld
ID: 18852254
Hi CEHJ & Animasu,

The menu item which is active should be highlighted in white color when we view the page but not on mouse over. I mean it should be continuously highlighted in white while active and other menu items should continue to appear in green. When we select another menu item that should appear in white and the currently selected one should appear as green. This should happen dynamically when user keep on selecting different menu items.

The current solution what you have suggested works on mouseover but please provide a solution for the above. Any help is highly appreciated.
0
 
LVL 86

Expert Comment

by:CEHJ
ID: 18852284
You use a:active for what you want - see the link i posted
0
 
LVL 30

Accepted Solution

by:
Steggs earned 500 total points
ID: 18852812
Hello avanworld,

Give each page an id in the body tag         <body id="sales">

Give each menu item a unique id or class     <li class="sales"><a href="#"></a></li>

Then in your css, you can use logic to say if on the page with id="sales" in the body, then make the menu item with class="sales" active

body#sales li.sales a {background-color:#fff;}


Hope this makes sense
Regards,

Steggs
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
Suggested Courses

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question