-
簡單的下拉菜單
一、HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>menu</title>
<link rel="stylesheet" type="text/css" href="menu.css" />
<script src="../jquery.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
</head>
<body>
<span>more</span>
<ul>
<li><a href="#">軍事</a></li>
<li><a href="#">遊戲</a></li>
<li><a href="#">經濟</a></li>
<li><a href="#">政治</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">娛樂</a></li>
<li><a href="#">體育</a></li>
</ul>
</body>
</html>
二、CSS
/*
* @Author: Marte
* @Date: 2017-05-24 09:04:34
* @Last Modified by: Marte
* @Last Modified time: 2017-05-24 10:59:20
*/
*{
margin: ;
padding: ;
}
img{
border:;
}
ol, ul ,li{list-style: none;}
body{
margin: px;
}
a{
text-decoration: none;
color: red;
}
ul{
border: px solid #abcdef;
width: px;
display: none;
}
span{
cursor: pointer;
}
三、js
/*
* @Author: Marte
* @Date: 2017-05-24 09:05:10
* @Last Modified by: Marte
* @Last Modified time: 2017-05-24 09:53:28
*/
$(document).ready(function(){
var opt = $('span');
var oContent = $('ul');
opt.click(function(){
// oContent.show();
oContent.slideToggle();
});
});
-
豎導航菜單
一、HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menu.css" />
<script src="../jquery.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
</head>
<body style="background:#302b23">
<h3 id="one">kiwis</h3>
<ul style="display:none">
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
</ul>
<h3 id="one">Oranges</h3>
<ul style="display:none">
<li><a href="#">2222</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">2222</a></li>
</ul>
<h3 id="one">Grapes</h3>
<ul style="display:none">
<li><a href="#">3333</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">3333</a></li>
</ul>
</body>
</html>
二、CSS
/*
* @Author: Marte
* @Date: 2017-05-24 10:21:02
* @Last Modified by: Marte
* @Last Modified time: 2017-05-24 14:10:53
*/
*{
margin: ;
padding: ;
}
img{
border:;
}
ol, ul ,li{list-style: none;}
body{
margin: px;
color: #cccccc;
position: absolute;
padding-left:px;
}
a{
text-decoration: none;
color: blue;
}
a:hover{
text-decoration: underline;
}
h3{
cursor: pointer;
}
ul li{
display: block;
background-color: #373128;
border: px solid #40392C;
color: #CCCCCC;
margin: px ;
padding: px px;
}
#one{
display:block;
width: px;
padding:px px ;
margin-top: px;
height: px;
font-family: Arial, Helvetica, sans-serif;
background: url(..//green.png);
outline: none;
}
三、js
/*
* @Author: Marte
* @Date: 2017-05-24 10:21:10
* @Last Modified by: Marte
* @Last Modified time: 2017-05-24 14:15:37
*/
$(document).ready(function(){
$.easing.def = 'easeOutElastic'
var opt = $('h3');
opt.click(function(){
$(this).next('ul').slideToggle().siblings('ul').slideUp();
});
});
3. 多級下拉菜單
一、HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menu.css" />
<script src="../jquery.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li class="menuLevel1 menu">
<span>一級菜單</span>
<ul class="hide">
<li class="menuLevel2 menu">
<span>二級菜單</span>
<ul class="hide">
<li class="menuLevel3 menu">
<span>三級菜單</span>
<ul class="hide">
<li class="menuLevel4 menu">
<span>四級菜單</span>
<ul class="hide">
<li class="menuLevel5 menu">
<span>五級菜單</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
二、CSS
/*
* @Author: Marte
* @Date: 2017-05-24 14:16:01
* @Last Modified by: Marte
* @Last Modified time: 2017-05-24 15:23:45
*/
*{
margin: ;
padding: ;
}
img{
border:;
}
ol, ul ,li{list-style: none;}
body{
margin: px;
position: relative;
}
.hide{
display: block;
}
.menu{
cursor: pointer;
}
三、js
/*
* @Author: Marte
* @Date: 2017-05-24 14:16:10
* @Last Modified by: Marte
* @Last Modified time: 2017-05-24 15:19:20
*/
$(document).ready(function(){
var menu = $('.menu');
menu.hover(function(){
$(this).children('ul').show();
},function(){
$(this).children('ul').hide();
});
});