你的位置:首页 > ASP.net教程

[ASP.net教程]子菜单显示了,就不想隐藏了


今天有做一个小功能,就是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 src="~/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