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. mysql 主从复制不一致，不停库不锁表恢复主从同步

    注意: 进行此操作时,确认在之前已经开启了MySQL的bin-log日志,如果没有则无法实现 为了安全考虑,我们授权一个用户进行数据备份: [root@7con ] mysql -uroot -p m ...

  2. 【转】pe结构详解

    (一)基本概念 PE(Portable Execute)文件是Windows下可执行文件的总称,常见的有DLL,EXE,OCX,SYS等, 事实上,一个文件是否是PE文件与其扩展名无关,PE文件可以是 ...

  3. Luogu P4109 [HEOI2015]定价 贪心

    思路:找规律?$or$贪心. 提交:1次 题解: 发现:若可以构成$X0000$,答案绝对不会再在数字最后把$0$改成其他数: 若可以构成$XX50...0$更优. 所以左端点增加的步长是增加的($i ...

  4. generator如何使用

    把包安装好,然后配好,然后运行就可以了

  5. DPC究竟是什么

    DPC究竟是什么 DPC是“Deferred Procedure Call”的缩写,意为推迟了的过程(函数)调用.这是因为,逻辑上应该放在中断服务程序中完成的操作并非都是那么紧迫,其中有一部分可能相对 ...

  6. Neo4j 简介 2019

    Neo4j是一个世界领先的开源图形数据库,由 Java 编写.图形数据库也就意味着它的数据并非保存在表或集合中,而是保存为节点以及节点之间的关系. Neo4j 的数据由下面几部分构成: 节点边属性Ne ...

  7. 转：后置处理器JSON Extractor 提取json的多个值

    json串 []表示对象组成的数组,{}表示对象. 对象里包含多个 "属性":属性值.属性值可以是值,或数组,或对象. JSON Extractor使用json path表达式匹配 ...

  8. js中的DOM对象和jQuery对象的比较

    1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...

  9. 由 Vue 中三个常见问题引发的深度思考

    为什么 data 要写成函数,而不允许写成对象? Vue 中常说的数据劫持到底是什么? Vue 实例中数组改变 length 或下标直接赋值什么不能更新视图? http://www.sohu.com/ ...

  10. 使用selenium IDE 等一系列需要下载的东西的地址

    转载来自:http://blog.csdn.net/u012246342/article/details/53005730 selenium 官网 IDE 等一系列 下载地址:http://www.s ...