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>

  

原文地址:https://www.cnblogs.com/max-hou/p/10945251.html

时间: 2024-10-14 21:41:54

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

自适应导航栏,菜单栏

1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 1 2 <link rel="stylesheet" href="css/common.min.css">  //调用外部CSS样式 common.min.css  写在 head 里 <link rel="stylesheet" href="css/okayNav.min.css">  

JS学习笔记(一): 使用原生JS 实现导航栏下多级分类弹出效果

在给静态页面静添加交互效果时遇到的问题 : 鼠标划入二级菜单时 一级菜单样 ":hover" 式无法保持 情景如下: 解决思路: 利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li.app_jd a:hover,li.app_jd a.hover{ background-position: -126px -397px; } li.serv

2017-3-30 Js实现导航栏,选项卡,图片轮播的制作

(一)导航栏的制作 显示的效果: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type=&quo

JS对于导航栏、下拉菜单以及选项卡的切换操作、大图轮播(主要练习对于样式表的操作)

1.导航拦以及下拉菜单 css样式表代码 .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; } .div1-div { width: 100%; height: 400px; background-color: green; margin-top: 30px; display: none; } JS脚本代码 <!DOCTYPE html> <html xm

js实现导航栏的吸顶操作

1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 3 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 5 <html> 6 <head> 7 <style type="text/css&

原生js实现导航栏吸顶

实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function () { var scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的垂直偏移 if (scrollT > xx) { //xx为临界的垂直位移值 //修改导航栏的样式,让他呈现吸顶的状态 主要

js滚动到指定位置导航栏固定顶部

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0;} .banner{height: 250px; width: 100%; bac

外贸建站之网站导航栏菜单高亮JS实现代码分享

外贸建站之网站导航栏菜单高亮JS实现代码分享,今天客户要给CAN Clip加一个菜单高亮的效果,原本打算用PHP代码实现,但是感觉过于复杂,JS有更好的解决方案, 这里把我们开发的代码分享给大家. 1 var urlstr = location.href; 2 var urlstatus=false; 3 var urlnum = 1; 4 $("#navbar a").each(function () { 5 if ((urlstr + '/').indexOf($(this).at

外贸建站之导航栏NAV菜单监听JS处理代码

外贸建站之导航栏NAV菜单监听JS处理代码 1 var persistclose=1 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session 2 var startX = 30 //set x offset of bar in pixels 3 var startY = 5 //set y offset of bar in pixels 4 var ve