zoukankan      html  css  js  c++  java
  • 自适应导航栏,菜单栏

    1. 打开 https://github.com/VPenkov/okayNav 下载源代码 

    2.引入两个css样式

    1
    2
    <link rel="stylesheet" href="css/common.min.css">  //调用外部CSS样式 common.min.css  写在 head 里
     
    <link rel="stylesheet" href="css/okayNav.min.css">  //调用外部CSS样式 okayNav.min.css  写在 head 里

    3.引入两个JS样式

    1
    <script src="https://code.jquery.com/jquery-2.2.3.min.js">  //jquery插件脚本 https://code.jquery.com/jquery-2.2.3.min.js这个是js文件 这段写在了 body 里
     
    </script>    //</script 是 javascript结束标签 一定要写>
    1
    <script src="js/jquery.okayNav-min.js">    写在了 body 里
     
    </script>        //</script 是 javascript结束标签 一定要写>   

    4.添加导航栏主体代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <header id="header">
    <a class="site-logo" href="#">
       Logo
    </a>
     
    <nav role="navigation" id="nav-main" class="okayNav">  //这里的 nav 用于表示导航
     
        <ul>
            <li><a href="#">主页</a></li>  //"#"在这里是不起作用的 占位符
            <li><a href="#">一</a></li>
            <li><a href="#">二</a></li>
            <li><a href="#">三</a></li>
            <li><a href="#">四</a></li>
            <li><a href="#">五</a></li>
            <li><a href="#">六</a></li>
        </ul>
     
    </nav>  //导航的 结束标签
    </header>

    5.添加一段初始化代码

    1
    2
    3
    <script type="text/javascript">
            var navigation = $('#nav-main').okayNav();
    </script>

    完整代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <html>
        <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/common.min.css">
        <link rel="stylesheet" href="css/okayNav.min.css">
        </head>
        <body>
         
            <header id="header">
            <a class="site-logo" href="#">
               Logo
            </a>
             
            <nav role="navigation" id="nav-main" class="okayNav">
                <ul>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">一</a></li>
                    <li><a href="#">二</a></li>
                    <li><a href="#">三</a></li>
                    <li><a href="#">四</a></li>
                    <li><a href="#">五</a></li>
                    <li><a href="#">六</a></li>
                </ul>
            </nav>
            </header>
         
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <script src="js/jquery.okayNav-min.js"></script>
        <script type="text/javascript">
            var navigation = $('#nav-main').okayNav();
        </script>
        </body>
    </html>
  • 相关阅读:
    Ext Js MVC系列二 利用Application和Viewport进行应用程序初始化和页面布局
    LINQ to Sql系列一 增,删,改
    Ext Js MVC系列一 环境搭建和MVC框架整体认识
    LINQ to Sql系列四 性能优化总结
    SQL基础回顾系列一 单表查询(select语句)
    JSON详解
    公用类库(4) 缓存操作类CacheUtil
    架构设计考虑的问题(出自代码大全II)
    .net自动更新组件Ant
    .net socket在win2008下的吞吐性能报告
  • 原文地址:https://www.cnblogs.com/lsyw/p/10947274.html
Copyright © 2011-2022 走看看