http://www.sucaihuo.com/js/395.html

分享一个简单的垂直二级菜单导航。
 

HTML

<div id="my_menu" class="sdmenu"> 
    <div> 
        <span>在线工具</span> 
        <div class="submenus"> 
            <a href="http://www.sucaihuo.com/templates">企业模板</a> 
            <a href="http://www.sucaihuo.com/templates">商城模板</a> 
            <a href="http://www.sucaihuo.com/templates">个人模板</a> 
            <a href="http://www.sucaihuo.com/templates">专题模板</a> 
            <a href="http://www.sucaihuo.com/templates">后台模板</a> 
            <a href="http://www.sucaihuo.com/templates">行业模板</a> 
        </div> 
    </div> 
    <div> 
        <span>支持我们</span> 
        <div class="submenus"> 
            <a href="http://www.sucaihuo.com/">推荐我们</a> 
            <a href="http://www.sucaihuo.com/">链接我们</a> 
            <a href="http://www.sucaihuo.com/">网络资源</a> 
        </div> 
    </div> 
</div>

jQuery

$(function() { 
    $("#my_menu").children("div").click(function() { 
        var obj = $(this); 
        obj.toggleClass("collapsed"); 
        obj.children(".submenus").slideToggle(600, 
        function() { 
            //toggleClass 
        }); 
   }) 
})

jQuery垂直二级导航菜单代码的更多相关文章

  1. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

  2. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  4. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  5. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  6. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

  7. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  8. jquery垂直公告滚动实现代码

    公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过 复制代码代码如下: <!DOCTYPE html PUBLIC " ...

  9. 通过css3实现的动画导航菜单代码

    用css3样式实现的滑动导航菜单,html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &quo ...

随机推荐

  1. TP框架做网页静态化

    首先放上一张某手册中的一段代码: 我们要想在TP框架中执行网页静态化,在这段代码的基础上稍加添加就可以了: 在TP5框架中,为了方便寻找模板文件与生成的静态文件,我们将模板文件以及生成的静态文件放在p ...

  2. JS函数介绍

    JS中函数中没有重载特性,并且调用俩个重名函数是看顺序的 即第2个会把第1个覆盖掉也就是在下面写的会覆盖上面写的, 举个例子 function box(num,num2){ return num+10 ...

  3. RocketMQ源码分析:(一)安装与案例演示

    环境: Windows 暂时理解的功能图,不定时改动: 1. 克隆rocketmq代码 git clone git@github.com:apache/rocketmq.git 2. 进入rocket ...

  4. Jscraft 使用 Shell 与预先加载别名混合使用

    Session session = a.getSessionShell("user", "pwd", "host"); Channel ch ...

  5. (转)微信小程序开发—弹出框

    原文地址 <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view ...

  6. uva-10487-枚举

    题意:给你一个集合,每俩个数相加得到一个和s,输入s1,问离s1最近的s是多少 二分,注意如果二分出相等,那一定是最近的数,要不然就比较最后mid和mid-1的数 #include <strin ...

  7. Termux 详细安装

    termnux安装方法 https://blog.csdn.net/u010475354/article/details/79675893 使用Termux把Android手机变成SSH服务器 htt ...

  8. Flex+BlazeDS+java通信详细笔记2-推送

    前台是Air,后台是java 在运行之前,先要在IE地址栏输入http://127.0.0.1:8080/PushDemo/TickCacheServlet?cmd=start 激活它. 地址:htt ...

  9. Appium环境安装

    Appium 是开源的.跨平台的.多语言支持的 移动应用 自动化工具 原生app,如计算器 混合(Hybrid)app 内嵌web + 原生 移动 web app 手机浏览器打开的网址 安装appiu ...

  10. Dubbo 暴露服务

    1. 引入dubbo依赖 dubbo 依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId&g ...