Simple css 1 level Vertical navigation menu

Posted by vaibhavsk

Aug 31, 2009

Hi,

Today i will be showing you how to create a simple 1 level vertical navigation menu with the help of css.

It is very easy and same like the 1 level horizontal navigation menu.

So lets start,

For this we will be using one image

1) Black background image

first we will create a simple code to display "unordered list" with ul and li

So now our display of the ul will be like this

Now we will apply our css to this ul

After applying this css our menu will look like this

Full code of the vertical menu with css is as, just copy and paste it, and modify links and its over.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Demonstration of 1 Level Vertical Menu</title> <style type="text/css"> ul#horizontal,#horizontal ul { 	list-style:none; 	width:125px; /* this is the width of the ul, change here as per your requirement*/ } ul#horizontal li { display:inline; border:none 0px; float:left; padding:2px; width:130px; /* this is the width of the each li, change it if your text is too long*/ text-align:center; } ul#horizontal li a { background: url(blackmenu2.png) repeat bottom; color: #FFFFFF; font-weight:bold; display:block; text-decoration:none; border:#333333 solid 1px; padding:2px 18px; margin:2px; font-family:Verdana, Arial, Helvetica, sans-serif; } ul#horizontal li a:hover { background:#FFFFFF; border:#333333 solid 1px; color:#000000; } </style> </head> <body> <ul id="horizontal"> 	<li><a href="http://programming-in-php.blogspot.com" target="_blank">Home</a></li> 	<li><a href="http://vaibhavsk.blogspot.com" target="_blank">Network</a></li> 	<li><a href="http://www.chaprak.com">Topics</a></li> 	<li><a href="http://jokestube.blogspot.com" target="_blank">Jokes</a></li> </ul> </body> </html>

Tweet this!

Labels: css, html

PHP scripts and programs for Beginner to Master

php programs, php ready to use scripts & functions, css tutorials, html, javascripts, ajax examples for Beginner to Master

Followers

Blogs I read

Categories

Blog Archive

Simple css 1 level Vertical navigation menu

0 comments:

Post a Comment