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. 深度学习 + OpenCV,Python实现实时视频目标检测

    使用 OpenCV 和 Python 对实时视频流进行深度学习目标检测是非常简单的,我们只需要组合一些合适的代码,接入实时视频,随后加入原有的目标检测功能. 在本文中我们将学习如何扩展原有的目标检测项 ...

  2. JavaScript基础知识点学习记录

    一.简介: JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如相应用户的各种操作. J ...

  3. css实现三角形标

    .iszb{ position: absolute;top: -75px;right:-75px;text-align: center;color: red; width: 150px;height: ...

  4. django之视图系统 views.py-->主要内容(FBV和CBV、dispath、request对象和request.FILES、JsonResponse)

    一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 一 视图的实现可以基于两种方法: 1 基于函数的形式 FBV 使用装饰器装饰FBV  直接在上 ...

  5. django连接mysql数据库以及建表操作

    django连接mysql数据库需要在project同名的目录下面的__init__.py里面加入下面的东西 import pymysql pymysql.install_as_MySQLdb() 找 ...

  6. RxJava学习(一)——简介及其优势

    参考:给 Android 开发者的 RxJava 详解 RxJava是什么 RxJava 在 GitHub 主页上的自我介绍是 "a library for composing asynch ...

  7. PyCharm 安装使用

    服务器激活地址(转载)http://www.cnblogs.com/littlehb/p/7784517.html   PyCharm 服务器激活地址: 最近用edu邮箱申请了一个JetBrains针 ...

  8. Nginx 设置负载均衡

    1. 在nginx配置文件目录下另外单独创建一个文件用于管理负载均衡配置,这里起名为 fzjh.conf vim /etc/nginx/fzjh.conf #在文件下添加以下内容 upstream m ...

  9. 创建模式--原型模式(JAVA)

    原型模式: 原型模式主要针对模型对象类型的克隆,对已有构造好的对象进行复制获取一个新的对象实例.比如我们在获取一个对象并成功赋值后,要传递给多个处理类去处理. 打个比方:吃面是个处理类,面是个模型对象 ...

  10. 集合,ArrayList

    用集合代替数组: Console.Write("请输入人数:"); int renshu = int.Parse(Console.ReadLine()); ArrayList ch ...