I was just looking through one of the sites that Qiqi wanted to replicate after for her new shopping cart and happen to chance upon their menu. It looks pretty user friendly the way they do their submenus. I have thus decided to do a joomfish replicate of what they did and have the source code included here.For my fellow web developers…. enjoy the codes!
<!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=iso-8859-1″ />
<title>Untitled Document</title>
</head>
<body>
<style>
#menubar li div{
border:1px #000000 solid;
width:300px;
padding:10px;
height:200px;
}
#menubar li ul li{
display:none;
}
#menubar li:hover ul li{
display:block;
margin-top:10px;
margin-left:-50px;
}
#menubar li{
list-style:none;
float:left;
width:100px;
height:30px;
}
</style>
<ul id=”menubar”>
<li> <a href=””>top bar </a>
<ul>
<li>
<div>contents </div>
</li>
</ul>
</li>
<li> <a href=””>top bar</a>
<ul>
<li>
<div>contents </div>
</li>
</ul>
</li>
<li> <a href=””>top bar</a>
<ul>
<li>
<div>contents </div>
</li>
</ul>
</li>
<li> <a href=””>top bar</a>
<ul>
<li>
<div>contents </div>
</li>
</ul>
</li>
</ul>
</body>
</html>
One Reply to “Modified Joomfish menu bar with more user friendly submenus”