CSS Vertical Navigation with Teaser

CSS Vertical Navigation with Teaser

CSS Vertical Navigation with Teaser

This technique is a simple way to display some teaser information for your vertical navigation. I won’t waste any of your time with an intro, let’s get right into the code.

HTML

We will start by creating a list item, but in this case, we will add an empty ‘span’ tag inside of the hyper link. The CSS will look at the content of the span tag as a display: none until it’s hovered over.

<ul>
	<li>
		<a href="#">Home
		<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
		</a>
	</li>
	<li>
		<a href="#">Blog
		<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
		</a>
	</li>
	<li>
		<a href="#">Tutorials
		<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
		</a>
	</li>
</ul>

CSS

We will first style the vertical navigation list. What I like to do is add a light bevel look on each of the navigation links.

ul.sidenav {
	font-size: 1.2em;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #005094;
	border-bottom: 1px solid #3373a9;
	border-top: 1px solid #003867;
}
ul.sidenav li a{
	display: block;
	color: #fff;
	text-decoration: none;
	width: 155px;
	padding: 10px 10px 10px 35px;
	background: url(sidenav_a.gif) no-repeat 5px 7px;
	border-top: 1px solid #3373a9;
	border-bottom: 1px solid #003867;
}

Then we will now add the hide/show effect when it’s hovered.

ul.sidenav li a:hover {
	background: #003867 url(sidenav_a.gif) no-repeat 5px 7px;
	border-top: 1px solid #1a4c76;
}
ul.sidenav li span{	display: none; }
ul.sidenav li a:hover span {
	display: block;
	font-size: 0.8em;
	padding: 10px 0;
}

You may also like...

1 Response

  1. November 6, 2011

    […] This is an add-on to my previous articles “5 Ways to Spice up Your Images with CSS ” and “CSS Vertical Navigation with Teaser“, a little combination of both […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>