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. 【Python之路】特别篇--微信Web网页版通信的全过程分析

    文章所使用Python版本为py3.5 1.微信服务器返回一个会话ID 微信Web版本不使用用户名和密码直接登录,而是采用二维码登录,所以服务器需要首先分配一个唯一的会话ID,用来标识当前的一次登录. ...

  2. useradd/usermod/userdel/passwd/groupadd/groupmod/groupdel/gpasswd

    用户 用户系统也是通过一个文件来管理的,默认的root用户id是0, shadow文件说明 加密算法类别 $后面的数字6指定了加密算法使用的是第六种,sha512加密 增加用户,修改成同样的密码,查看 ...

  3. 图论小专题B

    2 树 2.1 树的定义 一个只有\(N-1\)条边,且任意两个点连通的图叫做树.通过这样定义的树往往是一棵无根树,而我们通常会任意选定一个根节点使其变成有根树.有根树可以定义"父亲和儿子& ...

  4. bzoj5457

    城市 HYSBZ - 5457 有n座城市,m个民族.这些城市之间由n-1条道路连接形成了以城市1为根的有根树.每个城市都是某一民族的聚居 地,Master知道第i个城市的民族是A_i,人数是B_i. ...

  5. [51nod1789] 跑得比谁都快

    题面 题解 设\(f[i]\)为根节点到\(i\)的最小耗时 设\(S\)为\(i\)的祖先集合, 可以得到 \[ f[i] = min(f[j] + (i - j)^p),j \in S \] 对于 ...

  6. 在CUDA8.0下指定位置编译安装OpenCV3.1.0来实现GPU加速(Compiling OpenCV3.1.0 with CUDA8.0 support)

    在CUDA8.0下指定位置编译安装OpenCV3.1.0 一.本人电脑配置:ubuntu 14.04, NVIDIA GTX1060. 二.编译OpenCV3.1.0前,读者需要成功安装CUDA8.0 ...

  7. java线程基础方法详解

    一.线程状态转换 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于可运行线程池中,变得可运行 ...

  8. mui.toast样式风格及位置修改教程

    mui.toast样式风格及位置修改教程 使用了mui.toast来实现可自动消失的信息提示效果. 但默认的显示效果太差了,很不显示,而且是在底部的. 如下图: 想改到屏幕的中间位置,再改大一点. 但 ...

  9. chattr +i 锁定文件

    reboot machine, 查看DNS服务器配置文件\etc\resolv.conf, 里面的内容变回原来的样子. 原因是resolv.conf文件被系统程序自动维护.为了防止该文件被跟改,可以为 ...

  10. chrome中如何查看元素的hover事件

    chrome中如何查看元素的hover事件 一.总结 一句话总结: Elements->Styles里面可以看到":hov":点开选择":hover"就可 ...