Today, to share a tutorial how to use pure CSS3 to create accordion style menu, main menu by using the: target pseudo-class.
: target, use the
code is as follows:


<Ul class="accordion" >
<Li id="one" class="files" > <A href="http://www.jb51.net//css/#one" > My file <Span> 495 </span> </a> </LI>
<Li id="two" class="mail" > <A href="http://www.jb51.net//css/#two" > Mail <Span> 26 </span> </a> </LI>
<Li id="three" class="cloud" > <A href="http://www.jb51.net//css/#three" > A network backup <Span> 58 </span> </a> </LI>
<Li id="four" class="sign" > <A href="http://www.jb51.net//css/#four" > Log out </a> </LI>
</ul>

step 2: basic style menu layout
code is as follows:


accordion,
accordion ul,
accordion li,
a, accordion.
accordion span {
margin: 0;
the padding: 0;
border: none;
the outline: none;
text - align: left;

}. The accordion li {
the list - style: none;
}

definitions menu item link styles, add a gradient, the effect of shadow, define the font, etc. Here did not specify a fixed width, the width of the menu 100% fill its parent element, if you want to put the menu is set to 300 px, you can give it to add a parent div, specifying the width to 300 px. Although not specified width, defines the minimum width, ensure the menu layout to display correctly.

  code is as follows:  


