Simple show/hide with CSS

add to

As the title says here's one way to have simple show and hide effect using just CSS and avoid JavaScript. Idea is to use some tag inside the link (for example bold, or span or what ever) which will hide it's content in normal state and show in hover state. Mostly it's used for creating interesting menu effects with some additional images.

So here's basic example code, and a few ideas where you can also use this, for example i've used it Gunmetal free WordPress Theme, you can see the demo here.

 
<ol id="nav">
<li><a href="#"><b>»</b>Menu Item</a></li>
<li><a href="#"><b>»</b>Menu Item</a></li>
<li><a href="#"><b>»</b>Menu Item</a></li>
 
        ...
</ol>
 
#nav a {
	display: block;
	margin: 0;
	border: none;
}
#nav a b {
	float: right;
	display: none;
}
#nav a:hover {
	background: none;
	border: none;
	text-decoration: none;
}
#nav a:hover b {
	display: inline;
}
 

As bold tag you can use what ever you want like span or italic... The thing I'm seeing a lot these days is like descriptive headline on menu hover. The idea is the same, you place some tag into your link with empty span that has background image and absolute position and show it on hover. Here's example code.

 
<ul id="menu">
<li id="one"><a href="#"><span></span>Menu Item</a></li>
<li id="two"><a href="#"><span></span>Menu Item</a></li>
<li id="three"><a href="#"><span></span>Menu Item</a></li>
 
        ...
</ul>
 
#menu span {
	display: none;
	position: absolute;
}
 
#menu a:hover span {
	display: block;
}
 
#one span {
	background: transparent url(one.gif) no-repeat scroll 0 0;
	height: 11px;
	width: 111px;
	left: 35px;
	top: -20px;
...
}
 
#two span {
	background: transparent url(two.gif) no-repeat scroll 0 0;
	height: 222px;
	width: 22px;
	left: 15px;
	top: -10px;
...
}
 

And here are some ideas where you could also use this. For example to show that some link has target blank, so you give that link some id and do the same thing here for it with some descriptive icon. Have in mind that if you're using it inside some paragraph rest of text is going to move, so you could add padding on regular state and remove it on hover to fix it.

And here's another example, you can also use this to show a new menu like i am on every post title (those share icons) just i'm using a Javascript for it, didn't think if this when i was coding this Have fun!

Have some feedback? Leave a comment

What Now?

Digg this
Save to Del.ico.us
Stumble This
Subscribe
Leave a Comment

Further Reading

• Use the Link Description in Wordpress 3.0 Menus
• The Business Case for Microformats
• Essential Plugins for Wordpress 3.0
• 5 Rocking Google Analytics Plugins for Wordpress
• Old Design is New – 33 “Hip” Circles in Web Design

More?

Posted on 10. 09. 2008
Filed as CSS, Hacks
By Dejan Cancarevic