mevans76 dot com

 

Posted in: Examples, CSS

Vertical CSS Menu with Left Flyouts

A vertical menu system with left side horizontal fly outs. HTC file is required for IE 6. IE 5.x IS NOT supported.

With 3 column layouts becoming much more popular, more and more needs arise for a functional right side navigation system with nested sub menus. This solution creates this with CSS so it is 100% independent of any client side scripting except for IE 6 which requires the Whatever:hover htc file for IE 6 to make the menus work.

Nice thing is if you decide not to use the HTC the top level navigation elements will still work in IE 6 so you only lose the sub menus, which in itself is not terrible if you have secondary nav elements on every page.

Download Example | View live example

Preview Image of Example

Flyout Menu Example Preview

The CSS



ul#vMenuListRight {
	padding: 0;
	margin: 0;
	list-style: none;
	width: 200px;
	border: solid #333333;
	border-width: 1px 0 0 0;

}

ul#vMenuListRight li {
	border: solid #333333;
	border-width: 0 1px 1px 1px;
	text-indent: 28px;

}

ul#vMenuListRight li.hasFLyout ul li {
	text-indent: 0;

}

ul#vMenuListRight li a {
	padding: 8px;
	color: #993300;
	text-decoration: none;
	font-weight: bold;
	display: block;

}

/* IE 6 – Override required */

ul#vMenuListRight li a:hover {
	color: #FFF;
	background: #993300;

}

ul#vMenuListRight li.hasFLyout a {
	background: url(../images/burnt_orange_arrow_left.gif)
	no-repeat left center;

}

ul#vMenuListRight li.hasFLyout a:hover {
	color: #FFF;
	background: #993300 url(../images/white_arrow_left.gif)
	no-repeat left center;

}

ul#vMenuListRight li.hasFLyout ul li a {
	background: #FFF;

}


	
ul#vMenuListRight li.hasFLyout ul li a:hover {
	background: #993300;

}

ul#vMenuListRight li ul {
	display: none;
	padding: 0;
	margin: 0;
	list-style: none;
	border: solid #333333;
	border-width: 1px 0 0 0;
	background: #FFF;

}

ul#vMenuListRight li:hover ul {
	width: 200px;
	display: block;
	position: absolute;
	right: auto;
	margin: -34px 0 0 -200px;

}

The HTML

<ul id="vMenuListRight">
<li><a href="#vMenuRight">Menu Item 1</a></li>
<li class="hasFLyout"><a href="#vMenu">Menu Item 2</a>
	<ul>
		<li><a href="">Flyout Sub Menu</a></li>
		<li><a href="">Flyout Sub Menu</a></li>
		<li><a href="">Flyout Sub Menu</a></li>
		<li><a href="">Flyout Sub Menu</a></li>
	</ul>
</li>
<!-- flyout menu -->
<li class="hasFLyout"><a href="#vMenu">Menu Item 4</a>
	<ul>
		<li><a href="">Flyout Sub Menu</a></li>
		<li><a href="">Flyout Sub Menu</a></li>
		<li><a href="">Flyout Sub Menu</a></li>
		<li><a href="">Flyout Sub Menu</a></li>
	</ul>
</li>
<!-- flyout menu -->
<li><a href="#vMenuRight">Menu Item 4</a></li>
</ul>

Pownce this article! Digg This

Possibly Related Entries

Comments

  1. Craig Farrall said:

    Nice post, will have to use this on a project I do one day.