tree_menu.html
<!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>jquery tree menu css slide up down</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
$('#tree-menu > li > a').click(function(){
var next = $(this).next();
if(next.is(':visible')){
next.slideUp(300);
$(this).find('span').html('+');
}else{
next.slideDown(300);
$(this).find('span').html('-');
}
});
});
</script>
<style type="text/css">
body { font:12px Tahoma, Geneva, sans-serif; }
#div-head-tree-menu { width:230px; padding:10px 10px 10px 10px; text-align:center; background-color:#ddd; border:1px solid #ccc; border-bottom:5px solid #a8bfd7; }
#div-tree-menu { padding-left:20px; padding-bottom:10px; width:230px; background-color:#eee; overflow:hidden; border:1px solid #aaa; border-top:1px solid #FFF; }
#tree-menu { width:200px; float:left; margin:0; padding:0; margin-top:-1px;}
#tree-menu ul { margin:0; padding:8px; }
#tree-menu li { list-style:none; padding:8px; margin:0; }
#menu-lv1 { display:none; }
#menu-lv2 { display:none; }
#menu-lv3 { display:none; }
#menu-lv4 { display:none; }
a:link { text-decoration: none; color: #00F; }
a:visited { text-decoration: none; color: #0CF; }
a:hover { text-decoration: none; color: #F60; }
a:active { text-decoration: none; color: #F00; }
.txt-red { color:#F00 }
</style>
</head>
<body>
<div id="div-head-tree-menu">: <a href="http://www.nhatchanh.info/2015/02/jquery-tree-menu-css-slide-up-down.html">Tree Menu</a> :</div>
<div id="div-tree-menu">
<ul id="tree-menu">
<li><a href="#"><span>+</span> menu-1</a>
<ul id="menu-lv1">
<li>› <a href="#">sub-menu-1-1</a></li>
<li>› <a href="#">sub-menu-1-2</a></li>
<li>› <a href="#">sub-menu-1-3</a></li>
<li>› <a href="#">sub-menu-1-4</a></li>
</ul>
</li>
<li><a href="#"><span>+</span> menu-2</a>
<ul id="menu-lv2">
<li>› <a href="#">sub-menu-2-1</a></li>
<li>› <a href="#">sub-menu-2-2</a></li>
<li>› <a href="#">sub-menu-2-3</a></li>
<li>› <a href="#">sub-menu-2-4</a></li>
</ul>
</li>
<li><a href="#"><span>+</span> menu-3</a>
<ul id="menu-lv3">
<li>› <a href="#">sub-menu-3-1</a></li>
<li>› <a href="#">sub-menu-3-2</a></li>
<li>› <a href="#">sub-menu-3-3</a></li>
<li>› <a href="#">sub-menu-3-4</a></li>
</ul>
</li>
<li><a href="#"><span>+</span> menu-4</a>
<ul id="menu-lv4">
<li>› <a href="#">sub-menu-4-1</a></li>
<li>› <a href="#">sub-menu-4-2</a></li>
<li>› <a href="#">sub-menu-4-3</a></li>
<li>› <a href="#">sub-menu-4-4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Tạo Menu Treeview đa cấp bằng HTML và CSS
Post a Comment