jQuery菜单,导航与标签页
一:导航
网站导航栏是网站导航的第一层导航结构,我们可以使用HTML和jQuery来创建类似flash的动画效果
一:下拉式菜单
法一:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#bigdiv{ position:relative; text-align:left; width:450px;}
#header{ height:50px; color:#3FC;}
#menu{ position:absolute; height:50px; top:0; right:0;}
#menu ,#menu ul { padding:0px; margin:0px; list-style:none;}
#menu,#menu li{ float:left; background-color:#3F6; border-right:1px solid #CF6;}
#menu a{ display:block; padding:5px; color:#FFF; width:80px;}
#menu li ul { position:absolute; left:auto; width:80px;}
.active{ background-color:#F90;}
</style>
<script src="jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#menu li ul').hide();
$('#menu li').hover(
function(){
$(this).find('ul').slideDown('fast');
$(this).find('a:first').addClass('active');
},function(){
$(this).find('.ull').fadeOut('fast');
$(this).find('a').removeClass("active");
});
});
</script>
</head> <body>
<div id="bigdiv">
<div id="header">
<h1>下拉菜单</h1><hr />
</div>
<div id="content">
<ul id="menu">
<li>
<a href="#">年级</a>
<ul class="ull">
<li><a href="#">一年级</a></li>
<li><a href="#">二年级</a></li>
<li><a href="#">三年级</a></li>
</ul>
</li>
<li>
<a href="#">专业</a>
<ul class="ull">
<li><a href="#">计算机</a></li>
<li><a href="#">会计</a></li>
<li><a href="#">护士</a></li>
</ul>
</li>
<li>
<a href="#">扩展</a>
<ul class="ull">
<li><a href="#">扩展一</a></li>
<li><a href="#">扩展二</a></li>
<li><a href="#">扩展三</a></li>
</ul>
</li>
</ul>
</div>
</div> </body>
</html>
有毒的代码,哈哈
法二:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<style type="text/css">
#container {
position:relative; text-align:left; width:450px;
}
#header h1 {
height:45px;color:#00ff90;
}
#content {
padding:0 15px 10px 15px ;
}
#nav li {
text-align:center; float:left;list-style-type:none;
height:20px; width:60px; padding:3px; border-right:1px solid #fff;
background-color:#00ff90; background-position:center 30px;background-repeat:no-repeat;
display:block;
}
#nav ul {
padding:0px; margin:0px;
}
#li1, #li2, #li3 {
position:relative; z-index:100; display:block;
}
.navs {
display:none;
position:absolute;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#li1").mouseover(function () { $("#div1").show() })
$("#li1").mouseout(function () { $("#div1").hide() })
$("#li2").mouseover(function () { $("#div2").show() })
$("#li2").mouseout(function () { $("#div2").hide() })
$("#li3").mouseover(function () { $("#div3").show() })
$("#li3").mouseout(function () { $("#div3").hide() })
});
</script>
<!-- 设置了太多id而且代码也不简洁,希望能简化算法来实现,我想可以在移动到每一个li上的
时候为其下面的div添加一个class,通过这个class能实现下拉的效果。不知道能不能成--> </head>
<body>
<div id="container">
<div id="header">
<h1>网站导航</h1>
</div>
<div id="content">
<div id="nav">
<ul>
<li id="li1"><span>主页</span>
<div id="div1" class="navs">
<a href="#">主页1</a>
<a href="#">主页2</a>
<a href="#">主页3</a>
<a href="#">主页4</a>
</div>
</li>
<li id="li2"><span>目录</span>
<div id="div2" class="navs">
<a href="#">目录1</a>
<a href="#">目录2</a>
<a href="#">目录3</a>
<a href="#">目录4</a>
</div>
</li>
<li id="li3"><span>分类</span>
<div id="div3" class="navs">
<a href="#">分类1</a>
<a href="#">分类2</a>
<a href="#">分类3</a>
<a href="#">分类4</a>
</div>
</li>
<li><span>购物车</span>
</li>
</ul>
</div>
</div>
<br />
<p>这是一个下拉菜单,这是一段很low的代码我知道,如果你看到这儿,你要是有什么好建议,希望能联系我,做个朋友嘛</p>
</div>
</body>
</html>
真是有毒,啊哈哈00
二:可折叠菜单
可折叠的菜单的HTML结构与下拉式菜单的HTML结构大致相同,只是li标签没有使用float属性值left,所以是垂直显示的。
因为菜单是单击显示,在单击就隐藏菜单选项,所以不使用hover事件处理,而是使用toggle事件来处理。
三:手风琴菜单
二:标签页
jQuery也可以创建标签页用户界面,例如:网站主页切换显示主题的用户界面。
jQuery菜单,导航与标签页的更多相关文章
- 10款最新CSS3/jQuery菜单导航插件
这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...
- 分享21个基于jquery菜单导航的效果
jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- [置顶] JQuery实战总结三 标签页效果图实现
在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...
- JQuery实战总结三 标签页效果图实现
在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...
- Jquery实现的Tabs标签页
效果图: HTML: <div class="tabs"> <ul id="tabs"> <li class="tab- ...
- JQuery攻略(六)菜单导航
jQuery菜单导航的基础应用 此章节有 1.0 页面导航 1.01面包屑菜单 1.02菜单悬停 1.03菜单快捷键 1.04两个单独的菜单 1.05折叠菜单 1.01面包屑菜单 html <b ...
- Bootstrap入门(十二)组件6:导航标签页
Bootstrap入门(十二)组件6:导航标签页 1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单 先引入本地的CSS文件和JS文件(注:1. ...
- Bootstrap 导航元素(标签页)
[Bootstrap 导航元素] 1.基本的导航元素:标签导航.基于ul.li而来,给ul添加 class="nav nav-tabs" 即可.选中的li添加 class=&quo ...
随机推荐
- 每天一个Linux命令(28)df命令
报告文件系统磁盘空间的使用情况.获取硬盘被占用了多少空间,目前还剩下多少空间等信息. (1)用法: 用法: df [选项] [文件] (2)功能: 功能: 显示 ...
- 【leetcode刷题笔记】Merge k Sorted Lists
Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 题 ...
- IAR 条件断点
条件断点是IDE的一个重要功能,在IAR调试时候,经常跟踪一个数据,但是对较大的buffer,用普通的断点或live watch都不好跟踪. 比如某个buffer里一个数,我们知道他在第几个,但是却从 ...
- spring装配机制
spring容器创建bean并通过DI(依赖注入)来协调他们之间的关系,他有三种装配机制: 1. 在XML中显式配置 2. 在Java文件中显式配置 3. 隐式的bean发现机制(组件扫描)和自动装配 ...
- [算法]找到无序数组中最小的K个数
题目: 给定一个无序的整型数组arr,找到其中最小的k个数. 方法一: 将数组排序,排序后的数组的前k个数就是最小的k个数. 时间复杂度:O(nlogn) 方法二: 时间复杂度:O(nlogk) 维护 ...
- NLP-最小编辑距离
最小编辑距离 一 概念 编辑距离(Edit Distance),又称Levenshtein距离,是指两个字串之间,由一个转成另一个所需的编辑操作次数.最小编辑距离,是指所需最小的编辑操作次数. 编辑操 ...
- 大话设计模式--命令模式 Command -- C++实现实例
1. 命令模式: 将请求封装为一个对象,从而使你可以用不同的请求对客户进行参数化,对请求排队或记录请求日志,以及支持可撤销的操作. 命令模式有点: a. 较容易的设计一个命令队列 b. 在需要的的情况 ...
- spring mongodb 复制集配置(实现读写分离)
注:mongodb当前版本是3.4.3 spring连接mongodb复制集的字符串格式: mongodb://[username:password@]host1[:port1][,host2[: ...
- WCF寄宿(Host)之自我寄宿(Self-Hosting)简单实例【Console应用为宿主】
前言: 由于最近的项目 中需要用到WCF,所以又回头翻了翻,阅读了大量园中大神的博文,故而做个总结. 谬误之处,万望不吝指教! 闲话不叙! 一.寄宿(Host)WCF服务 1)一种是为一组WCF服务 ...
- linux命令学习笔记(0):man命令
Linux提供了丰富的帮助手册,当你需要查看某个命令的参数时不必到处上网查找,只要man一下即可. Linux的man手册共有以下几个章节: 代號 代表內容 使用者在shell中可以操作的指令或可执行 ...