伸缩导航菜JQ

原创 2016年05月30日 20:45:10

<style>
body{ font-family:Verdana, Geneva, sans-serif; font-size:12px; }
div,ul{ margin:0px; padding:0px;}
a{ text-decoration:none;}
ul,li{ list-style-type: none;}
.SubCategoryBox{ margin:10px auto; width:600px; border:#000 1px solid; padding-top:5px;}
.SubCategoryBox ul{ clear:both; display:block; margin-bottom:20px; height:135px;}
.SubCategoryBox li{ float:left; width:200px; text-align:center; height:24px; line-height:24px;}
.showmore{ margin:0px auto; width:200px; height:30px; line-height:30px; text-align:center; border:#ccc 1px solid; margin-bottom:10px;}
</style>
<script src="jquery-1.11.3.js" type="text/javascript" /></script>
<script>
$(function(){
  var $category=$('ul li:gt(5):not(:last)');
    $category.hide();
var $toggleBtn=$('div.showmore > a');
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide();
$('.showmore a span')
.css("background","url(img/down.gif) no-repeat 0 0")
.text("显示全部品牌");
$('ul li').removeClass("promoted");
}else{
$category.show();
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌");
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted");
}
return false;
})
})
</script>





<body>

<div class="SubCategoryBox">
  <ul>
    <li><a href="#">佳能</a><i>(30440)</i></li>
    <li><a href="#">索尼</a><i>(27220)</i></li>
    <li><a href="#">三星</a><i>(20808)</i></li>
    <li><a href="#">尼康</a><i>(17821)</i></li>
    <li><a href="#">松下</a><i>(12289)</i></li>
    <li><a href="#">卡西欧</a><i>(8242)</i></li>
    <li><a href="#">富士</a><i>(14894)</i></li>
    <li><a href="#">柯达</a><i>(9520)</i></li>
    <li><a href="#">宾得</a><i>(2195)</i></li>
    <li><a href="#">理光</a><i>(4114)</i></li>
    <li><a href="#">奥林巴斯</a><i>(12205)</i></li>
    <li><a href="#">明基</a><i>(1466)</i></li>
    <li><a href="#">爱国者</a><i>(3091)</i></li>
    <li><a href="#">其他品牌相机</a><i>(7275)</i></li>
  </ul>
  <div class="showmore">
    <a href="more.html"><span>显示全部品牌</span></a>
  </div>
</div>
</body>

相关文章推荐

html+ js+ jq+css导航条菜单的制作(水平,竖直,伸缩,带有动画效果等等。。。)

第一种导航菜单,最普通的:(竖直的) *{margin: 0;padding: 0;font-size: 14px;} ul{list-style: none;width:...

Discuz导航实现jq滑动

  • 2015年12月03日 11:08
  • 29KB
  • 下载

左侧伸缩式导航源码解析

我们这次分析的源码来自于站长素材 地址如下: http://sc.chinaz.com/jiaoben/150228195730.htm 效果图 建议大家去上面的地址里,自己看一下动态的效果。...

jQ波浪动画导航菜单

  • 2013年07月25日 16:41
  • 116KB
  • 下载

原生js和jquery分别实现伸缩菜单的制作-水平方向导航栏

原生javascript实现: 这一次要实现的是鼠标放上去以后,菜单栏被选中的那一栏水平拉伸,鼠标离开后水平收缩。并带有一定的时间性,使肉眼能够看出其拉伸收缩的动画效果。 开始用javascrip...

jQuery页面左侧伸缩下拉导航菜单

  • 2017年12月11日 14:25
  • 132KB
  • 下载

JQuery练习——伸缩的导航

最近在学习JQuery,尝试制作了这个导航 下载:代码 伸缩导航 导航卡1 子项目1 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:伸缩导航菜JQ
举报原因:
原因补充:

(最多只允许输入30个字)