用css和jquery写一个手风琴式的下拉菜单

soyomo

浏览: 22309 次

最近访客更多访客>>

enwei

sbwfgihc

wndlmu

Lover_IT

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

下拉菜单手风琴 css jquery

css html jquery 手风琴下拉菜单

闲话少说，直接上代码

<!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>

分享到：