вопрос
Привет всем! Нуждаюсь в вашей помощи, а именно: Есть код меню(html/css) и код второго меню(html/css) вопрос такого плана: Как их соединить в одно целое, чтобы при нажатии на иконку выдвигалось меню №2?
Пример:
Меню №1
HTML
CSS
Меню №2
HTML
CSS
Пример:
Меню №1
HTML
<div id="header">
<ul class="navigation">
<li class="software"><a href="/software/">Software</a></li>
<li class="games"><a href="/game/">Games</a></li>
<li class="movies"><a href="/movies/">Movies</a></li>
<li class="music"><a href="/music/">Music</a></li>
<li class="shows"><a href="/tv-shows/">TV Shows</a></li>
<li class="ebooks"><a href="/ebooks/">eBooks</a></li>
<li class="magazines"><a href="/magazines/">Magazines</a></li>
<li class="graphics"><a href="/graphics/">Graphics</a></li>
<li class="tutorials"><a href="/tutorials/">Tutorials</a></li>
<li class="mobiles"><a href="/mobil/">PDA / Mobiles</a></li>
<li class="portables"><a href="/portable/">Portables</a></li>
<li class="wallpapers"><a href="/wallpaper/">Wallpapers</a></li>
<li class="others"><a href="/misc/">Others</a></li>
<li class="forums"><a href="/forums/" target="_blank">Forums</a></li>
<li class="sitemap"><a href="/sitemap.html">Sitemap</a></li>
</ul>
CSS
#header {
position: relative;
padding: 45px 0 0 0;
height: 165px;
}
#header .navigation {
margin: 0 auto; padding: 0;
list-style-type: none;
width: 1125px;
}
#header .navigation li {
float: left;
background: no-repeat url(../images/bckheadernavigation.png);
font-size: 11px;
}
#header .navigation .software {
background-position: center top;
}
#header .navigation .games {
background-position: center -60px;
}
#header .navigation .movies {
background-position: center -120px;
}
#header .navigation .music {
background-position: center -180px;
}
#header .navigation .shows {
background-position: center -240px;
}
#header .navigation .ebooks {
background-position: center -300px;
}
#header .navigation .magazines {
background-position: center -360px;
}
#header .navigation .graphics {
background-position: center -420px;
}
#header .navigation .tutorials {
background-position: center -480px;
}
#header .navigation .mobiles {
background-position: center -540px;
}
#header .navigation .portables {
background-position: center -600px;
}
#header .navigation .wallpapers {
background-position: center -660px;
}
#header .navigation .others {
background-position: center -720px;
}
#header .navigation .forums {
background-position: center -780px;
}
#header .navigation .sitemap {
background-position: center -840px;
}
#header .navigation a {
float: left;
padding: 45px 0 0 0;
width: 75px;
text-align: center; line-height: 15px;
color: #5b5b5b;
text-decoration: none;
}
#header .navigation a:hover {
color: #ec006a;
text-decoration: underline;
Меню №2
HTML
<div class="media-ranking">
<ul class="nav controls">
<li><a>Софт</a></li>
<li><a>Алфавит</a></li>
</ul>
<div class="case genres">
<ul class="nav">
<li><a href="#">Анимация</a></li>
</ul>
</div>
<div class="case alphabet">
<ul class="nav">
<li><a href="#">0-9</a></li>
<li><a href="#">А</a></li>
<li><a href="#">Б</a></li>
<li><a href="#">В</a></li>
<li><a href="#">Г</a></li>
<li><a href="#">Д</a></li>
<li><a href="#">Е</a></li>
<li><a href="#">Ж</a></li>
<li><a href="#">З</a></li>
<li><a href="#">И</a></li>
<li><a href="#">К</a></li>
<li><a href="#">Л</a></li>
<li><a href="#">М</a></li>
<li><a href="#">Н</a></li>
<li><a href="#">О</a></li>
<li><a href="#">П</a></li>
<li><a href="#">Р</a></li>
<li><a href="#">С</a></li>
<li><a href="#">Т</a></li>
<li><a href="#">У</a></li>
<li><a href="#">Ф</a></li>
<li><a href="#">X</a></li>
<li><a href="#">Ц</a></li>
<li><a href="#">Ч</a></li>
<li><a href="#">Ш</a></li>
<li><a href="#">Щ</a></li>
<li><a href="#">Э</a></li>
<li><a href="#">Ю</a></li>
<li><a href="#">Я</a></li>
</ul>
</div>
</div>
CSS
.media-ranking{position:relative;}
.media-ranking .controls{position:absolute;left:20px;top:-25px;float:left;}
.media-ranking .controls li{float:left;}
.media-ranking .controls li a{display:block;padding:0 16px;height:25px;color:#000000;font-size:.85em;line-height:25px;text-transform:uppercase;cursor:pointer;border-radius:2px 2px 0 0;}
.media-ranking .controls li a:hover{color:#1a74a9;}
.media-ranking .controls li.current a,.media-ranking .controls li.current a:hover{color:#ffffff;background:#7dbe0c;}
.media-ranking .case{display:none;padding:5px 20px;color:#ffffff;background:#7dbe0c;}
.media-ranking .case.visible{display:block;}
.media-ranking .case ul{overflow:hidden;}
.media-ranking .case ul li{float:left;}
.media-ranking .case a{display:block;float:left;padding:1px 7px;color:#ffffff;border-radius:2px;}
.media-ranking .case a:hover{color:#1a74a9;background:#ffffff;}
.media-ranking .case.genres ul li{width:133px;}
.media-ranking .case.alphabet ul li{margin-right:5px;}
