返回三级下拉菜单...登陆

三级下拉菜单

刘静2019-07-31 16:03:1327
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navigation导航</title>
<script type="text/javascript" src="static/jQuery/jquery-3.4.1.js"></script>
<link rel="stylesheet"  type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{padding:0px;margin:0px;}
.main_nav{margin:200px auto;width:1290px;height:50px;}
.heading{width:150px;height:50px;float:left;line-height:50px;text-align:center;border:1px solid #9D60FC;}
.sp{height:50px;display:inline-block;}
.clear{clear:both;}
ul{list-style:none;}
        ul li{width:100px;height:50px;line-height:50px;text-align:center;float:left;border-right:1px solid #ccc;cursor:pointer;}
        .heading_two li{width:150px;height:45px;line-height:45px;background:#ADB9BC;color:#282923;font-size:14px;position:relative;border:0px;}
        .heading_two li:hover{background:#4C4C4C;color:#fff;}
        .three{position:absolute;top:0px;left:150px;}
        .three li{width:150px;height:45px;line-height:45px;border:0px;}
</style>
</head>
<body>
<div>
<div>
<div><i class="fa fa-home"></i>&nbsp;&nbsp;首页</div>
<div><i class="fa fa-newspaper-o"></i>&nbsp;&nbsp;新闻头条1
<ul><!-- 二级下拉菜单 -->
                <li>新闻头条1</li>
                <li>新闻头条2
                    <ul><!-- 三级下拉菜单 -->
                        <li>新闻头条2.1</li>
                        <li>新闻头条2.2</li>
                        <li>新闻头条2.3</li>
                        <li>新闻头条2.4</li>
                    </ul>
                </li>
                <li>新闻头条3
                    <ul><!-- 三级下拉菜单 -->
                        <li>新闻头条3.1</li>
                        <li>新闻头条3.2</li>
                        <li>新闻头条3.3</li>
                        <li>新闻头条3.4</li>
                    </ul>
                </li>
                <li>新闻头条4</li>
            </ul>
</div>
<div><i class="fa fa-television"></i>&nbsp;&nbsp;热播好剧</div>
<div><i class="fa fa-video-camera"></i>&nbsp;&nbsp;最新电影</div>
<div><i class="fa fa-heartbeat"></i>&nbsp;&nbsp;娱乐八卦</div>
<div><i class="fa fa-folder-open-o"></i>&nbsp;&nbsp;热门小说</div>
<div><i class="fa fa-plus-square"></i>&nbsp;&nbsp;健康医疗</div>
<div><i class="fa fa-soccer-ball-o"></i>&nbsp;&nbsp;热门游戏</div>
</div>
<div></div>
</div>
<script type="text/javascript">
// $(document).ready(function(){})
$(function(){
//1:隐藏二级与三级下拉菜单
        $('.heading_two').hide();
        $('.three').hide();


        //2.当鼠标移到包含二级菜单的一级菜单时显示二级菜单
        $('.main_nav>.heading').mouseover(function(){
            $(this).find('.heading_two').slideDown(500);
        })

        //3.当鼠标移到包含三级菜单的二级菜单时显示三级菜单
        $('.main_nav>.heading').mouseleave(function(){
            $(this).find('.heading_two').slideUp(500);
        })

        //4.当鼠标移出包含三级菜单的二级菜单时隐藏三级菜单
        $('.two').mouseover(function(){
            $(this).find('.three').slideDown(500);
        })
        $('.two').mouseleave(function(){
            $(this).find('.three').slideUp(500);
        })
})

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


最新手记推荐

• 依赖注入小例子• 模板显示用户信息表,并分页显示• 模板继承,模仿php页面• 模拟用户登录验证的案例 依赖注入 Facade• 创建一个验证器, 用来对模型对应的表中字段进行验证处理

全部回复(0)我要回复

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