jquery/javascript 编写下拉菜单

最新推荐文章于 2022-07-29 10:06:25 发布

jolingcome

最新推荐文章于 2022-07-29 10:06:25 发布

阅读量366

点赞数 2

分类专栏： python web开发 & javascript前端开发

python web开发 & javascript前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQUERY代码：

html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左侧下拉菜单列表示例</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
    <div class="left_box">
        <dl class="system_log">
            <dt>系统记录
                <img src="images/select_xl01.png" />
            </dt>
            <dd><a href="#">充值记录</a></dd>
            <dd><a href="#">消费记录</a></dd>
            <dd><a href="#">操作记录</a></dd>
        </dl>
        <dl class="custom">
            <dt>客户管理
                <img src="images/select_xl01.png" />
            </dt>
            <dd><a href="#">成交客户</a></dd>
            <dd><a href="#">未成交客户</a></dd>
            <dd><a href="#">即将到期客户</a></dd>
        </dl>
        <dl class="channel">
            <dt>渠道管理
                <img src="images/select_xl01.png" />
            </dt>
            <dd><a href="#">渠道主页</a></dd>
            <dd><a href="#">渠道标准</a></dd>
            <dd><a href="#">渠道商管理</a></dd>
        </dl>
        <dl class="system_management">
            <dt>系统管理
                <img src="images/select_xl01.png" />
            </dt>
            <dd><a href="#">用户管理</a></dd>
            <dd><a href="#">角色管理</a></dd>
            <dd><a href="#">栏目管理</a></dd>
        </dl>
    </div>
    <div class="right_box"></div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

2、CSS部分

body{
    margin:0;
    padding:0;
    height:100%;
}
dl,dt,dd{
    display: block;
    margin:0;
}
.container{
    margin:0 auto;
    width:100%;
    height:100%;
    position:relative;
}
.left_box{
    width: 160px;
    position: fixed;
    height: 100%;
    background-color: #3992d0;
}
.left_box dt {
    padding-left: 40px;
    padding-right: 10px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #f5f5f5;
    font-size: 14px;
    position: relative;
    line-height: 48px;
    cursor: pointer;
}
.system_log dt{
    background-image: url(../images/system.png);
}
.custom dt{
    background-image: url(../images/custom.png);
}
.channel dt{
    background-image: url(../images/channel.png);
}
.system_management dt{
    background-image: url(../images/syetem_management.png);
}
.left_box dt img{
    right:10px;
    top:20px;
    position:absolute;
}
.left_box dd{
    background-color:#317eb4;
    padding-left:40px;
}
.left_box dd a{
    color: #f5f5f5;
    line-height: 24px;
    font-size:12px;
    text-decoration: none;
}

3、JS部分

$(function(){
    $(".left_box dd").hide();
 $(".left_box dt").click(function(){
     $(".left_box dt").css({"background-color":"#3992d0"});
     $(this).css({"background-color": "#317eb4"});
     $(".left_box dt img").attr("src","images/select_xl01.png");
     $(this).parent().find('img').attr("src","images/select_xl.png");
     $(this).parent().find('dd').removeClass("menu_chioce");
     $(".menu_chioce").slideUp();
     $(this).parent().find('dd').slideToggle();
     $(this).parent().find('dd').addClass("menu_chioce");
 })
});
--------------------- 
作者：MySunshine07 
来源：CSDN 
原文：https://blog.csdn.net/MySunshine07/article/details/81150349 
版权声明：本文为博主原创文章，转载请附上博文链接！

JAVASCRIPT代码：

html和css部分：

<style>
        .one li{ width:100px; height:30px; line-height:30px; background:url(nav/libg.jpg) no-repeat; float:left; text-align:center; margin-left:10px; cursor:pointer; _display:inline; position:relative;}
        li ul{ position:absolute; left:0; top:30px; display:none;}
</style>
<ul class="one">
        <li id="li01">
            <span>一级菜单</span>
            <ul id="ul01">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li id="li02">
            <span>一级菜单</span>
            <ul id="ul02">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li id="li03">
            <span>一级菜单</span>
            <ul id="ul03">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>

javascript部分：

function fn(canshu1,canshu2){
    var li01 = document.getElementById(canshu1);
    var ul01 = document.getElementById(canshu2);
    
    li01.onmouseover = function(){
        ul01.style.display = "block"    
    }
    li01.onmouseout = function(){
        ul01.style.display = "none"    
    }
}
fn("li01","ul01")    
fn("li02","ul02")    
fn("li03","ul03")

https://www.cnblogs.com/0dhw/p/7827418.html 转载网站

jolingcome

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery/javascript 编写下拉菜单

JQUERY代码：html部分&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;左侧下拉菜单列表示例&lt;/title&gt; &lt;link rel="styleshe
复制链接

扫一扫