Menu - Fade non-Active Items

Pamela1991 · June 9, 2012, 6:29pm

Hello all,

There is some code that has been driving me up the wall for the past 8 hours! I’m really trying hard to figure it out, but I can’t quite put my finger on the solution. I have fixed the sub-menu as I would like it, but there are two issues I am having with the menu itself:

When I hover over a menu item, I’m trying to get the other menu items to fade to 50% opacity (just like in the sub-menu).
When I’m hovering over any of the sub-menu items, and I then hover over its parent (the menu item), the original parent image shows for an instant (instead of the hovered image remaining the same)!

I have really confused myself on this one, and I’m currently lost in a maze of ul’s and li’s! Does anyone have any idea what I’m doing wrong here?

Here’s the fiddle.

Or if you prefer, the CSS:

*
{
	margin: 0;
	padding: 0;
}

html,
body
{
	background: #000;
	cursor: auto;
}

body
{
	font: 13px/1.231 arial,helvetica,clean,sans-serif
}

#page
{
	overflow: hidden;
	width:1000px;
	height:840px;
	background: #fff;
	margin: 0;
	padding: 0;
}
#page span{
display:none
}

.widget
{
	overflow: hidden;
	width:290px;
	height:316px;
	margin: 82px 0px 0px 60px;
	padding: 0;
	float: left;
}

.scroll-pane
{
	width: 360px;
	height: 400px;
	overflow: auto;
	margin: 61px 95px 0px 0px;
	padding: 0;
	float: right;
}

h1
{
	font-size: 116%;
	color: #fff;
	background: #50506d;
	margin: 0 0 1em;
	padding:4px 8px 5px;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

h2
{
	clear: left;
	font-size: 100%;
	color: #fff;
	background: #000;
	padding:4px 8px 5px;
	margin: 0;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

h2 span.setting-type
{
	font-weight: normal;
}

p
{
	font-size: 93%;
	margin: 1em 0;
}

a
{
	cursor:pointer;
}

#menu {
    margin: 45px -340px 0px 0px;
    float:right;
    padding: 0;
    width:100%;
    background: transparent;
}

/*#menu > ul {
	opacity: 0.5;
}*/

#menu a {
	display: block;
	width: 116px;
	height: 128px;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}

/*#menu:hover a {
	opacity: .5;
}*/
#menu:hover ul:hover a {
	opacity: .5;
}
#menu:hover ul:hover a:hover {
	opacity: 1;
}

#menu a:hover, #menu .sub-menu a:hover {
    background: black;
	color: #fff;
	text-align: center;
	border-color: red;
}

#menu , #menu ul {list-style: none;}
#menu li {
    float: left;
    position: relative;
    text-align: center;
    margin-left:10px;
}

#menu .sub-menu {
    position: absolute;
    top: 120px;
    left: -9999em;
    padding: 10px;
    z-index: 90;
}

#menu .sub-menu li {
    text-align: left;
    margin-bottom:6px;

}

#menu li:hover .sub-menu {
    left: -47px;
    /*border: 1px solid #ececec;*/
}

#menu .sub-menu a {
    font-family: Impact, Helvetica, sans-serif;
    display: block;
    font-size: 24px;
    padding: 10px;
    height: auto;
    width: 150px;
    border: 1px solid #ececec;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    text-decoration: none;
    line-height: normal;
	background: black !important;
	color: #fff;
	text-align: center;
}

#menu .red, #menu .red:hover a {
	background:url('http://lh5.ggpht.com/-0msPBzQIjAw/S0jRxgi201I/AAAAAAAAAes/Oaa0dPQSI8s/s128/RedStripes.jpg');
}
#menu .red a {
	background:url('http://2.bp.blogspot.com/-akO3TOU8fuE/TnA15HfGHZI/AAAAAAAAB6M/tG2g7C1nsRs/s200/imagesCA91Q61X.jpg');
}
#menu .red a:hover, #menu .red a:focus {
	background:url('http://2.bp.blogspot.com/-akO3TOU8fuE/TnA15HfGHZI/AAAAAAAAB6M/tG2g7C1nsRs/s200/imagesCA91Q61X.jpg');
	opacity: 0;
}

