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. enum枚举变量

    如果一个变量你需要几种可能存在的值,那么就可以被定义成为枚举类型.之所以叫枚举就是说将变量或者叫对象可能存在的情况也可以说是可能的值一一例举出来. 一个铅笔盒中有一支笔,但在没有打开之前你并不知道它是 ...

  2. kafka什么时候会丢消息（转）

    因为在具体开发中某些环节考虑使用kafka却担心有消息丢失的风险,本周结合项目对kafka的消息可靠性做了一下调研和总结: 首先明确一下丢消息的定义.kafka集群中的部分或全部broker挂了,导致 ...

  3. 2、CString与string借助char *互转

    CString是MFC中的类,MFC前端界面中获得的字符串是CString类.标准C/C++库函数是不能直接对CString类型进行操作的. string是C++中的类. 安全性 CString &g ...

  4. clone([Even[,deepEven]])克隆匹配的DOM元素并且选中这些克隆的副本。

    clone([Even[,deepEven]]) 概述 克隆匹配的DOM元素并且选中这些克隆的副本. 在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用. 参数 EventsBooleanV ...

  5. 第四届西安邮电大学acm-icpc校赛 猜球球

    题目描述 六一到了,为了庆祝这个节日,好多商家都推出了很多好玩的小游戏.Tongtong看到了一个猜球球的游戏,有n种除了颜色之外完全相同的球,商家从中拿出来一个球球放到了箱子里,已知第i种颜色的球出 ...

  6. MySQL| MySQL关键字和保留字

    MySQL 5.5 Keywords and Reserved Words The following list shows the keywords and reserved words in My ...

  7. LVS之ipvsadm命令

    目录: 安装 基本描述 用法 命令选项 示例 [安装] 可使用yum安装或者从官网下载安装包源码安装,两种方式皆可 先检查是否已经安装ipvsadm [root@v_machine1 ~]# yum ...

  8. Android input输入框 移动页面input手机键盘中的“搜索”按键

    动页面input手机键盘中的“搜索”按键 满足以下几点机即可: input type="search"    放到form标签中    使用action属性 <form ac ...

  9. [MyBatis]最简MyBatis工程

    下载地址:https://files.cnblogs.com/files/xiandedanteng/fillMillionDatum01_191005.rar --END-- 2019年10月5日1 ...

  10. Kbengine游戏引擎-【4】demo-kbengine_unity3d_demo 在容器docker上安装测试

    git地址:https://github.com/kbengine/kbengine_unity3d_demo Demo中文地址:https://github.com/kbengine/kbengin ...