Old YouTube style category menu
Preview:
HTML
Code
<div class="block">
<div class="blockcontent">
<li><a href="#"><span class="g"> Gaming </span></a></li>
<li><a href="#"><span class="b"> Blog </span></a></li>
<li><a href="#"><span class="p"> Pranks </span></a></li>
<li><a href="#"><span class="s"> Sketch </span></a></li>
<li><a href="#"><span class="m"> Music </span></a></li>
<li><a href="#"><span class="c"> Comedy </span></a></li>
<li><a href="#"><span class="i"> Informative </span></a></li>
<li><a href="#"><span class="a"> Animal </span></a></li>
<li><a href="#"><span class="f"> Food </span></a></li>
<li><a href="#"><span class="sp"> Sport </span></a></li>
<li><a href="#"><span class="se"> Reviews </span></a></li>
<li><a href="#"><span class="ba"> Babies </span></a></li>
<li><a href="#"><span class="fa"> Fail </span></a></li>
<li><a href="#"><span class="h"> How to & Tutorials </span></a></li>
</div>
</div>
<div class="blockcontent">
<li><a href="#"><span class="g"> Gaming </span></a></li>
<li><a href="#"><span class="b"> Blog </span></a></li>
<li><a href="#"><span class="p"> Pranks </span></a></li>
<li><a href="#"><span class="s"> Sketch </span></a></li>
<li><a href="#"><span class="m"> Music </span></a></li>
<li><a href="#"><span class="c"> Comedy </span></a></li>
<li><a href="#"><span class="i"> Informative </span></a></li>
<li><a href="#"><span class="a"> Animal </span></a></li>
<li><a href="#"><span class="f"> Food </span></a></li>
<li><a href="#"><span class="sp"> Sport </span></a></li>
<li><a href="#"><span class="se"> Reviews </span></a></li>
<li><a href="#"><span class="ba"> Babies </span></a></li>
<li><a href="#"><span class="fa"> Fail </span></a></li>
<li><a href="#"><span class="h"> How to & Tutorials </span></a></li>
</div>
</div>
CSS
Code
.block {
margin: 10px 0;
border-bottom: 1px dotted #bbb;
box-shadow: 0px 0px 7px rgba(0,0,0,.2);
width: 300px;
background: #fff;
}
.block:last-child {
border-bottom: 0;
}
.blocktitle {
font-size: 1.143em;
line-height: 1.5;
font-weight: bold;
text-align: center;
}
.blockcontent {
margin: 15px 0 20px;
display: table;
width: 100%;
}
.g{
background: url(http://aafilm.clan.su/img/categories/g.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.g:hover{
background: url(http://aafilm.clan.su/img/categories/gh.png) no-repeat left center;
background-position-x: 16px;
}
.b{
background: url(http://aafilm.clan.su/img/categories/b.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.b:hover{
background: url(http://aafilm.clan.su/img/categories/bh.png) no-repeat left center;
background-position-x: 16px;
}
.p{
background: url(http://aafilm.clan.su/img/categories/p.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.p:hover{
background: url(http://aafilm.clan.su/img/categories/ph.png) no-repeat left center;
background-position-x: 16px;
}
.s{
background: url(http://aafilm.clan.su/img/categories/s.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.s:hover{
background: url(http://aafilm.clan.su/img/categories/sh.png) no-repeat left center;
background-position-x: 16px;
}
.m{
background: url(http://aafilm.clan.su/img/categories/m.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.m:hover{
background: url(http://aafilm.clan.su/img/categories/mh.png) no-repeat left center;
background-position-x: 16px;
}
.c{
background: url(http://aafilm.clan.su/img/categories/c.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.c:hover{
background: url(http://aafilm.clan.su/img/categories/ch.png) no-repeat left center;
background-position-x: 16px;
}
.i{
background: url(http://aafilm.clan.su/img/categories/i.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.i:hover{
background: url(http://aafilm.clan.su/img/categories/ih.png) no-repeat left center;
background-position-x: 16px;
}
.a{
background: url(http://aafilm.clan.su/img/categories/a.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.a:hover{
background: url(http://aafilm.clan.su/img/categories/ah.png) no-repeat left center;
background-position-x: 16px;
}
.f{
background: url(http://aafilm.clan.su/img/categories/f.png) no-repeat left center;
background-position-x: 19px;
display: block;
padding: 7px;
padding-left: 40px;
}
.f:hover{
background: url(http://aafilm.clan.su/img/categories/fh.png) no-repeat left center;
background-position-x: 19px;
}
.sp{
background: url(http://aafilm.clan.su/img/categories/sp.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.sp:hover{
background: url(http://aafilm.clan.su/img/categories/sph.png) no-repeat left center;
background-position-x: 16px;
}
.se{
background: url(http://aafilm.clan.su/img/categories/se.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.se:hover{
background: url(http://aafilm.clan.su/img/categories/seh.png) no-repeat left center;
background-position-x: 16px;
}
.ba{
background: url(http://aafilm.clan.su/img/categories/ba.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.ba:hover{
background: url(http://aafilm.clan.su/img/categories/bah.png) no-repeat left center;
background-position-x: 16px;
}
.fa{
background: url(http://aafilm.clan.su/img/categories/fa.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.fa:hover{
background: url(http://aafilm.clan.su/img/categories/fah.png) no-repeat left center;
background-position-x: 16px;
}
.h{
background: url(http://aafilm.clan.su/img/categories/h.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.h:hover{
background: url(http://aafilm.clan.su/img/categories/hh.png) no-repeat left center;
background-position-x: 16px;
}
.blockcontent a{
display: block;
color:#333;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
}
.blockcontent a:hover{
background: #96d6df;
color:#fff;
}
.blockcontent li {
list-style: none;
}
margin: 10px 0;
border-bottom: 1px dotted #bbb;
box-shadow: 0px 0px 7px rgba(0,0,0,.2);
width: 300px;
background: #fff;
}
.block:last-child {
border-bottom: 0;
}
.blocktitle {
font-size: 1.143em;
line-height: 1.5;
font-weight: bold;
text-align: center;
}
.blockcontent {
margin: 15px 0 20px;
display: table;
width: 100%;
}
.g{
background: url(http://aafilm.clan.su/img/categories/g.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.g:hover{
background: url(http://aafilm.clan.su/img/categories/gh.png) no-repeat left center;
background-position-x: 16px;
}
.b{
background: url(http://aafilm.clan.su/img/categories/b.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.b:hover{
background: url(http://aafilm.clan.su/img/categories/bh.png) no-repeat left center;
background-position-x: 16px;
}
.p{
background: url(http://aafilm.clan.su/img/categories/p.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.p:hover{
background: url(http://aafilm.clan.su/img/categories/ph.png) no-repeat left center;
background-position-x: 16px;
}
.s{
background: url(http://aafilm.clan.su/img/categories/s.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.s:hover{
background: url(http://aafilm.clan.su/img/categories/sh.png) no-repeat left center;
background-position-x: 16px;
}
.m{
background: url(http://aafilm.clan.su/img/categories/m.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.m:hover{
background: url(http://aafilm.clan.su/img/categories/mh.png) no-repeat left center;
background-position-x: 16px;
}
.c{
background: url(http://aafilm.clan.su/img/categories/c.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.c:hover{
background: url(http://aafilm.clan.su/img/categories/ch.png) no-repeat left center;
background-position-x: 16px;
}
.i{
background: url(http://aafilm.clan.su/img/categories/i.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.i:hover{
background: url(http://aafilm.clan.su/img/categories/ih.png) no-repeat left center;
background-position-x: 16px;
}
.a{
background: url(http://aafilm.clan.su/img/categories/a.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.a:hover{
background: url(http://aafilm.clan.su/img/categories/ah.png) no-repeat left center;
background-position-x: 16px;
}
.f{
background: url(http://aafilm.clan.su/img/categories/f.png) no-repeat left center;
background-position-x: 19px;
display: block;
padding: 7px;
padding-left: 40px;
}
.f:hover{
background: url(http://aafilm.clan.su/img/categories/fh.png) no-repeat left center;
background-position-x: 19px;
}
.sp{
background: url(http://aafilm.clan.su/img/categories/sp.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.sp:hover{
background: url(http://aafilm.clan.su/img/categories/sph.png) no-repeat left center;
background-position-x: 16px;
}
.se{
background: url(http://aafilm.clan.su/img/categories/se.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.se:hover{
background: url(http://aafilm.clan.su/img/categories/seh.png) no-repeat left center;
background-position-x: 16px;
}
.ba{
background: url(http://aafilm.clan.su/img/categories/ba.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.ba:hover{
background: url(http://aafilm.clan.su/img/categories/bah.png) no-repeat left center;
background-position-x: 16px;
}
.fa{
background: url(http://aafilm.clan.su/img/categories/fa.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.fa:hover{
background: url(http://aafilm.clan.su/img/categories/fah.png) no-repeat left center;
background-position-x: 16px;
}
.h{
background: url(http://aafilm.clan.su/img/categories/h.png) no-repeat left center;
background-position-x: 16px;
display: block;
padding: 7px;
padding-left: 40px;
}
.h:hover{
background: url(http://aafilm.clan.su/img/categories/hh.png) no-repeat left center;
background-position-x: 16px;
}
.blockcontent a{
display: block;
color:#333;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
}
.blockcontent a:hover{
background: #96d6df;
color:#fff;
}
.blockcontent li {
list-style: none;
}
Total comments: 0 | |