<Html>
// The declaration may be invalid due to the difference between IE, so the method of odd Harrow's declaration is available.
// This is not only reliable, but also reliable. Why should I declare it again?
// Because your IIS or environment is not IIS at all at the time, this will become invalid.
// But generally not, the following UTF-8 statement is used to solve the above possibility of unavailability
// If the execution is performed twice, the answer is no.
// First declare the ZH-CN Simplified Chinese after pointing to the UTF-8 is not wrong results
// So direct to the UTF-8 can not be? The answer is no, because some servers are broken.
// The Problem of UTF-8 support range is relatively wide, if the wrong think you are playing Korean, then the display can only be the following form
// Garbled characters. I do not know whether my understanding is correct, but for so many years
// I have always solved this problem. At least I think it is reliable. Even if others do not, I think that if we solve the problem without a BUG, it is what we want.
// Why is win v ~ Win8 won't do that, because the system can only do better and better, and the test result is like this Ps: Haha, a brain-dead person ^_^ ~~~~
<! DOCTYPE html>
<! -- [If lt IE 7]> <! -- [If IE 7]> <! -- [If IE 8]> <! -- [If IE 9]> <! -- [If (gt IE 9) |! (IE)]> <! --> <Html class = "" lang = "zh-cn"> <! -- <! [Endif] -->
<Head>
// Declare the encoding, but sometimes there may be various odd cases such as the IE version!
// Because of the server compatibility problems and word set reasons for time UTF-8 may not be used, you can consider GB2312
// In this case, problems may occur in Hong Kong, Macao, and Taiwan.
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Title> multilevel menu </title>
<Script type = "text/javascript" src = "jquery-2.0.1.js"> </script>
</Head>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Li {list-style: none ;}
. Icoopen ,. icoopen2 ,. icoclose ,. icoclose2 ,. iconleaf ,. iconleaf2 ,. lmenu ul li span {background: url ("doc.png") no-repeat 0 0; width: 9px; height: 9px; top: 9px ;}
Em {display: block; position: absolute; cursor: pointer ;}
. Icoopen {left: 28px; background-position: 0-39px ;}
. Icoopen2 {left: 42px; background-position:-46px-88px ;}
. Icoclose {left: 28px; background-position:-45px-39px ;}
. Icoclose2 {left: 42px; background-position: 0-88px ;}
. Iconleaf,. iconleaf2 {width: 3px; height: 5px; background-position:-87px-41px ;}
. Iconleaf {left: 47px; top: 11px ;}
. Iconleaf2 {left: 72px; top: 10px ;}
. Lmenu {
Margin: 50px 200px;
Width: 250px;
Height: auto;
Overflow: hidden;
Font-family: Tahoma, Helvetica, "Microsoft Yahei", "", Arial, STHeiti;
Margin-bottom: 10px;
Border: 1px solid # AEB1B5;
}
. Lmenu ul li {
Position: relative;
Cursor: pointer;
}
. Lmenu ul li span {
Display: block;
Width: 100%;
Height: 28px;
Line-height: 28px;
Text-indent: 3em;
/* Font-weight: bolder ;*/
Font-size: 14px;
Color: # 0E3E5E;
Border-bottom: 1px solid # D7D7D7;
Background-position:-46px 0;
}
. Lmenu ul li,. lmenu ul li span {
Background-color: # F7F8F8;
Color: #333;
Text-indent: 5em;
Font-size: 13px;
Height: auto;
Line-height: 28px;
}
. Lmenu ul li span {
Background: none;
}
. Lmenu ul li {
Border: none;
Text-indent: 7em;
Font-size: 12px;
Font-weight: normal;
Height: 24px;
Line-height: 24px;
}
</Style>
<Body>
<Div class = "lmenu">
<Ul>
<Li>
<Span> Level 1 menu </span>
<Ul>
<Li>
<Span> basic </span>
<Ul>
<Li> full screen </li>
<Li> Source Code </li>
</Ul>
</Li>
<Li>
<Span> Format </span>
<Ul>
<Li> All dead screens </li>
<Li> Source Code </li>
</Ul>
</Li>
<Li> personalized configuration </li>
</Ul>
</Li>
<Li>
<Span> Level 2 menu </span>
<Ul>
<Li> I am from Level 2 </li>
<Li> I am from Level 2 </li>
<Li> I am from Level 2 </li>
<Li> I am from Level 2 </li>
</Ul>
</Li>
</Ul>
</Div>
</Body>
<Script type = "text/javascript">
$ (Document). ready (function (){
/* First-level menu style */
$ (". Lmenu> ul> li> span"). prepend ('<em class = "icoclose"> </em> ');
/* Second-level menu style */
$ (". Lmenu> ul> li"). each (function (){
/* Check whether a node exists */
Span = $ (this). find ("span ");
If (span. length ){
Span. prepend ('<em class = "icoclose2"> </em> ');
} Else {
$ (This). prepend ('<em class = "iconleaf"> </em> ')
}
});
/* Three-Level menu style */
$ (". Lmenu> ul> li"). click (function (){
Alert ($ (this). text ());
}). Prepend ('<em class = "iconleaf2"> </em> ');
$ (". Lmenu ul li span"). click (function (){
Var ye = $ (this). find ('em ');
ClassNama = ye. attr ("class ");
If (classNama = 'icoclose') {ye. attr ('class', 'icoopen ');}
Else if (classNama = 'icoopen') {ye. attr ('class', 'icoclose ');}
Else if (classNama = 'icoclose2') {ye. attr ('class', 'icoopen2 ');}
Else if (classNama = 'icoopen2') {ye. attr ('class', 'icoclose2 ');}
$ (This). siblings ("ul"). slideToggle ("normal", "swing ");
});
});
</Script>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
