基于jquery、css的下拉菜单实现

最新推荐文章于 2024-09-11 20:31:47 发布

zhlantian

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量387

点赞数

分类专栏： jquery CSS 文章标签： jquery css

本文链接：https://blog.csdn.net/zhlantian/article/details/54585003

版权

jquery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

近期一系统中需要一个二级下拉菜单，由于需要根据UI的设计稿来实现，通过尝试了使用bootstrap，主要使用list-group和collapse来完成，但是发现样式需要较大的调整，而且后期样式达不到UI的要求，索性动手写了一个菜单，基于jquery和css，效果图如下：

话不多说，直接上代码:
1、界面

  <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery、css下来菜单</title>

<link href="style.css" type="text/css" rel="stylesheet"/>
<link href="font-awesome/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="jquery-1.9.1/jquery.min.js"></script>
</head>

<body>
    <div class="wrap">
     <ul class="indexmenu" style="width:100%">
            <li><a class="menutitle mapIcon" href="javascript:void(0)"><span class="title">电子地图</span><i class="pull-right fa fa-angle-down"></i></a>
                <ul style="display:none">
                    <li><a href="javascript:void(0)" >地图</a></li>
                    <li><a href="javascript:void(0)" >影像对比</a></li>
                </ul>
            </li>
            <li>
                <a class="menutitle dataManager" href="javascript:void(0)"><span class="title">数据管理</span><i class="pull-right fa fa-angle-down"></i></a>
                <ul style="display:none">
                   <li><a id="keyquery"  href="javascript:void(0)">关键字查询</a></li>
                    <li><a  href="javascript:void(0)">条件查询</a></li>
                    <li><a  href="javascript:void(0)">信息录入</a></li>
                </ul>
             </li>
            <li>
               <a class="menutitle statisticIcon" href="javascript:void(0)"><span class="title">统计报表</span><i class="pull-right fa fa-angle-down"></i></a>
                <ul style="display:none">
                   <li><a   href="javascript:void(0)" >统计概览</a></li>
                    <li><a  href="javascript:void(0)">分乡镇统计</a></li>
                    <li><a  href="javascript:void(0)">分村统计</a></li>
                    <li><a  href="javascript:void(0)" >分类型统计</a></li>
                    <li><a  href="javascript:void(0)">房屋用途统计</a></li>
                </ul>
            </li>
            <li>
                <a class="menutitle inspectionIcon" href="javascript:void(0)"><span class="title">移动巡检</span><i class="pull-right fa fa-angle-down"></i></a>
                <ul style="display:none">
                    <li><a  href="javascript:void(0)">移动巡查</a></li>
                </ul>
            </li>
                 <li>
                     <a class="menutitle userIcon" href="javascript:void(0)"><span class="title">用户中心</span><i class="pull-right fa fa-angle-down"></i></a>
                     <ul style="display:none">
                          <li><a  href="javascript:void(0)" >密码修改</a></li>
                          <li><a  href="javascript:void(0)" >用户管理</a></li>
                          <li><a  href="javascript:void(0)" >角色管理</a></li>
                     </ul>
                 </li>
                 <li>
                     <a class="menutitle dictIcon" href="javascript:void(0)"><span class="title">数据字典</span><i class="pull-right fa fa-angle-down"></i></a>
                     <ul style="display:none">
                         <li><a href="javascript:void(0)">数据字典编辑</a></li>
                     </ul>
                 </li>

        </ul>
    </div>
     <script type="text/javascript">
         $('.menutitle').click(function (event) {
             if ($(this).next().css("display") == "none") {
                 $(this).parent("li").siblings("li").children("a").removeClass("open");
                 $(this).addClass("open");
                 $(this).next().slideDown(100)
                 $(this).parent("li").siblings("li").children("ul").slideUp(100);
             }
             else {
                 $(this).removeClass("open");
                 $(this).next().slideUp(100);

             }
         })
         $('.indexmenu li ul li a').focus(function () {
             $(this).parent("li").addClass("changeborder");
         })
         $('.indexmenu li ul li a').blur(function () {
             $(this).parent("li").removeClass("changeborder");
         })

     </script>
</body>
</html>

2、style.css

@charset "utf-8";
/* CSS Document */

* {
     font-family:Microsoft YaHei;
}
.wrap {
    width:220px;
    margin:10px;
    border:3px solid #4077E2;
    border-radius:15px;
}

.indexmenu {
    margin:20px 0px 5px 5px;
    padding:0;
    padding-bottom:20px;
}
.indexmenu  li {
    list-style:none;
}
    .indexmenu > li {
        margin-bottom:15px;
    }
.indexmenu li a {
    color:#1775be;
    width:100%;
    height:30px;
    line-height:30px;
    font-size:18px;
    font-weight:bold;
    font-family:Microsoft YaHei;
}
.indexmenu li ul {
    padding:0;
}
 .indexmenu li ul li{
     margin-left:70px;
     margin-right:20px;
 }
 .indexmenu li ul li a {
     font-size:15px;
     font-weight:normal;
}
.indexmenu li a:link,a:visited {
    text-decoration:none;
}
.indexmenu li ul li a:focus{
    color:red;

}
.changeborder {
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
.indexmenu i.fa {
    line-height:28px;
}
.menuitems {
    display:none
}
a i {
    margin-right:20px;
    margin-left:20px;
}

a.open > .fa-angle-down:before {
    content: "\f106";
}
a > fa-angle-up:before {
    content: "\f107";
}
.title {
    margin-left:70px;
}

ul.firstmenu {
    margin:20px 0 0 0;
}
ul.firstmenu li {
    list-style:none;
    height:30px;
    line-height:30px;
    font-size:18px;
    font-weight:bold
}
ul.firstmenu li a:link,a:visited{
    text-decoration:none;
}
ul.firstmenu li a:focus {
    color:red;
}

 .mapIcon {
        background:url(Images/mapicon.png) no-repeat 20px center;
        background-size:contain;
    }
    .dataManager {
        background:url(Images/datamanager.png) no-repeat 20px center;
        background-size:contain;
    }
    .inspectionIcon {
        background:url(Images/inspectionicon.png) no-repeat 20px center;
        background-size:contain;
    }
    .statisticIcon {
        background:url(Images/statisticicon.png) no-repeat 20px center;
        background-size:contain;
    }
    .userIcon {
        background:url(Images/usericon.png) no-repeat 20px center;
        background-size:contain;
    }
    .dictIcon {
        background:url(Images/dicticon.png) no-repeat 20px center;
        background-size:contain;
    }

.btnTitle {
    line-height:36px;
    margin-right:10px;
    font-size:20px;
    font-weight:bold;
}

.info {
    height:36px;

    margin-right:20px;
}
.pull-right {
  float: right !important;
}

.topnav a {
    opacity:1;
    color:white;
    width:auto;
    text-align:center;
    height:36px;
    line-height:36px;
}


.topnav  span {
    line-height:36px;
    margin-right:10px;
}

.info  span {
    line-height:31px;
}
.topnav a:hover{
    opacity:1;
    background-color:#5694D2;
    color:white
}
.choosed {
    opacity:1;
    background-color:#5694D2;
    color:white
}
#west {
    width:236px;
    background:url("/Images/westbg.png") no-repeat;
    background-size:cover;
}