CSS+HTML+JQuery简单菜单
1. [代碼]style ? ??
<style type="text/css">
? ? body,ul,li,a{
? ? ? ? margin:0;
? ? ? ? padding:0
? ? }
? ? ?
? ? ul,li{
? ? ? ? list-style-type:none
? ? }
?
? ? .menu{
? ? ? ? width:270px;
? ? ? ? height:30px;
? ? ? ? line-height:30px;
? ? ? ? background:#0f67a1
? ? }
? ? ?
? ? .menu li{
? ? ? ? width:80px;
? ? ? ? float:left;
? ? ? ? display:inline;
? ? ? ? position:relative;
? ? ? ? z-index:10;
? ? ? ? text-align:center/*一級欄內(nèi)容居中*/
? ? }
? ? ? ? ?
? ? .menu li:hover{
? ? ? ? background:#426d9c; ? ? ? ? ? ??
? ? }
? ? ? ? ?
? ? .menu .menuUl{
? ? ? ? width:50px;
? ? ? ? height:auto;
? ? ? ? display:none;
? ? ? ? background:#426d9c;
? ? ? ? position:absolute;
? ? ? ? z-index:20;
? ? ? ? left:25px;
? ? ? ? top:30px
? ? }
? ? ? ? ?
? ? .menuUl li{
? ? ? ? width:100%;
? ? ? ? float:left;
? ? ? ? text-align:left;
? ? } ??
? ? ? ? ? ? ? ? ?
? ? a{
? ? ? ? color:#eee;
? ? ? ? text-decoration: none
? ? }
? ? ?
? ? a:hover{
? ? ? ? color:#000;
? ? ? ? text-decoration: none
? ? }
</style>
2. [代碼]script ? ??
<script type="text/javascript"> ? ? ??
? ? $(document).ready(function(){
? ? ? ? $(".menu li").hover(
? ? ? ? ? ? function(){
? ? ? ? ? ? ? ? $(this).find(".menuUl").show('50');
? ? ? ? ? ? },
? ? ? ? ? ? function(){
? ? ? ? ? ? ? ? $(this).find(".menuUl").hide('50');
? ? ? ? ? ? }
? ? ? ? );
? ? })
</script>
3. [代碼]body ? ??
<body>
? ? <ul class="menu">
? ? ? ? <li>
? ? ? ? ? ? <a href="">1</a>
? ? ? ? ? ? <ul class="menuUl">
? ? ? ? ? ? ? ? <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>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <a href="">1</a>
? ? ? ? ? ? <ul class="menuUl">
? ? ? ? ? ? ? ? <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>
? ? ? ? </li> ? ? ? ??
? ? </ul>
? ? ?
</body>
4. [文件] jquery-1.7.2.min.js ~ 93KB ? ? 下載(29) ? ??
5. [文件] 完整文件?
<!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>http://www.huiyi8.com/dongman/weimei/?
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? ? ? <link type="text/css" href="css/main.css" rel="stylesheet" />
? ? ? ? <script type="text/javascript" src="js/vendor/jquery-1.7.2.js"></script>
? ? ? ? <script type="text/javascript"> ? ? ??
? ? ? ? ? ? $(document).ready(function(){
? ? ? ? ? ? ? ? $(".menu li").hover(
? ? ? ? ? ? ? ? ? ? function(){
? ? ? ? ? ? ? ? ? ? ? ? $(this).find(".menuUl").show('50');
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? function(){
? ? ? ? ? ? ? ? ? ? ? ? $(this).find(".menuUl").hide('50');
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? );
? ? ? ? ? ? })
? ? ? ? </script>
?
? ? ? ? <style type="text/css">
? ? ? ? ? ? body,ul,li,a{
? ? ? ? ? ? ? ? margin:0;
? ? ? ? ? ? ? ? padding:0
? ? ? ? ? ? }
? ? ? ? ? ? ?
? ? ? ? ? ? ul,li{
? ? ? ? ? ? ? ? list-style-type:none
? ? ? ? ? ? }
?
? ? ? ? ? ? .menu{
? ? ? ? ? ? ? ? width:270px;
? ? ? ? ? ? ? ? height:30px;
? ? ? ? ? ? ? ? line-height:30px;
? ? ? ? ? ? ? ? background:#0f67a1
? ? ? ? ? ? }
? ? ? ? ? ? ?
? ? ? ? ? ? .menu li{
? ? ? ? ? ? ? ? width:80px;
? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? display:inline;
? ? ? ? ? ? ? ? position:relative;
? ? ? ? ? ? ? ? z-index:10;
? ? ? ? ? ? ? ? text-align:center/*一級欄內(nèi)容居中*/
? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? .menu li:hover{
? ? ? ? ? ? ? ? background:#426d9c; ? ? ? ? ? ??
? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? .menu .menuUl{
? ? ? ? ? ? ? ? width:50px;
? ? ? ? ? ? ? ? height:auto;
? ? ? ? ? ? ? ? display:none;
? ? ? ? ? ? ? ? background:#426d9c;
? ? ? ? ? ? ? ? position:absolute;
? ? ? ? ? ? ? ? z-index:20;
? ? ? ? ? ? ? ? left:25px;
? ? ? ? ? ? ? ? top:30px
? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? .menuUl li{
? ? ? ? ? ? ? ? width:100%;
? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? text-align:left;
? ? ? ? ? ? } ??
? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? a{
? ? ? ? ? ? ? ? color:#eee;
? ? ? ? ? ? ? ? text-decoration: none
? ? ? ? ? ? }
? ? ? ? ? ? ?
? ? ? ? ? ? a:hover{
? ? ? ? ? ? ? ? color:#000;
? ? ? ? ? ? ? ? text-decoration: none
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? ?
? ? <body>
? ? ? ? <ul class="menu">
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="">1</a>
? ? ? ? ? ? ? ? <ul class="menuUl">
? ? ? ? ? ? ? ? ? ? <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>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="">1</a>
? ? ? ? ? ? ? ? <ul class="menuUl">
? ? ? ? ? ? ? ? ? ? <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>
? ? ? ? ? ? </li> ? ? ? ??
? ? ? ? </ul>
? ? ? ? ?
? ? </body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/xkzy/p/3951674.html
總結(jié)
以上是生活随笔為你收集整理的CSS+HTML+JQuery简单菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么原因成就了一位优秀的程序员？(转)
- 下一篇： Struts1和Struts2的区别和对