вертикальное меню
zzMaddyzz,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
a{text-decoration:none}
.menu-block{width:240px;height:auto;border:2px solid black;border-radius:6px;box-shadow:0px 1px 12px 3px rgba(0,0,0,0.95);margin:5% 0 0 5%}
.menu-block>ul{margin:0;padding:0}
.menu-block>ul>li{list-style:none;border-bottom:2px solid black}
#first{border-radius:3px 3px 0px 0px}
#last{border-bottom:none;overflow:hidden;border-radius:0 0 3px 3px}
.menu-block>ul>li>a{border-top:2px solid #757881;font:16px Verdana;color:#f4f6fa;background:linear-gradient(to top,#3a3d47,#4d505a);text-shadow:0px 1px 0px rgba(0,0,0,0.5);display:block;padding-left:15%;padding-top:10px;padding-bottom:13px}
.menu-block>ul>li>a:hover{border-top:2px solid #a5ba47;background:linear-gradient(to top,#58641c,#95a52c);cursor:pointer}
.menu-block>ul>li>a.active{background:linear-gradient(to top,#58641c,#95a52c);border-top:2px solid #a5ba47;box-shadow:inset 0px 1px 9px 1px rgba(50,50,50,0.55)}
.category-section{background:#2d3239;display:none}
.category-section>li{list-style:none}
.category-section>li>a{font:14px Verdana;color:#b0ce13;display:block;margin-left:14px;padding-top:7px}
.category-section>li>a:hover{cursor:pointer}
.pointer-img{position:absolute;margin-left:-15px;margin-top:5px;border:none;display:block}
.second-section{display:none;margin-left:-10px;margin-top:4px}
.second-section>li{list-style:disc;color:#708409}
.second-section>li>a{font:14px Verdana;color:#708409;display:block;padding-bottom:7px}
.second-section>li:hover,.second-section>li>a:hover{color:#cfd0d1;cursor:pointer}
.second-section>li:active,.second-section>li>a:active{color:#cfd0d1}
.sublink{position:relative}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(function() {
$(".second-section, .category-section").each(function(f, c) {
var a = $(this).prev(),
d = $(this).parent(),
b = $("img", a);
a.click(function(e) {
e.preventDefault();
d.siblings().find("a.active").click();
a.toggleClass("active");
$(c).stop().slideToggle();
b.length && b.css("transform", a.is(".active") ? "rotate(90deg)" : "rotate(0deg)")
})
})
});
</script>
<title>Test - Menu</title>
</head>
<body>
<div class="menu-block">
<ul>
<li>
<a id ="first" href="#" alt="">Сделать ставку</a>
<ul class="category-section">
<li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
<ul class="second-section">
<li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
<li><a href="#" alt="">Подкатегория active</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" alt="">Результаты матчей</a>
<ul class="category-section">
<li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
<ul class="second-section">
<li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
<li><a href="#" alt="">Подкатегория active</a></li>
</ul>
</li>
<li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
<ul class="second-section">
<li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
<li><a href="#" alt="">Подкатегория active</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" alt="">Правила</a>
<ul class="category-section">
<li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
<ul class="second-section">
<li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
<li><a>Подкатегория active</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" alt="">Анонсы матчей</a>
<ul class="category-section">
<li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
<ul class="second-section">
<li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
<li><a href="#" alt="">Подкатегория active</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" alt="">Новости проекта</a>
<ul class="category-section">
<li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
<ul class="second-section">
<li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
<li><a href="#" alt="">Подкатегория active</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" alt="">Реферальная программа</a>
<ul class="category-section">
<li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
<ul class="second-section">
<li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
<li><a href="#" alt="">Подкатегория active</a></li>
</ul>
</li>
<li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
<ul class="second-section">
<li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
<li><a href="#" alt="">Подкатегория active</a></li>
</ul>
</li>
</ul>
</li>
<li id ="last">
<a>Благотворительность</a>
<ul class="category-section">
<li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
<ul class="second-section">
<li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
<li><a href="#" alt="">Подкатегория active</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
|