Using CSS to create a foldable scalable business card Menu

css| Menu | telescopic

Now look at the CSS style sheet code:

<style type= "Text/css" >
<!--
#menu {
font-size:12px;
height:380px;
margin:0;
padding:0;
width:180px;
Overflow:hidden;
Background: #f0f0f0;
List-style:none;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
}
#menu Li a {
Display:block;
Text-decoration:none;
Color: #00b;
margin:0;
width:100%;
}
#menu Li a span {
Display:none;
Color: #000;
height:120px
}
#menu Li A.one Span {
Display:block;
margin:0 10px;
}
#menu Li A:hover {
Background: #f1f1f1;
}
#menu Li A:hover Span {
Display:block;
margin:0 10px;
Cursor:pointer;
}
#menu. h2 {
margin:0 5px;
padding:0;
Color: #808;
Font-variant:small-caps;
border:0;
}
#menu. h3 {
margin:0 5px;
padding:0;
Color: #00b;
}
. Curved {
width:180px;
margin:0 Auto;
}
Curved. B1, curved B2,. Curved B3,. Curved. b4 {
font-size:1px;
Display:block;
Background: #88c;
Overflow:hidden;
}
. Curved. B1, curved b2, curved. b3 {
height:1px;
}
. Curved. B2, curved B3, curved. b4 {
Background: #f0f0f0;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
}
. Curved. B1 {
margin:0 4px;
Background: #cccccc;
}
. Curved. b2 {
margin:0 2px;
border-width:0 2px;
}
. Curved. b3 {
margin:0 1px;
}
. Curved. b4 {
height:2px;
margin:0px;
}
-->
</style>

Source code: <div class= "Curved" ><b class= "B1 C1" ></b><b class= "B2 C2" ></b><b class= "B3 C3" ></b><b class= "B4 c4" ></b>  <ul id= "menu" >    <li>      <a  href= "#nogo" >      <b class= "H2" > Web Teaching Network one</b>< BR/>      <b class= "H3" >http://www.webjx.com/</b>       <span>      Web standards are structure (Structure), performance (presentation), and Behavior (Behavior) Standard set of three components       </span>     </a>    </ li>    <li>     <a href= "#nogo" >      <b class= "B1" ></b>      <b class= "B2" ></b>       <b class= "B3" ></b>      <b class= "B4" ></b>      <b class= "H2" > Web Teaching Network two</b><br   <b class= "H3" >http://www.webjx.com/</b>      <span>       Web standards are standard sets of structure (Structure), performance (presentation), and Behavior (Behavior), which are composed of three aspects       </span>     </a>    </li>    <li>      <a href= "#nogo" >      <b class= "B1" ></b>       <b class= "B2" ></b>      <b class= "B3" ></b>       <b class= "B4" ></b>      <b class= "H2" > Web page Teaching Network three</b><br/>      <b class= "H3" >http://www.webjx.com/</b >      <span>    Web standards are structure (Structure), Performance (PresentatION) and Behavioral (Behavior) three-component standard set       </span>     </a>     </li>    <li>     <a href= "#nogo" >       <b class= "B1" ></b>      <b class= "B2" ></b>       <b class= "B3" ></b>      <b class= "B4" > </b>      <b class= "H2" > Web teaching Network four</b><br/>       <b class= "H3" >http://www.webjx.com/</b>      <span>       Web standards are standard sets of structure (Structure), performance (presentation), and Behavior (Behavior), which are composed of three aspects        </span>     </a>    </li>    <li>      <a class= "one" href= "#nogo" >      <b CLASs= "B1" ></b>      <b class= "B2" ></b>      <b class= "B3" ></b>      <b class= "B4" ></b>       <b class= "H2" > Web Teaching Network five</b><br/>      <b class= "H3" > http://www.webjx.com/</b>      <span>      Web standards are Structure (Structure), performance (presentation) and behavior (Behavior) a standard set of three aspects      </span>      </a>   </li> </ul><b class= "B4" ></b><b class= "B3" ></b> <b class= "B2" ></b><b class= "B1" ></b></div>

<style type= "Text/css" ><!--#menu {font-size:12px; height:380px; margin:0; padding:0; width:180px; Overflow:hidden; Background: #f0f0f0; List-style:none; border-left:1px solid #cccccc; border-right:1px solid #cccccc;} #menu Li a {display:block; Text-decoration:none; Color: #00b; margin:0; width:100%; #menu Li a span {display:none; Color: #000; height:120px} #menu Li A.one span {display:block; margin:0 10px;} #menu li a:hover {background: #f1f1f1; #menu li A:hover span {display:block; margin:0 10px; Cursor:pointer;} #menu. h2 {margin:0 5px; padding:0; Color: #808; Font-variant:small-caps; border:0; } #menu. h3 {margin:0 5px; padding:0; Color: #00b; }.curved {width:180px; margin:0 Auto; }.curved. B1, curved B2,. Curved. b3,. Curved. b4 {font-size:1px; Display:block; Background: #88c; Overflow:hidden; }.curved. B1, curved B2,. Curved. b3 {height:1px;}. Curved B2, curved B3,. Curved. b4 {background: #f0f0F0; border-left:1px solid #cccccc; border-right:1px solid #cccccc; }.curved. b1 {margin:0 4px; Background: #cccccc; }.curved. b2 {margin:0 2px; border-width:0 2px; }.curved. b3 {margin:0 1px; }.curved. b4 {height:2px; margin:0px; }--></style><div class= "Curved" ><b class= "B1 C1" ></b><b class= "B2 C2" ></b> <b class= "B3 c3" ></b><b class= "B4 c4" ></b> <ul id= "menu" > <li> <a href= "# Nogo "> <b class=" H2 "> Web teaching network one</b><br/> <b class=" H3 ">http://www.webjx.com/</b&gt ; <span> Web standards are standard sets of structure (Structure), performance (presentation) and behavior (Behavior) </span> </a> & lt;/li> <li> <a href= "#nogo" > <b class= "B1" ></b> <b class= "B2" ></b&gt ; <b class= "B3" ></b> <b class= "B4" ></b> <b class= "H2" > Web page Teaching network two</b><br/&GT ; <b class= "H3" >http://www.webjx.com/</b> <span> Web standards are structure (Structure), performance (presentation), and behavior (Behavi OR) three-part standard set </span> </a> </li> <li> <a href= "#nogo" > <b class= "B1" ></b> <b class= "B2" ></b> <b class= "B3" ></b> <b class= "B4" ></b > <b class= "H2" > Web teaching network three</b><br/> <b class= "H3" >http://www.webjx.com/</b> <span> Web standards are standard sets of structure (Structure), performance (presentation) and behavior (Behavior) </span> </a> </li> <li> <a href= "#nogo" > <b class= "B1" ></b> <b class= "B2" ></b& Gt <b class= "B3" ></b> <b class= "B4" ></b> <b class= "H2" > Web page Teaching network four</b><br/&G T <b class= "H3" >http://www.webjx.com/</b> <span> Web standards are structure (Structure), performance (presentation), and behavior (be Havior) Standard set of three components </span> </a> </li> <li> <a class= "one" href= "#nogo" > ; b class= "B1" ></b> <b class= "B2" ></b> <b class= "B3" ></b> <b class= "B4" & gt;</b> <b class= "H2" > Web teaching network five</b><br/> <b class= "H3" >http://www.webjx.com/< /b> <span> Web standards are standard sets of structure (Structure), performance (presentation), and behavioral (Behavior) components </span> < /a> </li> </ul><b class= "B4" ></b><b class= "B3" ></b><b class= "B2" ></ B><b class= "B1" ></b></div>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]