CSS Menu using one image
A simple, cross browser compatible horizontal CSS menu using one image, no javascript.
Menu features:
- list based;
- only one image used;
- no javascript required;
- easy to customize;
- easy to implement;
- cross-browser compliant;
- very light-weight only 1,87 KB.
Demo:
HTML code:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="menu.css" /> <title>CSS Horizontal Menu with one image</title> </head> <body> <div class="menu_one_img"> <span>CSS Menu</span> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> </body> </html>CSS code:
/* CSSTerm.com CSS Horizontal menu with one image */ .menu_one_img { width: 100%; background:url('img_bg.gif') repeat-x; height:56px; border:1px solid #B06A15; } .menu_one_img ul { margin: 0; padding: 0; float: left; } .menu_one_img ul li { display: inline; } .menu_one_img ul li a { float: left; text-decoration: none; color: #454545; padding: 18px 20px; border-right:1px #bb6f16 solid; } .menu_one_img ul li a:visited { color: #454545; } .menu_one_img ul li a:hover, .menu_one_img ul li .current, .menu_one_img span { color:#FFF; background:#005555 url('img_bg.gif') bottom repeat-x; } .menu_one_img span { float: left; padding: 18px 20px; font-weight:bold; }
Previous page: CSS Menu with description
Next page: CSS Menu two lines