[web-tips > vertical menu]

A Great CSS Vertical Pop-out Menu

 

 

 

 

The question has been asked, in the css forum, "Is a there way to create a css vertical pop-out menu in css that will work on most browsers?" The answer is "Yes, provided..." see DEMO above and code below.

So, to make a css horizontal menu work for you, you'll need:

  • 1. This css file. In this example, it's in the same directory as this page. You place the css file wherever you want, but provide the path for it;
  • 2. Add the csshover.htc file to your site. In this example, it's in the same directory as this page. You place it wherever you want, but provide the path for it;;
  • 3. Add the html IE sniffer code as shown below into your web page between the <head> tags; 
	
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body{behavior:url(csshover.htc);}
</style>
<![endif]-->
 
  • 4. Then, prepare and add your html link code to your web page. An example is shown below. Please insert your text and links as needed. 
	
<div id="menuv-container">
<div id="menuv">
	<ul>
		<li><a href="#" class="parent">Item 1</a>
		<ul>
			<li><a href="#">Sub 1:1</a></li>
			<li><a href="#" class="parent">Sub 1:2</a>
				<ul>
				<li><a href="#">Sub 1:2:1</a></li>
				<li><a href="#">Sub 1:2:2</a></li>
				<li><a href="#">Sub 1:2:3</a></li>
				<li><a href="#">Sub 1:2:4</a></li>
				</ul>
			</li>
			<li><a href="#">Sub 1:3</a></li>
			<li><a href="#" class="parent">Sub 1:4</a>
				<ul>
				<li><a href="#">Sub 1:4:1</a></li>
				<li><a href="#">Sub 1:4:2</a></li>
				<li><a href="#">Sub 1:4:3</a></li>
				<li><a href="#">Sub 1:4:4</a></li>
				</ul>
			</li>
			<li><a href="#" class="parent">Sub 1:5</a>
				<ul>
				<li><a href="#">Sub 1:5:1</a></li>
				<li><a href="#">Sub 1:5:2</a></li>
				<li><a href="#">Sub 1:5:3</a></li>
				<li><a href="#">Sub 1:5:</a></li>
				<li><a href="#">Sub 1:5:5</a></li>
				</ul>
			</li>
			<li><a href="#">Sub 1:6</a></li>
		</ul>
		</li>
	</ul>
	
		... repeat and alter the list as needed 
	
</div> 	<!-- end the menuv-container div -->  
</div>	<!-- end the menuv div --> 
 

The import things to realize here are:

  1. The csshover.htc code coupled with the sniffer code makes IE act as it should. If it were not for those pieces of code, IE would just sit there.
  2. This technique works for all browsers EXCEPT for IE 5.23 and below. These outdated browsers don't even recognize Microsoft's embedded commands.
  3. The position of the menu is dependant upon the "menuv-container" rule in the css document. Change the top and left values and the placement of the menu will adjust accordingly.
  4. The only other things you may want to change are the colors of the menu. In this example, the background is RoyalBlue and the mouse-over state is CornFlowerBlue. As such, the colors are pretty obvious to identify and change.
  5. While it may be obvious to most, you will need to change the"#" to your links and the text (i.e., Item 1) to what you want.
  6. Place the csshover.htc and the menuv.css files where your web page can find them. In this example, they are located in the same directory as this page.
  7. And lastly, if you have any questions as to how all of this comes together, please take the time to review the source code of this web page. This page works because everything is where it should be. If this doesn't work for you, or if you have problems with this technique, then I suggest that you first take this code "as-is" and move it to your site and get it to work -- it will work if you do it right. Once you get it to work, then make a copy and work with the copy in making your changes. Remember, the code has to be exact even minor changes can make significant differences in performance. So go carefully.

This technique validates under both HTML 4.01 and CSS.

Enjoy.

tedd...