js和jQuery写简单下拉菜单

1.jQuery写法

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>下拉菜单</title>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<style type="text/css">

    *{ margin:0px; padding:0px;}

    #menu{width:100px; height:35px; font-family:'微软雅黑'; background-color:#0C6; text-align:center; font-size:24px; line-height:35px; vertical-align:middle; color:#fff;}

    #menu:hover{cursor:pointer;}

    .menu1{width:100px; height:35px; font-family:'微软雅黑'; background-color:#FC0; text-align:center; font-size:24px; line-height:35px; vertical-align:middle; color:#fff; list-style:none; }

    #menu1{margin:0px; width:100px; padding:0px; display:none;}

    .menu1:hover{ cursor:pointer; background-color:#F93}

    /*橘子*/

    #jz{ position:absolute;  left:100px; top:70px; display:none;}

    .jz1{ width:100px; height:35px; background-color:#3C3; list-style:none;}

    .jz1:hover{ cursor:pointer; background-color:#0F3}

    /*香蕉*/

    #xj{ position:absolute;  left:100px; top:105px; display:none; }

    .xj1{ width:100px; height:35px; background-color:#3C3; list-style:none;}

    .xj1:hover{ cursor:pointer; background-color:#0F3}

    /*苹果*/

    #pg{ position:absolute;  left:100px; top:35px; display:none; }

    .pg1{ width:100px; height:35px; background-color:#3C3; list-style:none;}

    .pg1:hover{ cursor:pointer; background-color:#0F3}

</style>

</head>

<body>

    <div id="menu" class="menu" >菜单</div>

        <ul id="menu1">

            <li class="menu1">苹果

                <ul id="pg" class="pg">

                    <li class="pg1">淡绿</li>

                    <li class="pg1">草绿</li>

                    <li class="pg1">绿色</li>

                </ul>

            </li>

            <li class="menu1">橘子

                <ul id="jz" class="jz">

                    <li class="jz1">橘黄</li>

                    <li class="jz1">橘红</li>

                    <li class="jz1">绿色</li>

                </ul>

            </li>

            <li class="menu1">香蕉

                <ul id="xj" class="xj">

                    <li  class="xj1">黄色</li>

                    <li class="xj1">柠檬黄</li>

                    <li class="xj1">土黄</li>

                </ul>

            </li>

            <li class="menu1">葡萄</li>

            <li class="menu1">菠萝</li>

        </ul>

</body>

    <script type="text/jscript">

        $(document).ready(function(e) {

            $("#menu").mouseover(function(e){

                $("#menu").css("background-color","#093");

                $("#menu1").css("display","block");

                });

            $("#menu").mouseout(function(e){

                $("#menu").css("background-color","#0C6");

                $("#menu1").css("display","none");

                });

            $(".menu1").mouseover(function(e){

                $("#menu1").css("display","block");

                $(this).children(".jz").css("display","block");

                //(this).children(".jz"):this代表是“.menu1”这个选择器，后面的children（）代表的是".menu"下面的直接子元素

                $(this).children(".xj").css("display","block");

                $(this).children(".pg").css("display","block");

                });

            $(".menu1").mouseout(function(e){

                $("#menu1").css("display","none");

                $(this).children(".jz").css("display","none");

                $(this).children(".xj").css("display","none");

                $(this).children(".pg").css("display","none");

                });

        });

    </script>

</html>

2.js写法:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#fx

{

    width:100px;

    height:30px;

    background-color:#60F;

    color:white;

    font-weight:bold;

    text-align:center;

    line-height:30px;

    vertical-align:middle;

}

#fx:hover

{

    cursor:pointer;

    background-color:#;

}

#menu

{

    width:100px;

}

.f

{

    width:100px;

    height:30px;

    background-color:#F06;

    color:white;

    font-weight:bold;

    text-align:center;

    line-height:30px;

    vertical-align:middle;

}

</style>

</head>

<body>

<div id="fx" onmouseover="showlist()" onmouseout="hidelist()">分类</div>

<div id="menu" style="display:none" onmouseover="showlist()" onmouseout="hidelist()">

    <div class="f">家电</div>

    <div class="f">数码</div>

    <div class="f">手机</div>

    <div class="f">衣服</div>

</div>

</body>

<script type="text/javascript">

function showlist()

{

    document.getElementById("menu").style.display="block";

}

function hidelist()

{

    document.getElementById("menu").style.display="none";

}

</script>

</html>

js和jQuery写简单下拉菜单的更多相关文章

jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
仿新浪游戏频道js多栏目全屏下拉菜单导航条
仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...
jQuery+Superfish制作下拉菜单
superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...
CSS写动态下拉菜单 -----2017-03-27
动态网站第一步:动态下拉菜单关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...
JQuery设置获取下拉菜单选项的值多实例
分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项获取Select :获取select 选中的 text :$(“#ddlRegType ...
基于jquery网站左侧下拉菜单
网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览源码下载实现的代码: <div class="container"& ...
用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
jquery 只有二级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery cxSelect 联动下拉菜单
插件简介 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式. 同时兼容 Zepto ...

随机推荐

poj 1949 Chores 最长路
题目链接求出最长路..... #include <iostream> #include <vector> #include <cstdio> #include & ...
JS笔记入门第二
输出内容 document.write(); alert("hello!"); alert(mynum); </script> 注:alert弹出消息对话框(包含一个确 ...
四轴飞行器1.7 NRF24L01P无线通讯和改进型环形缓冲
原创文章,欢迎转载,转载请注明出处这次花了10多天了才再次写blog,一是中秋优点小活动,二是这次完成了不少东西.. 终于接近完成了,这次完成了NRF的通讯,并且用了改进的环形缓冲和简单的通讯协议规 ...
XSS CSRF
XSS CSRF XSS 参考 https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC ...
替换bmp图片中的颜色 good
工作中,经常需要将bmp图片中的某个颜色修改为另外一种颜色.比如:将图片中的所有白色均修改成灰色. 平时都是拿画图板中的油漆桶工具一点一点的刷,费时又费力.(这么干好几年了 :( ) 今天抽空编了一个 ...
Data Guard相关参数学习介绍
LOG_ARCHIVE_DEST_n 参数属性介绍该参数的n在11g中为1到31,下列为参数的属性值: u AFFIRM and NOAFFIRM u ALTERNATE (not suppor ...
C++之static_cast, dynamic_cast, const_cast
转自:http://www.cnblogs.com/chio/archive/2007/07/18/822389.html 首先回顾一下C++类型转换: C++类型转换分为:隐式类型转换和显式类型转换 ...
zoj 3714 Java Beans
/*很简单的一题,求连续的m位,求总和最多的值,循环找一下,就出来了*/ #include<stdio.h> ]; int main(int argc, char* argv[]) { i ...
LINQ实现行列转换
用SQL语句实现行列转换很容易,但也有时候需要在程序中实现,找了好久,发现一篇文章写的挺不错的 http://blog.csdn.net/smartsmile2012/article/details/ ...
C#中linq报“Character literal must contain exactly one character”的错误提示
后台代码使用linq提示"Character literal must contain exactly one character": 网上看了一下提示在部分linq语句中直接写入 ...

js和jQuery写简单下拉菜单

js和jQuery写简单下拉菜单的更多相关文章

随机推荐

热门专题