Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Категории с разделами в меню (https://javascript.ru/forum/dom-window/30038-kategorii-s-razdelami-v-menyu.html)

fAmOus 22.07.2012 01:06

Категории с разделами в меню
 
Прошу помощи в усовершенствовании горизонтального меню.
Я просто сделал как мог, а вот добавить ещё категорий с разделами не могу..
Вот ссылка

Deff 22.07.2012 01:23

Поясните словами , что нужно в Итоге и сделайте эскиз при клике
Скриншот и эскиз можно подгрузить сюда => http://uploads.ru/

fAmOus 22.07.2012 16:51

Deff,
Там есть категория "Файлы", при клике на эту кнопку она исчезает и появляются разделы с кнопкой назад.
Мне нужно сделать ещё несколько категорий с разделами.

Ну вроде в меню всё понятно, нажал на "Файлы" появились разделы с кнопкой назад.. допустим добавить кнопку "Статьи" и при нажатии бы появлялись разделы, а разделы это обычные кнопки с ссылками )

Я могу это сделать но код очень большой будет, так вот подумал вы знаете способы полегче :)

Deff 22.07.2012 17:24

<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>

fAmOus 22.07.2012 23:06

Deff,
Спасибо :))

fAmOus 22.07.2012 23:48

Deff,
А можно добавить чтобы при клике остальные категории скрывались?

Deff 22.07.2012 23:57

Цитата:

Сообщение от fAmOus
А можно добавить чтобы при клике остальные категории скрывались?

Сейчас так и есть - просто Три одинаковых - названия Файлы - поменяйте на разные

fAmOus 23.07.2012 00:31

Deff,
Скрывается только та на которую нажал

fAmOus 26.07.2012 13:57

up

Deff 26.07.2012 14:58

fAmOus,
Ткните Спойлер в посте #4


Часовой пояс GMT +3, время: 05:35.