Категории с разделами в меню
Прошу помощи в усовершенствовании горизонтального меню.
Я просто сделал как мог, а вот добавить ещё категорий с разделами не могу.. Вот ссылка |
Поясните словами , что нужно в Итоге и сделайте эскиз при клике
Скриншот и эскиз можно подгрузить сюда => http://uploads.ru/ |
Deff,
Там есть категория "Файлы", при клике на эту кнопку она исчезает и появляются разделы с кнопкой назад. Мне нужно сделать ещё несколько категорий с разделами. Ну вроде в меню всё понятно, нажал на "Файлы" появились разделы с кнопкой назад.. допустим добавить кнопку "Статьи" и при нажатии бы появлялись разделы, а разделы это обычные кнопки с ссылками ) Я могу это сделать но код очень большой будет, так вот подумал вы знаете способы полегче :) |
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
.arrow-left {
width:0px;
height:0px;
border-top:5px solid transparent;
border-left:5px solid #f7f7f7;
border-right:5px solid transparent;
border-bottom:5px solid transparent;
margin:0 auto;
display:inline-block;
margin-left:6px;
}
*, .a, .li, .ul {
margin:0;
padding:0;
outline:none;
text-decoration:none;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
list-style:none;
}
nav {
height: 26px;
width: 100%;
margin:0 auto;
right:0;
}
nav ul {
float:right;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
}
nav li {
float: left;
}
nav a {
position: relative;
display: block;
}
ul.active .uma2{
padding-bottom:0;
border-bottom:3px #EC862E solid;
}
ul.active li:nth-child(2) .uma2{
border-left:1px #EC862E solid!important;
}
.uma, .uma2{
cursor:pointer;
float:right;
display:block;
height:46px;
line-height:46px;
font-size:12px;
font-weight:bold;
font-family:Tahoma;
text-decoration:none;
color:#f8f8f8;
padding:0 14px 0 13px;
}
.uma:hover, .uma2:hover {
background:url(''), -moz-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d38e37), color-stop(100%,#c7783d));
background:url(''), -webkit-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -o-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -ms-linear-gradient(top, #d38e37, #c7783d);
background:url(''), linear-gradient(top, #d38e37, #c7783d);
}
.uma2.exit {
background:url(''), -moz-linear-gradient(top, #f89c28, #e98030);
background:url(''), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f89c28), color-stop(100%,#e98030));
background:url(''), -webkit-linear-gradient(top, #f89c28, #e98030);
background:url(''), -o-linear-gradient(top, #f89c28, #e98030);
background:url(''), -ms-linear-gradient(top, #f89c28, #e98030);
background:url(''), linear-gradient(top, #f89c28, #e98030);
}
.uma:active, .uma2:active {
box-shadow:inset 0 0 4px rgba(0,0,0,0.62);
padding:0 14px 0 12px;
border:1px solid rgba(0,0,0,0.5);
background:url(''), -moz-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d38e37), color-stop(100%,#c7783d));
background:url(''), -webkit-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -o-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -ms-linear-gradient(top, #d38e37, #c7783d);
background:url(''), linear-gradient(top, #d38e37, #c7783d);
}
</style>
<div style="width:100%;height:46px;background:#575f6b;position:fixed;z-index:1;">
<nav>
<ul>
<li><a href="#" class="uma">Файлы 1</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2 exit">Назад 1<div class="arrow-left"></div></a></li>
<li style="display:none"><a href="#" class="uma">Сообщения<span class="badge" style="display:none">2</span></a></li>
</ul>
<ul>
<li><a href="#" class="uma">Файлы 2</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2 exit">Назад 2<div class="arrow-left"></div></a></li>
<li style="display:none"><a href="#" class="uma">Сообщения<span class="badge" style="display:none">2</span></a></li>
</ul>
<ul>
<li><a href="#" class="uma">Файлы 3</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2 exit">Назад 3<div class="arrow-left"></div></a></li>
<li style="display:none"><a href="#" class="uma">Сообщения<span class="badge" style="display:none">2</span></a></li>
</ul>
</nav>
</div>
<script type="text/javascript">
$('.uma2').css({display:'none'});
$(document).ready(function(){
$(".uma").live('click',function(){
var a = $(this).parents("ul:first");
$("nav ul").removeClass('active');
a.addClass('active')
$('.uma2').hide('fast');
$('.uma').show('fast');
a.find('.uma').hide('fast');
a.find('.uma2').show('fast');
});
$(".exit").live('click',function(){
var a = $(this).parents("ul:first");
a.find('.uma2').hide('fast');
a.find('.uma').show('fast');
});
});
</script>
|
Deff,
Спасибо :)) |
Deff,
А можно добавить чтобы при клике остальные категории скрывались? |
Цитата:
|
Deff,
Скрывается только та на которую нажал |
up
|
fAmOus,
Ткните Спойлер в посте #4 |
Deff,
Там единственного не хватает.. Допустим когда нажимаешь на категорию Файлы 3 скрываются Файлы 2 и 1 |
fAmOus,
Не наю - у меня со всех браузеров скрываются - просите потестить еще кого то |
|
fAmOus,
ясно |
Цитата:
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
.arrow-left {
width:0px;
height:0px;
border-top:5px solid transparent;
border-left:5px solid #f7f7f7;
border-right:5px solid transparent;
border-bottom:5px solid transparent;
margin:0 auto;
display:inline-block;
margin-left:6px;
}
*, .a, .li, .ul {
margin:0;
padding:0;
outline:none;
text-decoration:none;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
list-style:none;
}
nav {
height: 26px;
width: 100%;
margin:0 auto;
right:0;
}
nav ul {
float:right;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
}
nav li {
float: left;
}
nav a {
position: relative;
display: block;
}
ul.active .uma2{
padding-bottom:0;
border-bottom:3px #EC862E solid;
}
ul.active li:nth-child(2) .uma2{
border-left:1px #EC862E solid!important;
}
.uma, .uma2{
cursor:pointer;
float:right;
display:block;
height:46px;
line-height:46px;
font-size:12px;
font-weight:bold;
font-family:Tahoma;
text-decoration:none;
color:#f8f8f8;
padding:0 14px 0 13px;
}
.uma:hover, .uma2:hover {
background:url(''), -moz-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d38e37), color-stop(100%,#c7783d));
background:url(''), -webkit-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -o-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -ms-linear-gradient(top, #d38e37, #c7783d);
background:url(''), linear-gradient(top, #d38e37, #c7783d);
}
.uma2.exit {
background:url(''), -moz-linear-gradient(top, #f89c28, #e98030);
background:url(''), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f89c28), color-stop(100%,#e98030));
background:url(''), -webkit-linear-gradient(top, #f89c28, #e98030);
background:url(''), -o-linear-gradient(top, #f89c28, #e98030);
background:url(''), -ms-linear-gradient(top, #f89c28, #e98030);
background:url(''), linear-gradient(top, #f89c28, #e98030);
}
.uma:active, .uma2:active {
box-shadow:inset 0 0 4px rgba(0,0,0,0.62);
padding:0 14px 0 12px;
border:1px solid rgba(0,0,0,0.5);
background:url(''), -moz-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d38e37), color-stop(100%,#c7783d));
background:url(''), -webkit-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -o-linear-gradient(top, #d38e37, #c7783d);
background:url(''), -ms-linear-gradient(top, #d38e37, #c7783d);
background:url(''), linear-gradient(top, #d38e37, #c7783d);
}
</style>
<div id="WrapAll" style="width:100%;height:46px;background:#575f6b;position:fixed;z-index:1;">
<nav>
<ul>
<li><a href="#" class="uma">Файлы 1</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2 exit">Назад 1<div class="arrow-left"></div></a></li>
<li style="display:none"><a href="#" class="uma">Сообщения<span class="badge" style="display:none">2</span></a></li>
</ul>
<ul>
<li><a href="#" class="uma">Файлы 2</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2 exit">Назад 2<div class="arrow-left"></div></a></li>
<li style="display:none"><a href="#" class="uma">Сообщения<span class="badge" style="display:none">2</span></a></li>
</ul>
<ul>
<li><a href="#" class="uma">Файлы 3</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2 exit">Назад 3<div class="arrow-left"></div></a></li>
<li style="display:none"><a href="#" class="uma">Сообщения<span class="badge" style="display:none">2</span></a></li>
</ul>
<ul>
<li><a href="#" class="uma">Файлы 4</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2">Раздел</a></li>
<li><a href="#" class="uma2 exit">Назад 4<div class="arrow-left"></div></a></li>
<li style="display:none"><a href="#" class="uma">Сообщения<span class="badge" style="display:none">2</span></a></li>
</ul>
</nav>
</div>
<script type="text/javascript">
$('.uma2').css({display:'none'});
$(document).ready(function(){
$(".uma").live('click',function(){
var a = $(this).parents("ul:first");
$("nav ul").removeClass('active');
a.addClass('active')
$('.uma2').hide();
$('.uma').show();
$('#WrapAll ul').not(a).hide('fast');
a.find('.uma').hide('fast');
a.find('.uma2').show('fast');
});
$(".exit").live('click',function(){
var a = $(this).parents("ul:first");
$('#WrapAll ul').not(a).show('fast');
a.find('.uma2').hide('fast');
a.find('.uma').show('fast');
});
});
</script>
|
Deff,
Да спасибо большое :) |
| Часовой пояс GMT +3, время: 01:58. |