accordion li > A {
display: block;
position: relative;
min - width: 110 px;
the padding: 0 10 px 40 0 px;
color: # FDFDFD;
the font: 14 px/32 px blackbody bold, song typeface.
text - decoration: none;
text - shadow: 0 px 1 px 0 px rgba (0, 0,. 35);
background: # 6 c6e74;
background: -- moz -- linear gradient (top, # 6 c6e74 0%, # 4 b4d51 100%);
background: webkit - gradient (linear, left, top, left, bottom, color - stop (0%, # 6 c6e74), color - stop (100%, # 4 b4d51));
background: -- webkit -- linear gradient (top, # 6 c6e74 0%, # 4 b4d51 100%);
background: -o - linear gradient (top, # 6 c6e74 0%, # 4 b4d51 100%);
background: - ms - linear gradient (top, # 6 c6e74 0%, # 4 b4d51 100%);
background: linear - gradient (top, # 6 c6e74 0%, # 4 b4d51 100%);
- webkit - box - shadow: an inset 0 px 1 px 0 px 0 px rgba (255255255, 1), 0 px 1 px 0 px 0 px rgba (, 0, 0, 1);
- moz - box - shadow: an inset 0 px 1 px 0 px 0 px rgba (255255255, 1), 0 px 1 px 0 px 0 px rgba (, 0, 0, 1);
the box - shadow: an inset 0 px 1 px 0 px 0 px rgba (255255255, 1), 0 px 1 px 0 px 0 px rgba (, 0, 0, 1);
}

define digital indicator style, of course, if you don't need digital indicator on the menu, you can delete the span element in the HTML structure.

  code is as follows:  


accordion li > A span {
display: block;
position: absolute;
top: 7 px;
right: 0;
the padding: 0 px;
margin - right: 10 px;
the font: normal 12 px/18 px bold Arial, sans-serif;
background: # 404247;
- webkit - border-radius: 15 px;
- moz - border-radius: 15 px;
border-radius: 15 px;
- webkit - box - shadow: an inset 1 px 1 px 1 px rgba (, 0, 0, 2), 1 px 1 px 1 px rgba (255255255, 1);
- moz - box - shadow: an inset 1 px 1 px 1 px rgba (, 0, 0, 2), 1 px 1 px 1 px rgba (255255255, 1);
the box - shadow: an inset 1 px 1 px 1 px rgba (, 0, 0, 2), 1 px 1 px 1 px rgba (255255255, 1);
}

the third step: add ICONS style
code is as follows:


accordion > Li > A: before {
position: absolute;
top: 0;
left: 0;
the content: "';
width: 24 px;
height: 24 px;
margin: 4 px 8 px;
background - repeat: no - repeat;
background - image: url (../images/ICONS. PNG);
background - position: 0 px 0 px;

}. The accordion li. The files > A: before {background - position: 0 px 0 px; }
. Accordion li. Files: hover > A: before,
accordion. Li files: target > A: before {background - position: 0 px - 24 px; }
. Accordion li. Mail > A: before {background - position: - 24 p 0 px; }
. Accordion li. Mail: hover > A: before,
accordion li. Mail: target > A: before {background - position: 24 px - 24 - px; }
. Accordion li. Cloud > A: before {48 px 0 px; background - position: - }
. Accordion li. Cloud: hover > A: before,
accordion li. The cloud: target > A: before {background - position: px - 24-48 pixels; }
. Accordion li. Sign > A: before {background - position: - 72 px 0 px; }
. Accordion li. Sign: hover > A: before,
accordion. Li sign: target > A: before {background - position: 24 px - 72 px -; }

the fourth step: submenu HTML and style
code is as follows:


<Li id="one" > <A href="http://www.jb51.net//css/#one" > My file <Span> 495 </span> </a>
<Ul>
<LI> <A href="javascript: void (0);" > <Em> 01 </em> Music <Span> 42 </span> </a> </LI>
<LI> <A href="javascript: void (0);" > <Em> 02 </em> Video <Span> 87 </span> </a> </LI>
<LI> <A href="javascript: void (0);" > <Em> 03 </em> Pictures <Span> 366 </span> </a> </LI>
</ul>
</LI>

CSS:

  code is as follows:  


sub - menu li a {
the font: 12 px/32 px blackbody bold, song typeface.
color: # 797979;
text - shadow: 1 px 1 px 0 px rgba (255255255, 2);
background: # e5e5e5;
border - bottom: 1 px solid # c9c9c9;
- webkit - box - shadow: an inset 0 px 1 px 0 px 0 px rgba (255255255, 1), 0 px 1 px 0 px 0 px rgba (, 0, 0, 1);
- moz - box - shadow: an inset 0 px 1 px 0 px 0 px rgba (255255255, 1), 0 px 1 px 0 px 0 px rgba (, 0, 0, 1);
the box - shadow: an inset 0 px 1 px 0 px 0 px rgba (255255255, 1), 0 px 1 px 0 px 0 px rgba (, 0, 0, 1);

}. The sub - menu li: last - child - a {border: none; }
sub - menu li > A span {
color: # 797979;
text - shadow: 1 px 1 px 0 px rgba (255255255, 2);
background: transparent;
border: 1 px solid # c9c9c9;
- webkit - box - shadow: none;
- moz - box - shadow: none;
the box - shadow: none;

}. The sub menu em - {
position: absolute;
top: 0;
left: 0;
margin - left: 14 px;
color: # a6a6a6;
the font: normal 10 px/32 px Arial, sans-serif;
}

step 5: define a mouseover and menu activated state style
code is as follows:


accordion > Li: hover > A,
accordion > Li: target > A {
color: # 3 e5706;
text - shadow: 1 px 1 px 1 px rgba (255255255, 2);
background: # a5cd4e;
background: -- moz -- linear gradient (top, # a5cd4e 0%, # 6 b8f1a 100%);
background: webkit - gradient (linear, left, top, left, bottom, color - stop (0%, # a5cd4e), color - stop (100%, # 6 b8f1a));
background: -- webkit -- linear gradient (top, # a5cd4e 0%, # 6 b8f1a 100%);
background: -o - linear gradient (top, # a5cd4e 0%, # 6 b8f1a 100%);
background: - ms - linear gradient (top, # a5cd4e 0%, # 6 b8f1a 100%);
background: linear - gradient (top, # a5cd4e 0%, # 6 b8f1a 100%);

}. The accordion > Li: hover > A span,
accordion > Li: target > A span {
color: # FDFDFD;
text - shadow: 0 px 1 px 0 px rgba (0, 0,. 35);
background: # 3 e5706;

}. The sub - menu li: hover a {background: # efefef; }

step 6: control the sub menu display and hide the
code is as follows:


accordion li > . Sub - menu {
height: 0;
overflow: hidden;
- webkit - transition: all. 2 s ease - in-out;
- moz - transition: all. 2 s ease - in-out;
- o - the transition: all. 2 s ease - in-out;
- ms - transition: all. 2 s ease - in-out;
the transition: all. 2 s ease - in-out;

}. The accordion li: target > . Sub - menu {
height: 98 px;
}

summary


This concludes the body part