子菜单显示了,就不想隐藏了
标签:
JavaScript
今天有做一个小功能,就是mouse经过主菜单之后,子菜单就永久显示,除非刷新了网页。
先来看年实现的效果:
Html代码:
Source code:
<div id="top"> <div id="top_1"> <ul> <li style="position:relative;"> <a href="#" id="Menu1" style="text-decoration:none; color:white;">主菜名称</a> <ul id="SubMenu1" style="width: 300px; position: absolute; display: block;"> <li><a href="#">子菜名称一</a></li> <li><a href="#">子菜名称二</a> | </li> <li><a href="#">子菜名称三</a> | </li> <li><a href="#">子菜名称四</a> | </li> </ul> </li> </ul> </div> </div>
View Code
使用jQuery库:
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="~/Scripts/jquery-2.2.1.js"></script>
写js代码:
Source code:
$(function () { $("#SubMenu1").hide(); $("#Menu1").mouseover(function () { showPublish(); }); }); function showPublish() { $("#SubMenu1").show(); }
View Code
接下来是样式:
Style source code:
#top{ height: 36px; width: 100%; margin-right: auto; margin-left: auto; background-color: #006428; line-height: 36px; text-align: left;}#top #top_1{ height: 36px; width: 1110px; line-height: 36px; margin-right: auto; margin-left: auto;}#top #top_1 ul{ margin: 0px; padding: 0px; list-style-type: none;}#top #top_1 li{ display: block; float: right; width: auto; line-height: 36px; color: #FFFFFF; height: 36px; font-size: 14px;}
View Code
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