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