» »

Верхние меню для сайта uCoz


О меню:
Красивое верхнее меню для сайта системы ucoz. Шикарно будит смотреться на светлых сайтов. Как видите в меню есть поиск, кнопки в нем по дизайну выпуклые, смотрится красиво.
Code
<style>  
.topMenu{border-top:1px solid #51708c;border-bottom:1px solid #51708c;background:#648aad url("http://zornet.ru/zornet_ru7/noize.png");}  
.topMenu2{border-bottom:1px solid #769abc;background:url("http://zornet.ru/zornet_ru7/highlight_faint.png") repeat-x 0 0;font-size:11px;color:#fafafa;text-shadow:0 -1px 0 #597a98;}  
a.logotype:link, a.logotype:visited{text-decoration:none;display:inline-block;*display:inline;padding:1px 0;background:url("http://zornet.ru/zornet_ru7/uSitelogo.1328454987.png") no-repeat 0 -1px;width:96px;height:24px;margin:2px 4px 1px 0;vertical-align:top;}  
a.logotype:hover, a.logotype:active{text-decoration:none;}  
.wraphmenu{display:inline-block;*display:inline;border-left:1px solid #51708c;border-right:1px solid #769abc;margin-bottom:-1px;}  
a.hmenu:link, a.hmenu:visited{text-decoration:none;font-size:11px;color:#fafafa;background:#648aad url("http://usite.su/img/noize.png");border-left:1px solid #769abc;border-right:1px solid #51708c;display:inline-block;*display:inline;}  
a.hmenu:hover, a.hmenu:active{text-decoration:none;color:#fff;background:#6e96b5 url("http://zornet.ru/zornet_ru7/noize.png");border-left-color:#78a1bd;}  
a.hmenu span.h{padding:8px 15px 8px 15px;background:url("http://zornet.ru/zornet_ru7/highlight_faint.png") repeat-x 0 0;display:inline-block;*display:inline;border-bottom:1px solid #769abc;font-weight:bold;line-height:13px;}  
.wrap-r-tools{width:364px;float:right;text-align:right;}  
.h .mprofAvat{width:23px;}  
.h .mprofAvat img{width:23px;height:23px;border:1px solid #51708c;}  
.h .mprofText{vertical-align:top;padding-left:5px;font-size:11px;font-weight:bold;color:#fff;}  
.h .mprofText div{font-size:10px;font-weight:normal;color:#d8eaf9;line-height:12px;}  
.inputPoisk{margin-top:4px;vertical-align:top;width:100%;border:1px solid #51708c !important;}  
.left-side{width:234px;border-left:1px solid #ddd;border-right:1px solid #ddd;background:rgba(245,245,245,0.65);-moz-box-shadow:inset 0px 0 0 0 #333, inset -12px 0 8px -8px #e9e9e9;-webkit-box-shadow:inset 0px 0 0 0 #333, inset -12px 0 8px -8px #e9e9e9;box-shadow:inset 0px 0 0 0 #333, inset -12px 0 8px -8px #e9e9e9;}  
.side-news-t{background:url("http://usite.su/img/new/tr/newspaper.png") no-repeat 0px 1px;padding:3px 5px 3px 23px;color:#51708c;}  
.side-news-m{padding-top:1px;padding-left:23px;line-height:15px;color:#3d3d3d;}  
</style>  

<!--U1AHEADER1Z-->  

<script src="/js/jquery.mousewheel.min.js"></script>  
<script src="/js/common.js"></script>  
<script src="/js/jquery.json-2.3.min.js"></script>  
<script src="/js/jquery.autoresize.js"></script>  

<div style="position: fixed; top: 0px; width: 100%; z-index: 99999;">  
<div class="topMenu"><div class="topMenu2"><div class="wrapdiz">  

<div class="wrap-r-tools">  
<table border="0" cellpadding="0" cellspacing="0" width="100%">  
<tr>  
<td valign="top" align="left">  
<input type="text" value="" placeholder="Поиск" name="q" maxlength="100" class="inputPoisk" />  

</td>  
<td valign="top" align="right" style="padding-left: 5px;">  
<div class="wraphmenu" id="ws" style="margin-right: -1px;">  
<a href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-110,{autosize:0,closeonesc:1,resize:1},{url:'/index/40'});return false;" class="hmenu" style="vertical-align: top;"><span class="h">Войти</span></a><a href="http://usite.su/index/3" class="hmenu" style="vertical-align: top;"><span class="h">Регистрация</span></a>  
</div>  
</td>  
</tr></table>  
</div>  

<a href="/" class="logotype rad2"></a><div class="wraphmenu"><a href="/forum" class="hmenu"><span class="h">Форум</span></a><a tt="Скоро.." href="javascript://" class="hmenu"><span class="h">Блоги</span></a><a tt="Откроются вместе с блогами" href="javascript://" class="hmenu"><span class="h">Мануалы</span></a><a href="/forum/0-0-1-34" class="hmenu"><span class="h">Новые посты</span></a><a href="/forum/0-0-1-35" class="hmenu"><span class="h">Люди</span></a></div>  

</div></div></div>  
</div><div style="padding-top: 32px;"></div>  

<script type="text/javascript">  
$('#ws').parent('td').css('width', $('#ws').width()+1+'px');  
$('.inputPoisk').css('width', $('.inputPoisk').width()+8+'px');  
sw = $('.inputPoisk').width();  

$('.inputPoisk').focus(function(){  
$('#ws').parent('td').animate({opacity: '0'}, 100).hide();  
$(this).animate({width: '100%'}, 500);  
});  
$('.inputPoisk').blur(function(){  
if($(this).val().length<1){  
$('.saer-wrap').animate({opacity: '0'}, 100).hide();  

$(this).animate({width: sw+8+'px'}, 50);  
$('#ws').parent('td').animate({opacity: '1'}, 100).fadeIn('slow');  
}  
});  
$(document).ready(function() {  
  $('[tt], #tta').hover(function() {  
  $('#tta').remove()  
  $(this).append('<div id="tta"><div class="ttu"></div><div class="tt"><div class="ttb">' + $(this).attr('tt') + '</div></div>');  
  $('#tta').css({'left': $(this).offset().left + $(this).innerWidth() / 2 - $(this).children('#tta').innerWidth() / 2,'paddingTop': 5, 'opacity':'0'}).animate({'paddingTop': 0, 'opacity':'1'}, 150);  
  },function fO() {  
  $(this).children('#tta').fadeOut(150, function() {$(this).children('#tta').remove()});  
  });  
});  

<!--U1AHEADER1Z-->
07.09.2012 Просмотров: 1088 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
avatar
steam 15.11.2012 22:281
0
бредятина
Delete
Delete 15.11.2012 22:502
0
steam, кому как...
Kosten
Kosten 15.11.2012 22:573
0
Если это бред, йа даже представить не могу что для вас шикарно surprised
avatar
expert8899 14.03.2014 04:244
0
Судя по коду должны быть скрипты... где они?
๖ۣۜInspire
๖ۣۜInspire 14.03.2014 08:225
0
Ищем скрипты в нете например вот этот первый, заливаем по пути в коде
http://plugins.jquery.com/mousewheel/
если не найдёте то приду домой и дам ссылки на другие
avatar