Download
2017-08-31, 21:57:31
(2017-08-31, 18:31:28)fume Wrote: Ok, I understand. I will try it. I'm not sure if I have the know how...
try this code:
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Three level menu</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
/* page width and center poisiton */
.wrapper{
margin:0 auto;
max-width:800px;
}
/* */
#header-menu {
height: 38px;
/*
margin: 5px auto 0 200px;
padding-left: 0;
*/
position: relative;
width: 100%;
}
/* START MULTIPLE LEVEL MENU */
#nav {
float: left;
margin: 0;
padding: 0;
border-bottom: none;
}
#nav li a, #nav li {
float: left;
}
#nav li {
list-style: none;
position: relative;
}
#nav li a {
padding: 11px;
text-decoration: none;
color: white;
background: red;
width:150px;
}
#nav li a:hover {
background:#000;
}
/* Submenu indicator */
.hasChildren {
position: absolute;
width: 8px;
height: 8px;
background: #ccc;
right : 0;
bottom: 0;
}
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0;
margin: 0;
}
#nav li:hover > ul {
display: block;
background:#262626;
}
#nav li ul li, #nav li ul li a {
float: none;
font-size:14px;
}
#nav li ul li {
_display: inline; /* for IE6 */
}
/* 2 LEVEL MENU STYLE */
#nav li ul li a {
width: 150px;
display: block;
border-top:1px dotted #252525; /* 2 level */
border-bottom:1px dotted transparent; /* 2 level */
background:#46586E;
font-size:14px;
}
/* 3 LEVEL MENU STYLE */
#nav li ul li ul {
display: none;
border-left:1px dotted #3E545F;
}
#nav li ul li:hover ul { /* 3 level */
left: 100%;
top: 0;
font-size:14px;
background:#262626;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header-menu">
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a>
<ul>
<li><a href="#">Child 1</a></li>
<li>
<a href="#">Child 2</a>
<ul><li><a href="#">Child 2-1</a></li></ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
<script>
/* script for three level menu */
var site = function() {
this.navLi = $('#nav li').children('ul').hide().end();
this.init();
};
site.prototype = {
init : function() {
this.setMenu();
},
// Enables the slidedown menu, and adds support for IE6
setMenu : function() {
$.each(this.navLi, function() {
if ( $(this).children('ul')[0] ) {
$(this)
.append('<span />')
.children('span')
.addClass('hasChildren')
}
});
this.navLi.hover(function() {
// mouseover
$(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce');
}, function() {
// mouseout
$(this).find('> ul').stop(true, true).hide();
});
}
}
new site();
</script>
</html>