#menu .white, #menu .white:hover a {
	background:url('http://img.tfd.com/wn/47/64422-area.jpg');
}
#menu .white a {
	background:url('http://membership.uhms.org/resource/resmgr/images/la_foto.jpg');
}
#menu .white a:hover, #menu .white a:focus {
	background:url('http://membership.uhms.org/resource/resmgr/images/la_foto.jpg');
	opacity: 0;
}

#menu .blue, #menu .blue:hover a {
	background:url('http://static.wix.com/media/ead4a9_4c5478dc902932c7740f200ec157f18d.png_128');
}
#menu .blue a {
	background:url('http://atastypixel.com/blog/wp-content/uploads/2009/02/200902081924.jpg');
	/*text-indent: -9999px;
	-webkit-transition: opacity .6s ease-in-out, background 0s 999s;
	-moz-transition: opacity .6s ease-in-out, background 0s 999s;
	-o-transition: opacity .6s ease-in-out, background 0s 999s;
	transition: opacity .6s ease-in-out, background 0s 999s;*/
}
#menu .blue a:hover, #menu .blue a:focus {
	background:url('http://atastypixel.com/blog/wp-content/uploads/2009/02/200902081924.jpg');
	/*background-position: 0 0;*/
	opacity: 0;
}

#menu .stars, #menu .stars:hover a {
	background:url('http://www.clipartpal.com/_thumbs/frank3_008658_tns.png');
}
#menu .stars a {
	background:url('http://1.bp.blogspot.com/_gJ4222TxWAs/SqjtlOKWkQI/AAAAAAAAATc/6bNr4s_jeac/s320/vote.jpg');
}
#menu .stars a:hover, #menu .stars a:focus {
	background:url('http://1.bp.blogspot.com/_gJ4222TxWAs/SqjtlOKWkQI/AAAAAAAAATc/6bNr4s_jeac/s320/vote.jpg');
	opacity: 0;
}

#menu .stripes, #menu .stripes:hover a {
	background:url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}
#menu .stripes a {
	background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
}
#menu .stripes a:hover, #menu .stripes a:focus {
	background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
	opacity: 0;
}

…and the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	
		<meta http-equiv="content-type" content="text/html;charset=UTF-8">
		<meta http-equiv="content-language" content="en-US">
		<meta name="language" content="english">
		<meta name="author" content="Pamela">
		<link type="text/css" href="style/style.css" rel="stylesheet" media="all">

		<title>Red, White & Blue</title>
		<meta name="description" content="Description of Red, White & Blue">
		<meta name="keywords" content="red, white, blue, stars, stripes">

	</head>
	<body>
	<center>
	<div id="page">
		<ul id="menu">
			<li class="red"><a href="red.php"><span>Red</span></a></li>
			<li class="white"><a href="white.php"><span>White</span></a>
				<ul class="sub-menu">
				<li><a href="alaska.php">Alaska</a></li>
				<li><a href="ri.php">Rhode Island</a></li>
				<li><a href="fl.php">Florida</a></li>
				<li><a href="dc.php">District of Columbia Downtown</a></li>
				<li><a href="nyc.php">New York City</a></li>
				</ul>
			</li>
			<li class="blue"><a href="blue.php"><span>Blue</span></a>
				<ul class="sub-menu">
				<li><a href="one.php">One</a></li>
				<li><a href="two.php">Two</a></li>
				<li><a href="three.php">Three</a></li>
				<li><a href="four.php">Four</a></li>
				</ul>
			</li>
			<li class="stars"><a href="stars.php"><span>Stars</span></a></li>
			<li class="stripes"><a href="stripes.php"><span>Stripes</span></a></li>
		</ul>

		<div class="widget">
			<table>
				<tbody>
					<tr>
						<td>One
						</td>
						<td>Two
						</td>
						<td>Three
						</td>
					</tr>
					
					<tr>
						<td>Apples
						</td>
						<td>Oranges
						</td>
						<td>Pears
						</td>
					</tr>
					
					<tr>
						<td>Square
						</td>
						<td>Circle
						</td>
						<td>Triangle
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="scroll-pane">
			<h2>Hello World!</h2>
			<table>
				<tbody>
					<tr>
						<td>First
						</td>
						<td>Second
						</td>
						<td>Third
						</td>
						<td>Fourth
						</td>
					</tr>
					
					<tr>
						<td>How
						</td>
						<td>Are
						</td>
						<td>You
						</td>
						<td>Doing?
						</td>
					</tr>
					
					<tr>
						<td>Here's
						</td>
						<td>a
						</td>
						<td>test
						</td>
						<td>table
						</td>
					</tr>
				</tbody>			
			</table>
		</div>
	</div>

	</center>
	</body>
