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

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

    2.引入两个css样式

    	<link rel="stylesheet" href="css/common.min.css">
    	<link rel="stylesheet" href="css/okayNav.min.css">
    

    3.引入两个JS样式

    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>//jquery插件脚本
    <script src="js/jquery.okayNav-min.js"></script>

    4.添加导航栏主体代码

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

    5.添加一段初始化代码

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

    完整代码

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

      

  • 相关阅读:
    Windows统一平台: 开发小技巧
    How to install more voices to Windows Speech?
    Why does my ListView scroll to the top when navigating backwards?
    中文圣经 for Android
    [ CodeVS冲杯之路 ] P1166
    [ CodeVS冲杯之路 ] P1154
    [ CodeVS冲杯之路 ] P1048
    [ CodeVS冲杯之路 ] P1063
    [ CodeVS冲杯之路 ] P3027
    理解矩阵乘法
  • 原文地址:https://www.cnblogs.com/max-hou/p/10945251.html
Copyright © 2011-2022 走看看