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

最新推荐文章于 2025-07-27 10:33:01 发布

原创最新推荐文章于 2025-07-27 10:33:01 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css html jquery 手风琴下拉菜单

下拉菜单手风琴 css jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及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>