I’m close to nailing this flyout menu I have been working on, just have a couple of current pain points.
I’m trying to get left/right padding on my submenu items, as you can see I am not quite there. Also when the first submenu is displayed, I want to create a bit of a gap between the first row of list items and the child.
Below is my current code and a screen shot displaying what I want. Based on my current CSS, any thoughts on how to get this done in a clean way?
alt text http://www.ajondeck.net/temp/jFlyout.png
<!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" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function mainmenu() {
$("#nav ul").css({ display: "none" }); // Opera Fix
$("#nav li").hover(function() {
$(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
}, function() {
$(this).find('ul:first').css({ visibility: "hidden" });
});
}
$(document).ready(function() {
mainmenu();
});
</script>
<style type="text/css">
*
{
padding: 0px;
margin: 0px;
}
body
{
font-size: 0.85em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#nav, #nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
}
#nav a
{
display: block;
padding: 4px 0px 4px 0px;
color: #dfca90;
text-decoration: none;
background-color: #ECE9D8;
font-size: 9px;
font-weight: bold;
font: bold 15px Palatino, 'Palatino Linotype' , Georgia, serif;
}
#nav > li > a
{
font-size: 16px;
font-variant: small-caps;
border-right: 1px solid #dfca90;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 6px;
padding-top: 6px;
background-color: #fff;
color: #dfca90;
}
#nav li ul li a:hover
{
color: #999;
}
#nav li
{
float: left;
position: relative;
}
#nav ul
{
position: absolute;
display: none;
width: 170px;
border: 2px solid #dfca90;
}
#nav ul li
{
}
#nav li ul a
{
width: 170px;
height: auto;
float: left;
}
#nav ul ul
{
top: -2px;
}
#nav li ul ul
{
left: 170px;
background-color: #ECE9D8;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
{
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript </a>
<ul>
<li><a href="#">3.1 jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a> </li>
<li><a href="#">3.1.2 Tutorial</a> </li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>
</body>
</html>
Here’s an edited version. Put it in http://www.quickdiff.com/ to see what I changed (yours in the left side, and mine in the right side).