Показать сообщение отдельно
  #4 (permalink)  
Старый 22.07.2012, 17:24
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<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, 26.07.2012 в 20:01.
Ответить с цитированием