伸缩导航菜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:...
  • ITzhongzi
  • ITzhongzi
  • 2016年07月12日 15:28
  • 1779

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

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

html用js实现导航栏的二级菜单,自动伸缩。。。

效果图::、 代码如下:: 动画菜单 * { margin: 0; padding: 0; font-size: 14px; } a { color: #3...
  • ITzhongzi
  • ITzhongzi
  • 2016年07月12日 16:09
  • 4844

伸缩JQ

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">可伸缩块p,div{mar...
  • qtvb1987
  • qtvb1987
  • 2010年01月21日 13:15
  • 606

伸缩布局案例-携程

放大: 伸缩布局的相关知识点: flex:none | flex-grow '> flex-shrink >'? || flex-basis '> none: none关键字的计算值为...
  • irouduoduo
  • irouduoduo
  • 2017年05月01日 16:13
  • 313

左侧伸缩式导航源码解析

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

一个简单地可伸缩左侧导航栏

效果图 left.html 设备预约
  • world_er
  • world_er
  • 2015年12月23日 13:45
  • 3444

可伸缩右侧边栏导航菜单

体验效果:http://keleyi.com/keleyi/phtml/jqmenu/3.htm 完整代码: 侧边固定栏导航菜单-柯乐义 侧边固定栏导航菜单" /> 侧...
  • sweetyhyh
  • sweetyhyh
  • 2017年05月09日 15:54
  • 1106

用jQuery实现具有伸缩功能的动画图片

chainning code
  • kongcheng_001
  • kongcheng_001
  • 2015年08月14日 15:01
  • 663

jquery特效-鼠标点击上下伸缩式菜单

jquery特效-鼠标点击上下伸缩式菜单             *{padding:0px;margin:0px;} .nav{width:210px; b...
  • luo1728210158
  • luo1728210158
  • 2016年06月27日 19:58
  • 1450
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:伸缩导航菜JQ
举报原因:
原因补充:

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