竖导航下拉菜单、多级下拉菜单
- 简单的下拉菜单
一、HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>menutitle>
<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>morespan>
<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: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
body{
margin: 50px;
}
a{
text-decoration: none;
color: red;
}
ul{
border: 3px solid #abcdef;
width: 200px;
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
<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">kiwish3>
<ul style="display:none">
<li><a href="#">1111a>li>
<li><a href="#">1111a>li>
<li><a href="#">1111a>li>
<li><a href="#">1111a>li>
ul>
<h3 id="one">Orangesh3>
<ul style="display:none">
<li><a href="#">2222a>li>
<li><a href="#">2222a>li>
<li><a href="#">2222a>li>
<li><a href="#">2222a>li>
ul>
<h3 id="one">Grapesh3>
<ul style="display:none">
<li><a href="#">3333a>li>
<li><a href="#">3333a>li>
<li><a href="#">3333a>li>
<li><a href="#">3333a>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: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
body{
margin: 50px;
color: #cccccc;
position: absolute;
padding-left:450px;
}
a{
text-decoration: none;
color: blue;
}
a:hover{
text-decoration: underline;
}
h3{
cursor: pointer;
}
ul li{
display: block;
background-color: #373128;
border: 1px solid #40392C;
color: #CCCCCC;
margin: 5px 0;
padding: 4px 18px;
}
#one{
display:block;
width: 200px;
padding:10px 20px 0;
margin-top: 10px;
height: 34px;
font-family: Arial, Helvetica, sans-serif;
background: url(../2/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
<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: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
body{
margin: 50px;
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();
});
});