Верхняя панель навигации
Выезжающая сверху панель навигации с градиентов в стиле aero инебольшой прозрачностью. Плюс добавлены иконки закладок для наглядности.
HTML
<div class="menu_wrap">
<div class="menu_links">
<ul>
<li><a class="first" href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Ссылки</a></li>
</ul>
</div>
<div class="menu_buttons">
<ul>
<li><a class="first" href="#"><img src="facebook.png" alt="Facebook" width="32" height="32" border="0"></a></li>
<li><a href="#"><img src="twitter.png" alt="Twitter" width="32" height="32" border="0"></a></li>
<li><a href="#"><img src="delicious.png" alt="Delicious" width="32" height="32" border="0"></a></li>
<li><a href="#"><img src="rss.png" alt="RSS" width="32" height="32" border="0"></a></li>
</ul>
</div>
</div>CSS
.menu_wrap {
left: 0px;
top: 0px;
right: 0px;
z-index: 999;
width: 100%;
height: 50px;
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* webkit */
-webkit-box-shadow: 0px 2px 5px #000000;
-moz-box-shadow: 0px 2px 5px #000000;
box-shadow: 0px 2px 5px #000000;
position: fixed;
margin-top:-30px;
}
.menu_links ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu_links ul li {
display: inline;
}
.menu_links ul li a {
float:left;
line-height: 50px;
padding-right: 20px;
padding-left: 20px;
color: #FFF;
font-size: 22px;
text-decoration: none;
text-shadow: -1px -1px 1px #333;
display: block;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
}
.menu_links ul li a:hover {
color: #000;
text-shadow: -1px -1px 1px #EEE;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* webkit */
}
.menu_buttons {
float:right;
line-height: 50px;
height: 50px;
margin-right: 30px;
}
.menu_buttons ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu_buttons ul li {
display: inline;
height: 50px;
}
.menu_buttons ul li a {
float:left;
padding-right: 10px;
display: block;
border:none;
line-height: 50px;
padding-left: 10px;
height: 50px;
padding-top: 10px;
}
.first {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
}
.menu_links {
height: 50px;
float: left;
margin-left: 100px;
}JS
Подключаем jQuery и пишем скрипт управляющий прозрачность и анимацией:
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/jаvascript">
$(document).ready( function () {
if($.browser.msie){
$('.menu_wrap').css({'background-color' : '#b8e1fc','position' : 'absolute','width' : '100%'});
}
$('.menu_wrap').css({'opacity' : '0.3'});
$('.menu_wrap').hover ( function () {
$(this).animate({'margin-top' : '0px','opacity' : '1'});
$('.menu_buttons img').animate({'opacity' : '.5'});
}, function () {
$(this).animate({'margin-top' : '-30px','opacity' : '0.3'});
});
$('.menu_buttons img').hover ( function () {
$(this).animate({'opacity' : '1'});
}, function () {
$(this).animate({'opacity' : '0.5'});
});
});
</script>Ссылки
