返回jquery-......登陆

jquery-二级三级菜单的布局和下拉效果

邈看银河系2019-06-25 20:37:4353

<!DOCTYPE html>

<html>

<head charset='utf-8'>

<title>jquery三级下来菜单学习</title>

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

<style type="text/css">

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

.menu {width: 800px;height: 35px;margin:0px auto;background: red;margin-top: 20px;color: #fff;border:1px solid #ccc;border-radius: 5px;}

ul{list-style: none;}

ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;float: left;border-right: 1px solid #ccc;cursor: pointer;}

.twobox li{width: 100px;height: 30px;line-height: 30px;background:#2D2D2D;color: #A9A9A9;font-size: 14px;position: relative;border: 0px;}

.twobox li:hover{background:#000;color: #fff}

.three {position: absolute;top: 0px;left: 100px;}

.three li{width: 99px;height: 30px;line-height: 30px;border:0px;}

</style>

<script type="text/javascript">

//隐藏二级三级菜单

$(document).ready(function () {

$('.twobox').hide()

    $('.three').hide()

//一到一级菜单上后显示二级菜单

    $('.one>li').mouseover(function(){

    $(this).find('.twobox').slideDown(600)

    })   

//移除菜单,隐藏二级     

    $('.one>li').mouseleave(function(){

    $(this).find('.twobox').slideUp(500)

    }) 


        //二级菜单显示三级菜单

        $('.two').mouseover(function(){

    $(this).find('.three').slideDown(600)

    }) 

        //隐藏三级菜单

        $('.two').mouseleave(function(){

    $(this).find('.three').slideUp(500)

    }) 



})










</script>

</head>

<body>

<div class="menu">

<ul class="one">

<li>首页</li>

<li>产品

<ul class="twobox">

<li>产品1</li>

<li class="two">产品2

<ul class="three">

<li>产品1.1</li>

<li>产品1.2</li>

<li>产品1.3</li>

<li>产品1.4</li>

</ul>

</li>

<li class="two">产品3

<ul class="three">

<li>产品3.1</li>

<li>产品3.2</li>

<li>产品3.3</li>

<li>产品3.4</li>

</ul>

</li>

<li>产品4</li>

</ul>

</li>

<li>公司新闻

<ul class="twobox">

<li>公司新闻1</li>

<li class="two">公司新闻2

<ul class="three">

<li>公司新闻1.1</li>

<li>公司新闻1.2</li>

<li>公司新闻1.3</li>

<li>公司新闻1.4</li>


</ul>


</li>


</ul>


</li>


<li>行业新闻

<ul class="twobox">

<li>行业新闻1</li>

<li class="two">行业新闻2

</li>

</ul>

</li>





<li>联系我们

<ul class="twobox">

<li>联系我们</li>


</ul>

</li>










</ul>


</div>


</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网