zoukankan      html  css  js  c++  java
  • 使用Bootstrap创建响应式hamburger菜单

    In order to add responsive features to the navigation bar, the content to be collapsed must be wrapped in <div> with class “.collapse” and “.navbar-collapse”. The collapsed navigation bar actually is a button with class “.navbar-toggle” and two data- elements. One is data-toggle, and another one is data-target.

    Then we can add three <span> with class “.icon-bar” to create the "hamburger ".

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap hamburger</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid"> 
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">Switch Navigator</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Language</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        C# <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Winforms</a></li>
                        <li><a href="#">ASP.NET</a></li>
                        <li><a href="#">Xamarin</a></li>
                    </ul>
                </li>
    
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Python<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Django</a></li>
                        <li><a href="#">Spyder</a></li>
                        <li><a href="#">Pygame</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Java <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Java Web</a></li>
                        <li><a href="#">JDK</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        </div>
    </nav>
    
    </body>
    </html>

    The demo gif,

  • 相关阅读:
    [转]几个开源的.net界面控件
    电脑上设置对眼睛友好的绿豆沙色
    [转] C# 绘制报表,使用Graphics.DrawString 方法
    Excel 绘制图表,如何显示横轴的数据范围
    [转] C#中绘制矢量图形
    Chapter 3 Protecting the Data(3):创建和使用数据库角色
    续x奇数倍(n+2*x)暴力算法是冠军的算法结合数量
    新秀学习SSH(十四)——Spring集装箱AOP其原理——动态代理
    中国是大数据的人工智能的发源地
    采用shell脚本统计代码的行数
  • 原文地址:https://www.cnblogs.com/jizhiqiliao/p/12988259.html
Copyright © 2011-2022 走看看