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>
    

      

  • 相关阅读:
    java练习生
    java练习生
    java练习生
    java练习生
    java练习生
    sqlserver 将表转为java实体类型
    linux下部署.net core/java
    Java根据经纬度计算两点之间的距离
    Docker学习——Kubernetes(八)
    Docker学习——Docker 三剑客(七)
  • 原文地址:https://www.cnblogs.com/max-hou/p/10945251.html
Copyright © 2011-2022 走看看