</html>

Thanks!

Pam

chris_upjohn · June 10, 2012, 3:38am

As far as I am aware you can only achieve this with JavaScript as CSS provides no way to determine which element your currently interacting with where as JavaScript allows us to do that.

Pamela1991 · June 10, 2012, 5:23am

Hi Chris. Thanks for the response. I’m a bit confused. Does that mean that I should be applying the CSS to the ul for the menu, but not to the ul for the sub-menu or vice versa? If so, could I use PHP rather than JavaScript (I say this because I try to not use JavaScript unless I really, really have to in case someone has JavaScript turned off or something [I’m not sure if this is an old-fashioned mentality?])?

Also, would this solution also fix the second issue I mentioned “2) When I’m hovering over any of the sub-menu items, and I then hover over its parent (the menu item), the original parent image shows for an instant (instead of the hovered image remaining the same)”?

Thanks again!

markbrown4 · June 10, 2012, 6:09am

Hi Pamela,

I’ve fixed up the blue menu item in the jsfiddle.
The problem is just that your transition is firing when you hover over the a tags, you want it to fire when you hover over the li tags.


#menu [B].blue:hover > a[/B], #menu .blue a:focus {
    background:url('http://atastypixel.com/blog/wp-content/uploads/2009/02/200902081924.jpg');
    /*background-position: 0 0;*/
    opacity: 0;
}

This means that when you mouse over the a element or the sub menu elements the hover is still active on the parent.

Pamela1991 · June 10, 2012, 7:36am

markbrown4:

Hi Pamela,

I’ve fixed up the blue menu item in the jsfiddle.
The problem is just that your transition is firing when you hover over the a tags, you want it to fire when you hover over the li tags.
#menu [B].blue:hover > a[/B], #menu .blue a:focus {
    background:url('http://atastypixel.com/blog/wp-content/uploads/2009/02/200902081924.jpg');
    /*background-position: 0 0;*/
    opacity: 0;
}
This means that when you mouse over the a element or the sub menu elements the hover is still active on the parent.

Thanks Mark! That relieves half of my HUGE headache! Initially, I was a bit confused by the greater than sign as I’m more accustomed to seeing it in if/then and loop statements, but you’ve clarified that very nicely for me. Thanks!

In regards to having the non-active items of the menu and sub-menu faded, is this possible?

One of the numerous things I tried doing was adding the following to the CSS (here’s the fiddle for it also including your amazing fix) :

#menu:hover a {
	opacity: .5;
}

However, this seemingly just made things worse as it (1) faded everything [menu and sub-menu items] that isn’t active and (2) the menu items are stuck in a transition-like state with 50% opacity simultaneously showing both the original image and the hover image!

