您的位置：首页 > 其它

标准导航+标准导航菜单

2016-03-25 18:03 246 查看
标准导航

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,li{margin:0;padding:0;}
li{list-style: none;}
li{float:left;}
li a{display: block; width:200px; text-align: center;padding: 10px 0;cursor: pointer; text-decoration: none;}
a:link,a:visited {color:#aaa;}
a:hover{background-color: #009cec;}
/*a:link----->a:visited------>a:hover-------->a:active。*/

</style>
</head>
<body>
<ul>
<li><a href="#">file</a></li>
<li><a href="#">edit</a></li>
<li><a href="#">view</a></li>
<li><a href="#">navigate</a></li>

</ul>
</body>
</html>


标准导航菜单

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon"/>
<title>标准导航菜单</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function () {
function test(a){
$(a).hover(
function(){
var list=a+"-menu";
$(list).toggle();
});
}
test("#li1");
test("#li2");
test("#li3");
test("#li4");
$("#search").bind('focus blur', function () {
$("#search-menu").toggle();
});
});
</script>
<style type="text/css">
body,ul,li,div{margin:0;padding:0;}

li{list-style: none;}
.nav > ul > li{float:left;}
li a{
display: block;
width:200px;
text-align: center;
padding: 10px 0;
cursor: pointer;
text-decoration: none;
position: relative;
z-index: 1;
}
li > div{
background-color:#fff;
display: none;
position: absolute;
z-index: 2;
padding: 10px 0;
cursor: pointer;
}
a:link,a:visited {color:#3c763d}
a:hover{text-decoration: underline;}
/*a:link----->a:visited------>a:hover-------->a:active。*/
.main{background-color: #4cae4c; height: 400px;}

</style>
</head>
<body>
<div class="nav">
<ul>
<li id="li1"><a href="#" >file</a>
<div id="li1-menu">
<ul>
<li><a href="#">new</a></li>
<li><a href="#">open</a></li>
<li><a href="#">save</a></li>
<li><a href="#">exit</a></li>
</ul>
</div>
</li>
<li id="li2"><a href="#" >edit</a>
<div id="li2-menu" >
<ul>
<li><a href="#">copy</a></li>
<li><a href="#">cut</a></li>
<li><a href="#">paste</a></li>
<li><a href="#">delete</a></li>
</ul>
</div>
</li>
<li  id="li3"><a href="#">view</a>
<div id="li3-menu">
<ul>
<li><a href="#">recent file</a></li>
<li><a href="#">recent change</a></li>
<li><a href="#">tool</a></li>
<li><a href="#">about</a></li>
</ul>
</div>
</li>
<li id="li4"><a href="#" >navigate</a>
<div id="li4-menu">
<ul>
<li><a href="#">back</a></li>
<li><a href="#">forward</a></li>
<li><a href="#">next</a></li>
<li><a href="#">preview</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div style="clear:both;"></div>
<div class="main">
<input type="text" name="search" id="search"/>搜索
<div id="search-menu" style="position: absolute;z-index: 2; display: none;">
<ul style="border: 1px solid red;">
<li><a href="#">产品1 </a></li>
<li><a href="#">产品2 </a></li>
<li><a href="#">产品3</a></li>
<li><a href="#">产品4</a></li>
</ul>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航