`

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

 

分享到:
评论

相关推荐

    jQuery飘带式垂直手风琴下拉菜单

    下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉菜单。 HTML代码 由于使用了bootstrap框架,因此其HTML结构也需要一致,代码如下: [......] 阅读全文&gt;&gt;

    CSS3带小图标的手风琴下拉菜单

    对于网页菜单来说,我们用得最多的虽然还是横向主菜单,但是在系统后台中,手风琴下拉菜单还是用得十分广泛的。之前我们也介绍过一些使用的jQuery和CSS3垂直手风琴菜单,比如这款炫酷实用的CSS3 3D垂直手风琴菜单和...

    jQuery手风琴滑动下拉菜单代码.zip

    总结来说,jQuery手风琴滑动下拉菜单的实现主要依赖于jQuery库,通过`.slideToggle()`方法实现动画效果,结合CSS样式进行美化和控制。通过深入理解这些核心概念,开发者可以灵活地调整和定制自己的手风琴菜单,以...

    jQuery手风琴下拉菜单代码.zip

    jQuery手风琴下拉菜单是一种常见的交互式菜单设计,它通过折叠和展开的效果,使得大量菜单项在有限的空间内展示得井井有条。本文将深入探讨jQuery实现手风琴下拉菜单的原理及其实现代码。 首先,我们来理解手风琴...

    jQuery垂直手风琴多级下拉菜单代码

    在网页设计中,交互性和用户体验是至关重要的因素之一,而jQuery垂直手风琴多级下拉菜单代码就是为了提升这方面体验的实用工具。这种菜单设计模式能够有效地组织和展示复杂的信息结构,尤其适用于导航条和侧边栏菜单...

    jQuery多级下拉垂直手风琴代码.zip

    "jQuery多级下拉垂直手风琴代码"就是一个典型的示例,它利用jQuery的功能来创建一种特殊的导航菜单,即多级下拉垂直手风琴效果。这种效果使得用户能够在一个有限的空间内浏览层次分明的大量信息,提高用户体验。 ...

    基于jQuery和Bootstrap的垂直手风琴下拉菜单

    今天我们要为大家分享一款基于jQuery和Bootstrap的垂直手风琴下拉菜单,因为它是Bootstrap风格的,所以外观上绝对可以称得上完美。另外,菜单项在展开的时候,菜单项的内容将会以飞入的动画特效展示出来,同时菜单项...

    jquery竖直手风琴菜单收缩展示下拉菜单

    在网页设计中,jQuery竖直手风琴菜单是一种常见的交互元素,它允许用户通过点击菜单项来展开或收缩子菜单,以节省空间并提供良好的用户体验。这种效果在内容丰富的网站中特别受欢迎,因为它使得导航更加直观和高效。...

    jQuery垂直手风琴折叠下拉菜单代码

    这个项目的重点在于使用jQuery实现手风琴折叠下拉菜单。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互。在这个项目中,jQuery被用来监听用户的点击事件,控制菜单的展开与收缩,并...

    CSS3手风琴下拉菜单 支持多菜单展开

    这又是款基于CSS3的下拉菜单,...今天的这款CSS3手风琴菜单也类似,菜单具有3种模式,一种是同时展开多个菜单,一种是只能同时展开一个菜单,还有一种是可以默认展开一个菜单。应该说,这款CSS3手风琴菜单非常的实用。

    简单的多级垂直手风琴下拉列表菜单

    本文将深入探讨如何利用CSS和jQuery库创建一个简单的多级垂直手风琴下拉列表菜单。 首先,我们来看标题“简单的多级垂直手风琴下拉列表菜单”。这里的“多级”指的是菜单可以包含多个层次,如主菜单、子菜单、孙...

    基于jQuery和Bootstrap的手风琴垂直菜单

    之前我们分享过很多手风琴样式的jQuery插件和CSS3应用,同时也有手风琴式的菜单,比如CSS3垂直手风琴折叠菜单和CSS3手风琴下拉菜单 支持多菜单展开,另外也有手风琴式的图片切换,比如最近介绍的jQuery横向手风琴...

    jQuery实现多级手风琴树形下拉菜单multi_menu.rar

    本项目“jQuery实现多级手风琴树形下拉菜单multi_menu.rar”就是一个典型的例子,它允许用户轻松创建具有动画效果的多级手风琴式下拉菜单,提升了用户在浏览网站时的导航体验。 手风琴菜单是一种常见的UI设计模式,...

    jQuery垂直手风琴折叠下拉菜单代码.zip

    总结起来,"jQuery垂直手风琴折叠下拉菜单代码"是一个实用的资源,它演示了如何使用jQuery和CSS创建一个交互式的下拉菜单。开发者不仅可以直接应用到自己的项目中,也可以学习并理解其中的实现原理,为今后的开发...

    jQuery垂直手风琴多级下拉菜单代码.zip

    本篇文章将深入探讨一个基于jQuery实现的垂直手风琴多级下拉菜单的代码,帮助开发者理解其工作原理和实现方式。 首先,我们要明确jQuery是一种轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax...

    导航菜单,下拉菜单,手风琴菜单,JS下拉菜单,jQuery下拉菜单,导航下拉菜单特效

    本文将深入探讨“导航菜单”、“下拉菜单”、“手风琴菜单”以及它们在JavaScript(JS)和jQuery中的实现,同时也会介绍相关的特效。 首先,让我们了解“导航菜单”。导航菜单通常位于网页的顶部或侧边,它列出了...

    jQuery手风琴滑动下拉菜单展开收缩代码

    本案例中,我们探讨的是"jQuery手风琴滑动下拉菜单展开收缩代码",这是一种常见的交互式菜单设计,常用于网站的左侧导航栏,以节省空间并提供良好的用户体验。 首先,手风琴菜单的原理是利用jQuery的slideToggle()...

    CSS3左侧手风琴菜单效果.zip

    &lt;!... &lt;... &lt;head&gt; ...meta charset="UTF-8"&gt;...jQuery左侧手风琴菜单代码 &lt;...link rel="stylesheet" type="text/css... 这是一个CSS3左侧手风琴菜单效果,需要的朋友可以直接下载使用,更多特效代码尽在PHP中文网。

Global site tag (gtag.js) - Google Analytics