Верхние меню для сайта 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--> |
Поделиться в социальных сетях
Материал разместил
Комментарии: 5 | |
| |