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>

　　

JS自适应导航栏,菜单栏的更多相关文章

  1. js动态控制导航栏样式

    导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用js动态添加 <div class="box_left fl"> < ...

  2. JS面向对象方法（一）： 使用原生JS 实现导航栏下多级分类弹出效果

    利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...

  3. js实现导航栏的吸顶操作

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. 原生js实现导航栏吸顶

    实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...

  5. 基于Bootstrap、Jquery的自适应导航栏

    css代码: .kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;backgr ...

  6. js滑动导航栏点击后居中效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  8. jquery mobile 的手指上下滑动文章、导航栏

    导航栏的js设置 <!--导航栏的滚动 --> <script type="text/javascript"> var myScroll, pullDown ...

  9. React-Native 之 GD （二）自定义共用导航栏样式

    1.自定义导航栏样式 步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Naviga ...

随机推荐

  1. C# ado.net oledb方式连接(三)

    oledb 方式连接 class Program { private static string constr = "server=.;database=northwnd;integrate ...

  2. 【细谈Java并发】谈谈LinkedBlockingQueue（转）

    最近在看concurrent包的知识,看到LinkedBlockingQueue,发现一篇好文推荐给大家.原文地址:[细谈Java并发]谈谈LinkedBlockingQueue 1.简介 上篇我们介 ...

  3. oracle汉字排序

    oracle在9i之前是对汉字的排序是按照二进制编码进行排序的,很不适合我们的国情,在oracle9i之后,汉字的排序方式有了以下三种方式:        1.使用拼音排序   NLS_SORT=SC ...

  4. assert 笔记

    目录 什么是assert? assert使用 assert错误使用 什么是assert? Python 的 assert 语句是一个 debug 的好工具,主要用于测试一个条件是否满足.如果测试的条件 ...

  5. 什么是挂载？mount的用处在哪？

    关于挂载的作用一直不是很清楚,今天在阅读教材时看见了mount这个命令,发现它的用处很隐晦但非常强大.奈何教材说的不明朗,因此在网上整合了一些优秀的解释,看完之后豁然开朗. 1.提一句Windows下 ...

  6. Manacher 算法学习小记

    概要 一个字符串有多少个回文的字串?最多有 \(O(n^2)\) 级别个.但 Manacher 算法却可以用 \(O(n)\) 的时间复杂度解决这个问题.同时 Manacher 算法实现非常简单. 一 ...

  7. linux上安装openssl的步骤

    需要准备  openssl 稳定版文件: 从openssl官网下载最新的稳定版本,https://www.openssl.org/source/ 当前的稳定版是 openssl-fips-2.0.16 ...

  8. Zookeeper系列（十三）Zookeeper的请求处理

    作者:leesf    掌控之中,才会成功:掌控之外,注定失败. 出处:http://www.cnblogs.com/leesf456/p/6179118.html尊重原创,奇文共欣赏: 一.前言 在 ...

  9. shell 拾遗

    1, 按照行读取文件 while read line do echo ${line} done < ${filename} 2.循环中使用命令输出 while read line do echo ...

  10. 在 bat 批处理中运行多次 mvn

    在 bat 中运行 mvn 命令会出现这种情况,构建命令执行完成后会停留在的 mvn.bat 中,必需手工输入 exit 后,才会回到原来的脚本中继续运行.这是怎么回事? 到 maven 的安装目录下 ...