• Locked
5 replies [Last post]
Tue, 2010-08-17 17:15
cisguy
cisguy's picture
User offline. Last seen 1 year 37 weeks ago. Offline
newbie
Timezone: GMT-5
Joined: 2010-08-17
Posts: 8
Points: 10

Hello All,

I am trying to create a menu using CSS as a list, but I need to apply a different color to the selected menu heading and all the items within it.I am not sure how to do that.Any help will be greatly appreciated.

Top
Tags:
Tue, 2010-08-17 22:40
#1
Tony
Tony's picture
User is online Online
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2003-03-12
Posts: 3809
Points: 1244

Hi cisguy, We really need to

Hi cisguy,
We really need to know more about the menu you are using and if you are using any JavaScript.

It might be as simple as 

li:hover * {color:red;}

Your question may have already been answered, search and read before you ask.

Top
Wed, 2010-08-18 14:55
#2
cisguy
cisguy's picture
User offline. Last seen 1 year 37 weeks ago. Offline
newbie
Timezone: GMT-5
Joined: 2010-08-17
Posts: 8
Points: 10

Thanks for the reply. I am

Thanks for the reply. I am not using any JavaScript just simple list based menu.I can assign li a class initially so that it is selected.However, I don't understand how will the selection change when some other menu heading is selected.Is it possible to do this using plain CSS?
Also,I need to hide the menu items within the heading by default and display them only on mouse-hover.

My HTML is as follows:

 <div class="menu">
 <ul>
     <li class="selected"><a href="http://nbc.com/">Home</a>
         <ul> 
              <li><a href="http://www.google.com">google</a></li>
               <li><a href="http://www.yahoo.com">yahoo</a></li>
        </ul>     
     </li>
 <li><a href="http://abc.com/">About</a>
         <ul> 
              <li><a href="http://www.msn.com">google</a></li>
               <li><a href="http://www.bing.com">yahoo</a></li>
        </ul>     
     </li>
 
 
  </ul>
</div>

Here is my CSS:

 div.menu {
	width: 750px;
	height: 60px;
	margin: 0 auto;
	 margin-left:334px;
 
}
 
div.menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-style:solid;
	border-width:0.5px;
}
 
div.menu li {
	display: block;
	float: left;
	width: 148px;
	height: 60px;
	padding: 0 0 0 2px;
	background: url(img02.gif) repeat;
	z-index: 1;
}
 
 
div.menu a {
	display: block;
	width: 108px;
	height: 36px;
	padding: 20px 20px 0 20px;
	background: none;
	letter-spacing: -1px;
	font: normal 1.6em Georgia, "Times New Roman", Times, serif;
	/*color: #E1E9E2;*/
	color: #000000;
}
 
div.menu a:hover {
	border-bottom: 4px solid #5A7C50;
	text-decoration: none;
	color: #FFFFFF;
}
 
div.menu .active a {
	background: #E1E9E2;
	border-bottom: 4px solid #E1E9E2;
	text-decoration: none;
	color: #749865;
}
 
 
 
div.menu .selected a
{
    background-color: red;
}
 
 a:link, a:visited
 { 
    color: #fff; 
}
 
 

Top
Wed, 2010-08-18 14:57
#3
cisguy
cisguy's picture
User offline. Last seen 1 year 37 weeks ago. Offline
newbie
Timezone: GMT-5
Joined: 2010-08-17
Posts: 8
Points: 10

Okay, so I just need to

Okay, so I just need to change the currently selected "li" to the next "li" i.e. I need to change the selected class when the particular "li" is clicked.How can I do that?

Top
Wed, 2010-08-18 23:14
#4
Tony
Tony's picture
User is online Online
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2003-03-12
Posts: 3809
Points: 1244

You will probably need some

You will probably need some JavaScript to change the class names on the fly.
Or use the body class method where each page has a unique id in the body tag and each menu item has a unique class.
Then instead of using selected class use something like:

#contact li.contact a{color:red;}

I am assuming that the links in your menu go to other pages on your site not as in your example above.

Your question may have already been answered, search and read before you ask.

Top
Thu, 2010-08-19 17:51
#5
cisguy
cisguy's picture
User offline. Last seen 1 year 37 weeks ago. Offline
newbie
Timezone: GMT-5
Joined: 2010-08-17
Posts: 8
Points: 10

Thanks for the reply.I will

Thanks for the reply.I will look into it and get back in case of further queries.

Top
  • Locked