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>
    

      

  • 相关阅读:
    Server08 R2 Live Migration 测试 Part 6:使用SCVMM 2008 R2进行Live Migration
    Workstation 可成功安装ESX但发现不到本地存储的解决方法
    代码生成器ltscode2.1
    2010面试攻略
    我看代码生成
    程序员如何提高工作效率
    PE格式全分析
    Quartz.NET 2.0 学习笔记(4) :cron表达式
    asp.net 2.0 访问 MySQL 数据库
    My blog.
  • 原文地址:https://www.cnblogs.com/max-hou/p/10945251.html
Copyright © 2011-2022 走看看