This is confusing me beyond confusion! I don’t know if it involves some simple CSS fix like the one you just showed me for the other issue, or if this is genuinely more complex? Frankly speaking, as a beginner, I’m finding that a few times, I’ve ended up doing several lines of code sometimes even using elements within elements only to later being shown that there is a very simple one-line fix!

P.S. I’m just now reading front end standards, and I wish I came across it sooner!

markbrown4 · June 10, 2012, 8:41am

The > sign targets direct descendants. If you use a selector #menu a it will target the top level links as well as the sub menu links. So the > sign just gives you more control over which elements you are targeting.

Pamela1991:

In regards to having the non-active items of the menu and sub-menu faded, is this possible?

One of the numerous things I tried doing was adding the following to the CSS (here’s the fiddle for it also including your amazing fix) :
#menu:hover a {
	opacity: .5;
}
However, this seemingly just made things worse as it (1) faded everything [menu and sub-menu items] that isn’t active and (2) the menu items are stuck in a transition-like state with 50% opacity simultaneously showing both the original image and the hover image!

This is confusing me beyond confusion! I don’t know if it involves some simple CSS fix like the one you just showed me for the other issue, or if this is genuinely more complex? Frankly speaking, as a beginner, I’m finding that a few times, I’ve ended up doing several lines of code sometimes even using elements within elements only to later being shown that there is a very simple one-line fix!

You were on the right track, you do want to set the opacity of all top-level links when you hover over #menu. and then set opacity back to 1 for the particular one that you’ve hovered over.
I think you’re after something like this.


<ul id="menu">
  <li class="red"><a href="red.php">Red</a></li>
  <li class="white"><a href="white.php">White</a>
    <ul>
      <li><a href="alaska.php">Alaska</a></li>
      <li><a href="ri.php">Rhode Island</a></li>
      <li><a href="fl.php">Florida</a></li>
      <li><a href="dc.php">District of Columbia Downtown</a></li>
      <li><a href="nyc.php">New York City</a></li>
    </ul>
  </li>
  <li class="blue"><a href="blue.php">Blue</a>
    <ul>
      <li><a href="one.php">One</a></li>
      <li><a href="two.php">Two</a></li>
      <li><a href="three.php">Three</a></li>
      <li><a href="four.php">Four</a></li>
    </ul>
  </li>
  <li class="stars"><a href="stars.php">Stars</a></li>
  <li class="stripes"><a href="stripes.php">Stripes</a></li>
</ul>


* {
  margin: 0;
  padding: 0;
}
html, body {
  background: #fff;
  font: 13px/1.231 arial,helvetica,clean,sans-serif
}
#menu, #menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu > li {
  float: left;
  position: relative;
  margin-left: 10px;
}
#menu > li a {
  text-indent: -9999px;
  display: block;
  width: 116px;
  height: 128px;
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}
#menu ul li a {
  text-indent: 0;
  font-family: Impact, Helvetica, sans-serif;
  display: block;
  font-size: 24px;
  padding: 10px;
  height: auto;
  width: 150px;
  border: 1px solid #ececec;
  border-radius: 15px;
  line-height: normal;
  background: black;
  color: #fff;
  text-align: center;
  margin-bottom: 6px;
}
#menu:hover > li a, #menu li:hover ul a {
  opacity: .5;
}
#menu > li:hover a, #menu li ul a:hover {
  opacity: 1;
}
#menu ul li a:hover {
  background: black;
  color: #fff;
  text-align: center;
  border-color: red;
}
#menu ul {
  position: absolute;
  top: 120px;
  left: -9999em;
  padding: 10px;
  z-index: 90;
}
#menu li:hover ul {
  left: -47px;
}

#menu .red > a {
  background: url('http://2.bp.blogspot.com/-akO3TOU8fuE/TnA15HfGHZI/AAAAAAAAB6M/tG2g7C1nsRs/s200/imagesCA91Q61X.jpg');
}
#menu .red:hover > a {
  background: url('http://lh5.ggpht.com/-0msPBzQIjAw/S0jRxgi201I/AAAAAAAAAes/Oaa0dPQSI8s/s128/RedStripes.jpg');
}

