Gary Teh
June 2010
M T W T F S S
« May   Jul »
 123456
78910111213
14151617181920
21222324252627
282930  

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 Response to “Modified Joomfish menu bar with more user friendly submenus”

Leave a Reply

You must be logged in to post a comment.