用css和jquery写一个手风琴式的下拉菜单 博客分类： 下拉菜单 手风琴 css jquery css html jquery 手风琴下拉菜单
程序员文章站
2024-03-21 11:31:22
...
闲话少说，直接上代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1,maximum-scale=1″ />
<title>demo</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<style type='text/css'>
#bodr {
position: relative;
float: right;
margin-right: 20px;
left: 0;
bottom: 0;
height: 38px;
width: 34px;
top: 20px;
display: block;
border-style: solid;
border-color: lightgrey;
background-color: white;
cursor: pointer;
}
.boder {
position: relative;
margin-top: 4px;
margin-left: 4px;
display: block;
width: 22px;
height: 2px;
float: left;
border-radius: 1px;
box-sizing: border-box;
background-color: #888888;
}
#logo {
left: 5px;
}
#tit_tex {
left: 5px;
}
.navigation{
display: none;
}
.navigation{
display: block;
line-height: 50px;
float: none;
}
.navg{
float: none;
}
#f{
background-color: ghostwhite;
color: deepskyblue;
border-bottom-style: none;
border-left-style: solid;
border-width: 5px;
}
#fp{
background-color: ghostwhite;
}
.navg:hover{
background-color:ghostwhite;
color:deepskyblue;
border-bottom-style: none;
border-left-style: solid;
border-width: 4px;
}
.navg:active{
background-color:ghostwhite;
color: deepskyblue;
border-bottom-style: none;
border-left-style: solid;
border-width: 4px;
}
</style>
</head>
<body>
<nav id="title">
<button id='bodr' >
按我
</button>
<ul class="navigation">
<li id="home" class="navg"><a class='top_nav' id='h' href="#">HOME</a></li>
<li id="fp" class="navg"><a class='top_nav' id="f" href="#">FIRM PROFILE</a></li>
<li id="services" class="navg"><a class="top_nav" id="s" href="#">SERVICES</a></li>
<li id="projects" class="navg"><a class="top_nav" id="p" href="#">PROJECTS</a></li>
<li id="contact" class="navg"><a class="top_nav" id="c" href="#">CONTACT</a></li>
</ul>
</nav>
<script type='text/javascript'>
$(function () {
$('#bodr').click(function () {
$('.navigation').toggle();
})
})
</script>
</body>
</html>