JQuery伸缩导航练习示例_jquery_脚本之家

JQuery伸缩导航练习示例_jquery_脚本之家

后天在攻读JQuery,尝试制作了那些导航 下载:代码 复制代码 代码如下:

伸缩导航

  • ### 导航卡1

    • 子项目1
    • 子项目2
    • 子项目3
    • 子项目4
  • ### 导航卡2

    • 子项目1
    • 子项目2
    • 子项目3
    • 子项目4
  • ### 导航卡3

    • 子项目1
    • 子项目2
    • 子项目3
    • 子项目4

复制代码 代码如下: /** * Author LY
2013-11-11 22:30 **/ * { margin: 0; padding: 0; font-family:
“Microsoft Yahei”,”Arial” } .navigator { width: 180px; display: block;
margin-top: 30px; margin-left: 30px; border-top: 10px solid #ddd;
border-bottom: 10px solid #ddd; border-left: 3px solid #ddd;
border-right: 3px solid #ddd; background: #ddd; } .tabs { list-style:
none; } .tabs li { clear: both; overflow: auto; } .tabs li h3 { padding:
0; margin:0; font-size: 14px; height: 40px; line-height: 40px;
text-align: center; width: 180px; cursor: pointer; background: #07f;
color: #fff; border-bottom: 1px solid #ccc; } .tabs li:last-child h3 {
border:none; } .tabs li h3.current { background: #6af; } .tabs li ul {
margin-left: auto; margin-right: auto; width: 160px; height: 0px;
list-style: none; overflow: hidden; } .tabs li ul li { height: 30px;
line-height: 30px; background: #eee; padding: 5px; border-bottom: 1px
solid #ccc; cursor: pointer; } 复制代码
代码如下: $.ready{ $.css; $.addClass; $.click { $.removeClass.addClass;
$.animate; $.animate({height:”160″},”slow”卡塔尔; }卡塔尔国; }卡塔尔国;

admin

网站地图xml地图