jquery书写的下拉菜单

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/jquery-1.7.2.min.js"></script>
    <style type="text/css">
        *
        {
            margin:0px;
            height:0px;
        }
        .top_list
        {
            top:20px;
            height:40px;
            width:100px;
            position:relative;
            margin-left:10px;
            float:left;
            background-color:red;
            overflow:hidden;
        }
        .down_list
        {
            top:40px;
            height:200px;
            width:100px;
            position:relative;
            background-color:green;
        }
    </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".top_list").hover(function () {
                    $(this).stop().animate({ height: "240" }, 500);
                },
                function () {
                    $(this).stop().animate({ height: "40" }, 500);
                });
            });
    </script>
</head>
<body>
    <div class="top_list">
        <div class="down_list"></div>
    </div>
      <div class="top_list">
        <div class="down_list"></div>
    </div>
      <div class="top_list">
        <div class="down_list"></div>
    </div>
      <div class="top_list">
        <div class="down_list"></div>
    </div>
      <div class="top_list">
        <div class="down_list"></div>
    </div>
      <div class="top_list">
        <div class="down_list"></div>
    </div>
      <div class="top_list">
        <div class="down_list"></div>
    </div>
      <div class="top_list">
        <div class="down_list"></div>
    </div>
      <div class="top_list">
        <div class="down_list"></div>
    </div>
      <div class="top_list">
        <div class="down_list"></div>
    </div>
      <div class="top_list">
        <div class="down_list"></div>
    </div>

</body>

时间： 2024-11-26 09:24:16

jquery书写的下拉菜单的相关文章

JQuery设置获取下拉菜单选项的值多实例

分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项获取Select :获取select 选中的 text :$(“#ddlRegType”).find(“option:selected”).text();获取select选中的 value:$(“#ddlRegType “).val();获取select选中的索引:$(“#ddlRegType “).get(0).selectedIndex;设置select:设置select 选中的

jQuery宽屏下拉菜单导航子菜单可自定义

jQuery是一款流行已久的Javascript框架,确实很好用.今天我们要介绍一款用jQuery实现的下拉菜单导航插件,下拉菜单的外观是仿腾讯云官网菜单的.鼠标滑过主菜单时,即可展开二级下拉子菜单.值得注意的是,这款jQuery下拉菜单的子菜单内容可以自定义,因此也非常灵活. 访问地址:http://www.xuecss3.com/jquery-10-757-1.html 另外分享一个FQ软件:下载地址 http://www.xuecss3.com/qianduan-9-374-1.html

分别用CSS\JavaScript\jQuery实现动态下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery+Superfish制作下拉菜单

superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官方帮助文档: http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started Begin with a working pure CSS dropdown menu based on nested unordered lists.

基于jquery网站左侧下拉菜单

网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览源码下载实现的代码: <div class="container"> <div class="leftsidebar_box"> <div class="line"></div> <dl class="system_log"> <dt onClick=&qu

jQuery cxSelect 联动下拉菜单

插件简介 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式. 同时兼容 Zepto,方便在移动端使用. 国内省市县数据来源:basecss/cityData 下载及演示演示地址:http://www.jqhtml.com/wp-content/uploads/2017/05/wz/jQuery.cxSelect-1.4.1/ 下载地址:在线下载使用方法载入 JavaScri

jQuery点击下拉菜单的展示与隐藏

首先点击显示某个div,然后要求再次点击时消失,或者点击document的其他地方会隐藏掉这个层,涉及到冒泡的问题,阻止document冒泡到dom上.代码如下: var $el = $(".search-more, .article-query-list li"); $el.click(function(e){ e.stopPropagation(); $(this).toggleClass('active'); }); $(document).on('click',function

jQuery纵向分类下拉菜单导航

在线演示本地下载原文地址:https://www.cnblogs.com/lovellll/p/10105402.html

如何实现导航菜单栏中的二级下拉菜单？

我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <meta charset="UTF-8"> <title>Documen