可伸缩的超酷导航菜单_菜单导航

可伸缩的超酷导航菜单: 发布时间：2020-02-07编辑：脚本学堂

可展开，可隐藏的产品分类列表，默认显示部分重要的产品分类，如果想查看全部产品分类，点击下侧的导航就可以全部展开。此特效比较经济实用，呵呵。

<!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>
    <title>可设置显隐和高亮显示的内容列表样式</title>
    <FCK:meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <style type="text/css">
    *{color:#333;font-size:12px;padding:0px;margin:0px;}
    a{color:#333;}
    li{padding:0px;margin:0px;list-style:none;}
    .SubCategoryBox{float:left;margin:10px;width:500px;height:auto;padding:10px;border:1px solid #666;}
    .SubCategoryBox ul{display:block;width:498px;}
    .SubCategoryBox ul li{width:120px;text-indent:20px;text-align:left;float:left;height:30px;<a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>:30px;}
    .promoted{color:red;}
    .showmore{display:block;float:left;text-align:center;width:498px;height:25px;}
    .showmore a{margin:0 auto;background:#F2F2F2;display:block;border:1px solid #999;width:100px;height:22px;text-decoration:none;line-height:22px;}
    </style>
    <script src="/source/js/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>-1.6.2.min.js" type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>"></script>
    <script type="text/javascript">
$(document).ready(function(){
	var $category = $('ul li:gt(10):not(:last)'); //获取ul下索引值大于10的li元素的集合元素，然后去掉集合元素中的最后一个元素
	$category.hide(); //隐藏上面获取到的对象
	var $toggleBtn = $('div.showmore > a'); //获取“显示全部品牌”的按钮
	$toggleBtn.toggle(function() { //toggle()方法用来交替一组动作
		$category.show(); //显示全部品牌
		$('.showmore a span').css("color", "red").text("精简显示品牌"); //这里使用的链式操作
		$('ul li').filter(":contains('索尼'),:contains('三星')") //filter()筛选出符合要求的品牌，然后为他们添加promoted样式
		.addClass("promoted"); //添加高亮样式
		return false; //<a href=http://www.jb200.com/zt/chaolianjie/ target=_blank class=infotextkey>超链接</a>不跳转
	},
	function() {
		$category.hide();
		$('.showmore a span').css("color", "#333").text("显示全部品牌");
		$('ul li').removeClass("promoted"); //去掉高亮样式
	});
});
</script>
    </head>
    <body>
    <div class="SubCategoryBox">
    <ul>
    <li>索尼</li>
    <li>三星</li>
    <li>索尼</li>
    <li>三星</li>
    <li>索尼</li>
    <li>三星</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>佳能</li>
    <li>其他品牌相机……</li>
    </ul>
    <div class="showmore">
    <a href="#" _fcksavedurl="#"><span>显示全部品牌</span></a>
    </div>
    </div>
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：简单实用的滑动门导航菜单(jquery实现)
下一篇：简洁大方的二级下拉菜单

与可伸缩的超酷导航菜单有关的文章

本文标题：可伸缩的超酷导航菜单
本页链接：http://www.jb200.com/tx/34.html

浏览排行

栏目分类

热点文章

可伸缩的超酷导航菜单