Как-то так:
| Код |
<html>
<head>
<meta charset="UTF8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var toggleMenuItem = function(sender, submenu) {
submenu.slideToggle(400);
$(sender).toggleClass('menuExpanded');
}
</script>
<style type="text/css">
.menuExpanded {
background-color: #e5ae93 !important;
}
.menu2 {
height: 30px;
width: 270px;
text-align: left;
margin-top:1px;
}
.menu2 a:link, .menu2 a:visited {
color:#CC5D28;
padding-left:20px;
line-height:30px;
display:block;
font-weight:normal;
background: #ffffff;
border-top: 1px solid #CC5D28;
border-right: 1px solid #CC5D28;
border-left: 1px solid #CC5D28;
border-bottom: 1px solid #CC5D28;
text-align: left;
margin-top:1px;
}
.menu2 a:hover {
color:#000000;
text-shadow:0 0 5px;
padding-left:20px;
line-height:30px;
display:block;
font-weight:normal;
background: #ffffff;
text-align: left;
margin-top:1px;
}
</style>
</head>
<body>
<span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu2'))" href="javascript://"><b>Категория 1</b></a>
</span>
<div id="menu2" style="display:none">
<span class="menu">
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
</span>
</div>
<span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu3'))" href="javascript://"><b>Категория 2</b></a>
</span>
<div id="menu3" style="display:none">
<span class="menu">
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
</span>
</div>
<span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu4'))" href="javascript://"><b>Категория 3</b></a>
</span>
<div id="menu4" style="display:none">
<span class="menu">
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
</span>
</div>
<span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu5'))" href="javascript://"><b>Категория 4</b></a>
</span>
<div id="menu5" style="display:none">
<span class="menu">
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
</span>
</div>
<span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu6'))" href="javascript://"><b>Категория 5</b></a>
</span>
<div id="menu6" style="display:none">
<span class="menu">
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
</span>
</div>
<span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu7'))" href="javascript://"><b>Категория 6</b></a>
</span>
<div id="menu7" style="display:none">
<span class="menu" align="left">
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
</span>
</div>
<span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu8'))" href="javascript://"><b>Категория 7</b></a>
</span>
<div id="menu8" style="display:none">
<span class="menu">
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
<li><a href="/" title="">Ссылка</a>
</li>
</span>
</div>
</body>
</html>
|
|
