Home>

The final result is as shown in the figure:

When clicking a menu item,Can realize the collapse and expansion of the menu,This is an effect we often see on web pages.The main application of the implementation here is the css control style and then cooperate with jquery implementation.

My impressions:Here for example, the page to be bound is bound,Just static binding,Cannot be dynamically bound,The dynamic binding I use during development is implemented in conjunction with the treeview control of asp.net.I don't know if everyone has a better way.

Front page code:

<%@page language="c#" autoeventwireup="true" codefile="menu.aspx.cs" inherits="menu"%>
<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
 <script src="js/menu.js" type="text/javascript"></script>
 <link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form runat="server">
 <div>
  <ul>
   <li>
    <a href="#">menu item 1</a>
    <ul>
     <li><a href="#">Submenu 11</a></li>
     <li><a href="#">Submenu 12</a></li>
    </ul>
   </li>
   <li>
    <a href="#">menu item 2</a>
    <ul>
     <li><a href="#">Submenu 21</a></li>
     <li><a href="#">Submenu 22</a></li>
    </ul>
   </li>
   <li>
    <a href="#">menu item 3</a>
    <ul>
     <li><a href="#">Submenu 31</a></li>
     <li><a href="#">Submenu 32</a></li>
    </ul>
   </li>
  </ul>
 </div>
 </form>
</body>
</html>

css (menu.css)

ul, li
{
 list-style-type:none;
 /* If margin is not added, it cannot be left aligned in Sogou browser * /
 margin:0px;
 padding:0px;
 }
.main
{
 background-image:url ("../images/title.gif");
 background-repeat:repeat-x;
 width:100px;
 }
.main a
{
 background-image:url ("../images/collapsed.gif");
 background-repeat:no-repeat;
 background-position:3px center;
 text-decoration:none;
 color:white;
 /* The following is to ensure that the mouse can respond as long as the mouse stays on li,It is equivalent to expanding the response area of ​​li * /
 display:block;
 padding-left:20px;
 padding-bottom:3px;
 }
li
{
 background-color:#eeeeee;
 }
.main li a
{
 color:black;
 background-image:none;
 }

menu.js:

///<reference path="jquery-1.9.1.min.js" />
$(document) .ready (function () {
 var main=$(". main>a");
 main.click (function () {
  var ulnode=$(this) .next ("ul");
  //if (ulnode.css ("display") == "none") {
  //ulnode.css ("display", "block");
  //}
  //else {
  //ulnode.css ("display", "none");
  //}
  //The effect of blinds
  ulnode.slidetoggle ("normal");
 });
});

This example is a continuation of the previous example,Let's take a look at the final effect we want to achieve:

What we want to achieve this time is the following effect,When the mouse is over the menu item,Sub-menu display;When the mouse is moved away,The menu is collapsed.

Here we also solve the problems that would occur in sliding doors,When the mouse is swiped quickly,Will keep firing,this problem.

The code of the page is as follows:

<%@page language="c#" autoeventwireup="true" codefile="menu.aspx.cs" inherits="menu"%>
<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
 <script src="js/menu.js" type="text/javascript"></script>
 <link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form runat="server">
 <div>
  <ul>
   <li>
    <a href="#">menu item 1</a>
    <ul>
     <li><a href="#">Submenu 11</a></li>
     <li><a href="#">Submenu 12</a></li>
    </ul>
   </li>
   <li>
    <a href="#">menu item 2</a>
    <ul>
     <li><a href="#">Submenu 21</a></li>
     <li><a href="#">Submenu 22</a></li>
    </ul>
   </li>
   <li>
    <a href="#">menu item 3</a>
    <ul>
     <li><a href="#">Submenu 31</a></li>
     <li><a href="#">Submenu 32</a></li>
    </ul>
   </li>
  </ul>
 </div>
 <div>
  <ul>
   <li>
    <a href="#">menu item 1</a>
    <ul>
     <li><a href="#">Submenu 11</a></li>
     <li><a href="#">Submenu 12</a></li>
    </ul>
   </li>
   <li>
    <a href="#">menu item 2</a>
    <ul>
     <li><a href="#">Submenu 21</a></li>
     <li><a href="#">Submenu 22</a></li>
    </ul>
   </li>
   <li>
    <a href="#">menu item 3</a>
    <ul>
     <li><a href="#">Submenu 31</a></li>
     <li><a href="#">Submenu 32</a></li>
    </ul>
   </li>
  </ul>
 </div>
 </form>
</body>
</html>

css (menu.css)

ul, li
{
 list-style-type:none;
 /* If margin is not added, it cannot be left aligned in Sogou browser * /
 margin:0px;
 padding:0px;
 }
.main, .hmain
{
 background-image:url ("../images/title.gif");
 background-repeat:repeat-x;
 width:100px;
 }
.main a, .hmain a
{
 background-image:url ("../images/collapsed.gif");
 background-repeat:no-repeat;
 background-position:3px center;
 text-decoration:none;
 color:white;
 /* The following is to ensure that the mouse can respond as long as the mouse stays on li,It is equivalent to expanding the response area of ​​li * /
 display:block;
 padding-left:20px;
 padding-bottom:3px;
 }
li
{
 background-color:#eeeeee;
 }
.main li a, .hmain li a
{
 color:black;
 background-image:none;
 }
.main ul, .hmain ul
{
 display:none;
 }
/* Style of horizontal menu * /
.hmain
{
 float:left;
 }

menu.js

///<reference path="jquery-1.9.1.min.js" />
$(document) .ready (function () {
 var main=$(". main>a");
 main.click (function () {
  var ulnode=$(this) .next ("ul");
  //if (ulnode.css ("display") == "none") {
  //ulnode.css ("display", "block");
  //}
  //else {
  //ulnode.css ("display", "none");
  //}
  //The effect of blinds
  ulnode.slidetoggle ("normal");
 });
 //This variable is now used to solve the problem of mouse fast sliding clearinterval (settimeoutid);nodeli.children ("ul"). Slideup ();
 var settimeoutid;
 $(". hmain"). hover (function () {
  var nodeli=$(this);
  settimeoutid=window.settimeout (function () {nodeli.children ("ul"). slidedown ();}, 300)
 }, //The above function is the operation that the mouse enters,The following operation is the operation of moving the mouse out.
  function () {
   //at the beginning,I made a mistake here,Should redefine nodeli
   var nodeli=$(this);
   cleartimeout (settimeoutid);
   if (nodeli.children ("ul"). length!=0) {
    nodeli.children ("ul"). slideup ();
   };
  });
});
  • Previous C # #define conditional compilation
  • Next Email regular expressions collation