使用jQuery实现图书菜单导航栏

案例：

一、首先我们先写一个HTML布局

<html><head><meta charset="utf-8"><title></title></head><body><div id="main"><div id="head"><h2>图书分类</h2><span id="pic" index="0"></span></div><div id="body"><div id="content"><ul><li><a href="#">小说</a><i>(1110)</i></li><li><a href="#">文艺</a><i>(2350)</i></li><li><a href="#">青春</a><i>(1985)</i></li><li><a href="#">少儿</a><i>(1102)</i></li><li><a href="#">生活</a><i>(2350)</i></li><li><a href="#">社科</a><i>(5684)</i></li><li><a href="#">管理</a><i>(1256)</i></li><li><a href="#">计算机</a><i>(2135)</i></li><li><a href="#">教育</a><i>(3120)</i></li><li><a href="#">工具书</a><i>(4213)</i></li><li><a href="#">引进版</a><i>(1752)</i></li><li><a href="#">其他类</a><i>(9872)</i></li></ul></div><div id="foot"><a href="">简化☚</a></div></div></div></body>
</html>

二、接下来我们来写css的布局

 * {margin: 0px;padding: 0px;}ul li {list-style: none;}#main {width: 300px;height: 250px;margin: 20px auto;}#head {width: 300px;height: 50px;background-color: darkgrey;border: 1px black solid;float: left;}#head h2{float: left;font-size: 18PX;padding-top: 14px;width: 200px;margin-left: 10px;}#pic {display: block;background: url(../img/pic.png);width: 25px;float: right;height: 12.5px;margin-top: 20px;}#body{border: black 1px solid;width: 300px;height: 200px;}#content ul li {float: left;width: 80px;font-size: 2px;margin-left: 10PX;margin-top: 10PX;}#content ul li a {color: #000000;}#foot {float: right;clear: both; /* 不浮动 */}

三、在HTML里引入css布局（link）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/图书菜单导航栏.css"/></head><body></body>
</html>

四、引入JQ类库---书写代码

用if...else结构书写点击 " 简化☚ " ，图书分类收起至五个（前四个+最后一个）。
点击 " 更多" ，图书分类展开至全部。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script src="js/JQuery.js"></script><script type="text/javascript">$(function(){$("#pic").click(function(){var index = $(this).attr("index");if (index == 0) {//修改图标$(this).css("background","url(img/pic.png)");$(this).css("margin-top","20px");$(this).attr("index","1");//让内容隐藏$("#body").slideUp(1000);} else{//修改图标$(this).css("background","url(img/pic.png)0 12.5px");$(this).css("margin-top","24px");$(this).attr("index","0");//让内容显示$("#body").slideDown(1000);}});$("#foot>a").click(function(){//判断li是否是隐藏if($("#content>ul>li").is(":hidden")){//是隐藏就显示$("#content>ul>li").fadeIn(1000);$(this).text("简化☚");return false;}else{//不是隐藏就隐藏$("#content>ul>li:gt(4)").not(":last").fadeOut(1000);$(this).text("更多");return false;}});});</script></body>
</html>

整体代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/图书菜单导航栏.css"/></head><body><div id="main"><div id="head"><h2>图书分类</h2><span id="pic" index="0"></span></div><div id="body"><div id="content"><ul><li><a href="#">小说</a><i>(1110)</i></li><li><a href="#">文艺</a><i>(2350)</i></li><li><a href="#">青春</a><i>(1985)</i></li><li><a href="#">少儿</a><i>(1102)</i></li><li><a href="#">生活</a><i>(2350)</i></li><li><a href="#">社科</a><i>(5684)</i></li><li><a href="#">管理</a><i>(1256)</i></li><li><a href="#">计算机</a><i>(2135)</i></li><li><a href="#">教育</a><i>(3120)</i></li><li><a href="#">工具书</a><i>(4213)</i></li><li><a href="#">引进版</a><i>(1752)</i></li><li><a href="#">其他类</a><i>(9872)</i></li></ul></div><div id="foot"><a href="">简化☚</a></div></div></div><script src="js/JQuery.js"></script><script type="text/javascript">$(function(){$("#pic").click(function(){var index = $(this).attr("index");if (index == 0) {//修改图标$(this).css("background","url(img/pic.png)");$(this).css("margin-top","20px");$(this).attr("index","1");//让内容隐藏$("#body").slideUp(1000);} else{//修改图标$(this).css("background","url(img/pic.png)0 12.5px");$(this).css("margin-top","24px");$(this).attr("index","0");//让内容显示$("#body").slideDown(1000);}});$("#foot>a").click(function(){//判断li是否是隐藏if($("#content>ul>li").is(":hidden")){//是隐藏就显示$("#content>ul>li").fadeIn(1000);$(this).text("简化☚");return false;}else{//不是隐藏就隐藏$("#content>ul>li:gt(4)").not(":last").fadeOut(1000);$(this).text("更多");return false;}});});</script></body>
</html>

效果演示：

使用jQuery实现图书菜单导航栏相关推荐

Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
左侧菜单导航栏的实现
一直困惑左侧菜单导航栏怎么实现的,不过在学过jQuery库后,可以简单的代码就能实现类似于京东,淘宝的左侧菜单导航栏了. 下面是实例代码: <!DOCTYPE html> <html ...
html5 css3左侧多级菜单,modernizr.custom.js制作html5 CSS3多级层叠侧边菜单导航栏
特效描述:modernizr.custom.js html5CSS3 多级层叠侧边菜单导航栏.CSS3多级层叠菜单代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 All Categ ...
html左侧导航菜单多级,css3多级菜单导航栏、侧边菜单栏
一.简单的导航栏首先通过一个入门级的导航栏来练习一下 1.先布局好html的结构 2.通过css样式得到想要的导航效果上面第一个例子让大家简单的了解了菜单栏的原理,在不同过js的情况下,就可以轻松 ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
html左边多级菜单导航栏,精美的多级侧边栏导航菜单jQuery插件
这是一款基于bootstrap的精美多级侧边栏导航菜单jQuery插件.该导航菜单在bootstrap样式的基础上,通过jQuery来为导航菜单绑定菜单点击事件,生成非常漂亮的多级侧边栏导航菜单. 使 ...
使用JQuery实现淘宝导航栏效果
我们要实现一个淘宝导航栏的效果,先看一下运行效果要实现这个效果的话我们第一步首先要 1.div布局设id <div id="context"><div id= ...
html 中怎么写二级导航,html二级菜单导航栏成品
html 高级二级导航菜单代码如下: #menu { width: 600px; font-family: Arial; font-size: 15px; } #menu ul { display: ...
状态输出导航栏html,css3与html5实现响应式导航菜单(导航栏)效果分享
此方法可以应用到有特别多的链接菜单项目中,特别在移动项目中,它可以将所有菜单转换成一个按钮式的下拉菜单. HTML 示例中有一个导航菜单的html结构,元素用来定位导航菜单,.current表示当前活 ...

使用jQuery实现图书菜单导航栏

使用jQuery实现图书菜单导航栏相关推荐

最新文章

热门文章