#menu .white > a {
  background: url('http://membership.uhms.org/resource/resmgr/images/la_foto.jpg');
}
#menu .white:hover > a {
  background: url('http://img.tfd.com/wn/47/64422-area.jpg');
}

#menu .blue > a {
  background: url('http://atastypixel.com/blog/wp-content/uploads/2009/02/200902081924.jpg');
}
#menu .blue:hover > a {
  background: url('http://static.wix.com/media/ead4a9_4c5478dc902932c7740f200ec157f18d.png_128');
}

#menu .stars > a {
  background: url('http://1.bp.blogspot.com/_gJ4222TxWAs/SqjtlOKWkQI/AAAAAAAAATc/6bNr4s_jeac/s320/vote.jpg');
}
#menu .stars:hover > a {
  background: url('http://www.clipartpal.com/_thumbs/frank3_008658_tns.png');
}

#menu .stripes > a {
  background: url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
}
#menu .stripes:hover > a {
  background: url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}

I’ve remove the submenu class because you can just target ul’s within the #menu.
I’m using text-indent to hide the text rather than display:none on the spans too.

Understanding selectors is one the most important parts about learning CSS, I think you were just getting confused which selectors were applying which styles to your menu.

P.S. I’m just now reading front end standards, and I wish I came across it sooner!

I really should clean that up, there’s lots of good stuff in there, but there’s lots that will only make sense for the company they were written for.

PaulOB · June 10, 2012, 9:33am

You can achieve it by turning all off when the parent is hovered and then switch on each child only as it is hovered (as shown in Marks demo). We had a thread a couple of months ago asking the same thing (but I couldn’t find it) but I found the demo I made for the thread.

Pamela1991 · June 10, 2012, 3:05pm

Talk about efficiency!!! Thanks a bunch, Mark! Your code is jaw-droppingly amazing! I had so many excess lines in both my HTML and my CSS that just unnecessarily bloated my code and made it difficult to work with… and I had thought I did a pretty good job at condensing my code, but it turns out otherwise. Looks like I still have a looooong way to go in this CSS world! I admit that it is quite nerve-wracking at times, but I keep trying and the results are quite rewarding–even if after meticulously long hours of coding, I have poorly coded CSS/HTML of which all is working or just some of it, when you guys here point me in the right direction, it is a huge inspiration and help for me to code even better the next time around.

This is THE BEST HTML/CSS FORUM that I have encountered!

I really hope that one day soon, I’ll also be able to so swiftly help others around here in HTML/CSS like you guys do, but so far I’m still barely out of my HTML/CSS crib, crawling around the forums and hoping to be able to answer some of the questions on here, but just worried that I think I know the answer, but I don’t want to give the wrong answer as to confuse any thread openers, so mainly I’ve just been reading the various questions and answers on here, only trying to answer an odd one or two on the side of caution.

Thanks! “>” is a new weapon in my modest CSS arsenal!

How you have done it is so much more efficient, and you are spot on that the selectors were confusing me. Perhaps I should read some sort of CSS glossary or something? I never would have even guessed that text-indent would enable you to hide text.

Even as it is, I found it beneficial, and although you wrote it for that company, I still personally find even the company-oriented bits interesting. …But maybe that’s because I like reading?

Again, thanks so much, Mark!

Pamela1991 · June 10, 2012, 3:10pm

Thanks Paul! I always enjoy seeing replies from you. Do you have any estimate of when the tutorials on your site will be available?

PaulOB · June 10, 2012, 3:44pm

Off Topic:

I’m afraid the whole site needs a revamp as I have neglected it a bit recently (due to work and being on here :)). Hopefully later in the year I will buckle down and sort it all out.

system · October 8, 2014, 2:31am