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. vue使用树形控件z-tree,动态添加数据,默认展开第一行

    环境:vue 2.9.3; webpack; 插件:z-tree,jquery(cnpm install xxxx) 问题;由于数据量比较多,需要动态加载数据,默认第一次请求的数据是最高一级,然后子集 ...

  2. 「NOI2018」屠龙勇士(CRT)

    /* 首先杀每条龙用到的刀是能够确定的, 然后我们便得到了许多形如 ai - x * atki | pi的方程 而且限制了x的最小值 那么exgcd解出来就好了 之后就是扩展crt合并了 因为全T调了 ...

  3. call与apply简单介绍

    var pet={ word:'...', speak:function(say){ console.log(say+' '+this.word) } } //pet.speak('speak')// ...

  4. python学习笔记目录

    人生苦短,我学python学习笔记目录: week1 python入门week2 python基础week3 python进阶week4 python模块week5 python高阶week6 数据结 ...

  5. 零基础学习python_列表和元组(10-13课)

    一时兴起今天又回过头来补一下列表和元组,先来说说列表哈,列表其实是python最经常用到的数据类型了,不仅经常用还很强大呢,这个跟C语言里面的数组是类似的,列表当然也可以增删改查,不过我可没打算用之前 ...

  6. [java] 求2个集合的交 差 并集

    要求2个集合的交 差 并集. set集合,如下 import java.util.HashSet; import java.util.Set; public class SetTest { publi ...

  7. 关于lampp中的proftpd的一些使用

    这个是配置文件 ServerName "ProFTPD" ServerType standalone DefaultServer on Port 21 这个是端口 Umask Ma ...

  8. ubuntu 14.04 安装 Apache Thrift 0.10

    1.到官网下载源码压缩文件 https://thrift.apache.org/download 2.安装依赖软件,可以参考 https://thrift.apache.org/docs/instal ...

  9. python学习笔记_week18

    note 1.JS 正则 test - 判断字符串是否符合规定的正则 rep = /\d+/; rep.test("asdfoiklfasdf89asdfasdf") # true ...

  10. 【3-28】JavaScript的DOM操作

    一.定义:DOM是一种用于HTML和XML文档的编程接口. 二.Windows对象操作: (一)Window.open(URL,name,features,replace) 1.URL;页面地址 2. ...