Плавающее верхнее меню для uCoz.
Установка:
В верхнюю часть сайта ставим:
Code
<div id="overlay">
<div class="wrapper">
<!--U1AHEADER1Z-->
<script>
$('#puzadpn').remove();
</script>
<style>#menu a {text-decoration:none}
</style>
<!----58656---->
<div id="header1">
<div id="headerin">
<div style="height:30px"><div style="float:left;width:130px;"><a href="/"><img src="http://usale.biz/nimg/nlogo.png" border="0" alt="Ucoz Sale" style="margin-left:10px"/></a></div>
<div style="float:right">
<ul id="menu_t">
<li style="border:none!important;background:none!important"><form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/"><input type="text" name="q" maxlength="30" size="30" style="margin-right:7px;padding:2px !important;" onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Поиск...') this.value='';" value="Поиск..." /></form>
</li>
<li><a rel="nofollow" href="/index/10">Выход</a></li>
</ul>
</div>
<ul id="menu_t">
<li><a href="/stuff/sajty/4" rel="nofollow" >Биржа сайтов</a></li>
<li><a href="/board" rel="nofollow" >Биржа заказов</a></li>
<li><a href="/forum" rel="nofollow" >Форум</a></li>
<li><a href="/publ" rel="nofollow" >Статьи</a></li>
</ul>
</div>
<div class="clr"></div>
</div></div>
<!----45656---->
</div>
<div class="wrapper">
<!--U1AHEADER1Z-->
<script>
$('#puzadpn').remove();
</script>
<style>#menu a {text-decoration:none}
</style>
<!----58656---->
<div id="header1">
<div id="headerin">
<div style="height:30px"><div style="float:left;width:130px;"><a href="/"><img src="http://usale.biz/nimg/nlogo.png" border="0" alt="Ucoz Sale" style="margin-left:10px"/></a></div>
<div style="float:right">
<ul id="menu_t">
<li style="border:none!important;background:none!important"><form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/"><input type="text" name="q" maxlength="30" size="30" style="margin-right:7px;padding:2px !important;" onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Поиск...') this.value='';" value="Поиск..." /></form>
</li>
<li><a rel="nofollow" href="/index/10">Выход</a></li>
</ul>
</div>
<ul id="menu_t">
<li><a href="/stuff/sajty/4" rel="nofollow" >Биржа сайтов</a></li>
<li><a href="/board" rel="nofollow" >Биржа заказов</a></li>
<li><a href="/forum" rel="nofollow" >Форум</a></li>
<li><a href="/publ" rel="nofollow" >Статьи</a></li>
</ul>
</div>
<div class="clr"></div>
</div></div>
<!----45656---->
</div>
В CSS ставим:
Code
#menu_t, #menu_t ul, #menu_t li {
margin:0;
padding:0;
list-style:none;
font-size:0px;
line-height:0px;
}
#menu_t {height:25px; margin:0; padding:2px 0 0 0px; list-style:none; float:left; display:inline;}
#menu_t ul {
display:none;
position:absolute;
width:170px;
background:url(http://usale.biz/ima/tmenu_top.gif) top no-repeat;
padding:8px 0 0;
margin:0 0 0 0;
z-index:10000;
}
#menu_t ul ul {
margin:-8px 0 0 2px;
}
#menu_t li {background:url(http://usale.biz/nimg/menbut.png) repeat-x; padding:3px 1px; margin-right:3px; float:left;border:1px solid #313b40;border-radius:4px;-moz-border-radius:4px;}
#menu_t li a {color:#fff; display:inline-block; outline:none; text-decoration:none; margin-left:5px;margin-right:5px;height:18px; font:normal 13px "Arial Narrow", Arial, Helvetica, sans-serif;}
#menu_t li a:hover,#menu_t li a.hover {color:#ddd; display:inline-block; text-decoration:none; height:18px;}
#menu_t li li {
float:none;
height:auto;
background:none;
display:block;
padding:0 0 8px;
margin:0 0 -8px;
text-align:left;
}
#menu_t li li a {color:#fff; display:block; outline:none; border-top:1px solid #fff; text-decoration:none; padding:5px 11px; height:auto; font:normal 14px "Arial Narrow", Arial, Helvetica, sans-serif;}
#menu_t li li a:hover,#menu_t li li a.over { color:#000; border:none; border-top:1px solid #fff; display:block; height:auto;}
#menu_t li.last {background:url(http://usale.biz/ima/tmenu_bot.gif) bottom left no-repeat; padding-bottom:8px;}
/*---------------------------------*/
#header0{display:none}
#header1{padding-top:5px;height:35px;background:url('http://usale.biz/nimg/fonb.png') center top repeat-x; border-bottom:2px solid #566B7E;border-top:2px solid #566B7E;
position:fixed;z-index:1000;width:100%;}
#headerin{width:1000px;margin: 0 auto}
#header{height:99px;background:url('http://usale.biz/ima/top_bg.png') center top repeat-x;
position:fixed;z-index:1000;width:100%;
}
#usermenu {height:31px;overflow:hidden;background:url('http://usale.biz/images/usernavi.png') right -31px no-repeat;padding:0 18px 0 0;color:#ddd;}
#usermenu .userblock {height:31px;line-height:31px;background:url('http://usale.biz/images/usernavi.png') 0 0 no-repeat;float:right;padding:0 0 0 18px;}
#usermenu a {color:#f0c621;}
#usermenu a:hover {color:#d6b11e;}
.blogname{width:100%;height:45px;padding-top:10px;padding-left:4px;font-size:25px;font-family:Georgia;color:#F1F1F1;text-shadow:1px 1px 2px #222}
.blogname h1{font-size:50px;padding:14px 0 0 0;margin:0;font-weight:normal;text-transform:uppercase;}
.blogname h1 a {color:#555;text-decoration:none;}
.blogname h2 {font-size:11px;text-transform:uppercase;color:#444;font-weight:normal;margin:0;padding:0 0 0 3px;letter-spacing:0px;}
/*Page menu*/
#foxmenucontainer{height:38px;display:block;padding:0;font: 11px Verdana,Century gothic,Tahoma,sans-serif;font-weight:normal;text-transform:uppercase;padding:0 2px;width:725px;float:left;background:url('/images/mainnavi.png') 0 0 no-repeat;}
#menu{margin:0;padding:5px 2px 0 2px;width:725px;height:33px;}
#menu ul {float:left;list-style:none;margin:0;padding:0;}
#menu li {float:left;list-style:none;margin:0;padding:0 2px;}
#menu li a {display:block;margin:0;line-height:29px;height:29px;color:#fff;text-shadow:1px 1px 0 #555;font-weight:bold;background:url('/images/menuitem.png') 0 0 no-repeat;white-space:nowrap;_width:10px;}
#menu li a span {display:block;margin:0;line-height:29px;height:29px;padding:0px 10px;background:url('/images/menuitem.png') right -29px no-repeat;cursor:pointer;}
#menu li a:hover,#menu li a.uMenuItemA {background-position:0 -58px;background-color:#f0c621;color:#fff;margin:0;text-decoration:none;}
#menu li a:hover span,#menu li a.uMenuItemA span {background-position:right -87px;}
#menu .x-unselectable{margin:10px 0 0 0;}
#menu .uMenuArrow {display:none;}
#menu li.hover .uMenuArrow {display:block;background:url('http://usale.biz/images/menuarrow.png') center 0 no-repeat;width:100%;height:4px;position:absolute;bottom:-8px;_display:none;}
#menu .u-menubody {background:none;border:none;}
#menu .xw-tl,#menu .xw-bl,#menu .u-menuvsep {display:none;}
#menu .xw-ml,#menu .xw-mr {margin:0;padding:0;}
#menu .xw-mc {background:#d5d5d5;margin:0;border:1px solid #333;border-bottom:none;}
#menu .u-menu a {text-decoration:none;color:#000;cursor:pointer;}
#menu .u-menu .u-menuvitem {background:#d5d5d5;color:#ddd;font-weight:normal;float:none;margin:0;border-bottom:1px solid #333;line-height:30px;position:relative;padding: 0 16px;text-shadow:1px 1px 1px #fff;}
#menu .u-menu .u-menuitemhl {background:#0b0b0b;color:#fff;text-shadow:1px 1px 1px #000;padding:0 16px;line-height:30px;}
#menu .u-menu .u-menuitemhl a {background:none;color:#fff;}
#menu .u-menuarrow {background:url('http://usale.biz/images/arrow.gif') no-repeat 5px 6px;height:16px;width:16px;position:absolute;right:0;top:6px}
#search {float:right;width:235px;height:38px;padding:0 5px;margin:0;background:url('http://usale.biz/images/search.png') 0 0 no-repeat;border:none;display:inline;}
#search form {margin:0;padding:0;}
#search .schQuery input {width:190px;margin:8px 0 0 0;padding:3px;border:none;font-size:14px;color:#999;float:left;border:none;background:none;display:inline;}
#search .schBtn input{float:right;display:inline;margin:5px 0 0 0;height:29px;width:32px;overflow:hidden;text-indent:-10000px;background:url('/images/search-btn.png') 0 0 no-repeat;color:#fff;border:none;cursor:pointer;}
#search .schBtn input.hover {background-position:0 -29px;}
margin:0;
padding:0;
list-style:none;
font-size:0px;
line-height:0px;
}
#menu_t {height:25px; margin:0; padding:2px 0 0 0px; list-style:none; float:left; display:inline;}
#menu_t ul {
display:none;
position:absolute;
width:170px;
background:url(http://usale.biz/ima/tmenu_top.gif) top no-repeat;
padding:8px 0 0;
margin:0 0 0 0;
z-index:10000;
}
#menu_t ul ul {
margin:-8px 0 0 2px;
}
#menu_t li {background:url(http://usale.biz/nimg/menbut.png) repeat-x; padding:3px 1px; margin-right:3px; float:left;border:1px solid #313b40;border-radius:4px;-moz-border-radius:4px;}
#menu_t li a {color:#fff; display:inline-block; outline:none; text-decoration:none; margin-left:5px;margin-right:5px;height:18px; font:normal 13px "Arial Narrow", Arial, Helvetica, sans-serif;}
#menu_t li a:hover,#menu_t li a.hover {color:#ddd; display:inline-block; text-decoration:none; height:18px;}
#menu_t li li {
float:none;
height:auto;
background:none;
display:block;
padding:0 0 8px;
margin:0 0 -8px;
text-align:left;
}
#menu_t li li a {color:#fff; display:block; outline:none; border-top:1px solid #fff; text-decoration:none; padding:5px 11px; height:auto; font:normal 14px "Arial Narrow", Arial, Helvetica, sans-serif;}
#menu_t li li a:hover,#menu_t li li a.over { color:#000; border:none; border-top:1px solid #fff; display:block; height:auto;}
#menu_t li.last {background:url(http://usale.biz/ima/tmenu_bot.gif) bottom left no-repeat; padding-bottom:8px;}
/*---------------------------------*/
#header0{display:none}
#header1{padding-top:5px;height:35px;background:url('http://usale.biz/nimg/fonb.png') center top repeat-x; border-bottom:2px solid #566B7E;border-top:2px solid #566B7E;
position:fixed;z-index:1000;width:100%;}
#headerin{width:1000px;margin: 0 auto}
#header{height:99px;background:url('http://usale.biz/ima/top_bg.png') center top repeat-x;
position:fixed;z-index:1000;width:100%;
}
#usermenu {height:31px;overflow:hidden;background:url('http://usale.biz/images/usernavi.png') right -31px no-repeat;padding:0 18px 0 0;color:#ddd;}
#usermenu .userblock {height:31px;line-height:31px;background:url('http://usale.biz/images/usernavi.png') 0 0 no-repeat;float:right;padding:0 0 0 18px;}
#usermenu a {color:#f0c621;}
#usermenu a:hover {color:#d6b11e;}
.blogname{width:100%;height:45px;padding-top:10px;padding-left:4px;font-size:25px;font-family:Georgia;color:#F1F1F1;text-shadow:1px 1px 2px #222}
.blogname h1{font-size:50px;padding:14px 0 0 0;margin:0;font-weight:normal;text-transform:uppercase;}
.blogname h1 a {color:#555;text-decoration:none;}
.blogname h2 {font-size:11px;text-transform:uppercase;color:#444;font-weight:normal;margin:0;padding:0 0 0 3px;letter-spacing:0px;}
/*Page menu*/
#foxmenucontainer{height:38px;display:block;padding:0;font: 11px Verdana,Century gothic,Tahoma,sans-serif;font-weight:normal;text-transform:uppercase;padding:0 2px;width:725px;float:left;background:url('/images/mainnavi.png') 0 0 no-repeat;}
#menu{margin:0;padding:5px 2px 0 2px;width:725px;height:33px;}
#menu ul {float:left;list-style:none;margin:0;padding:0;}
#menu li {float:left;list-style:none;margin:0;padding:0 2px;}
#menu li a {display:block;margin:0;line-height:29px;height:29px;color:#fff;text-shadow:1px 1px 0 #555;font-weight:bold;background:url('/images/menuitem.png') 0 0 no-repeat;white-space:nowrap;_width:10px;}
#menu li a span {display:block;margin:0;line-height:29px;height:29px;padding:0px 10px;background:url('/images/menuitem.png') right -29px no-repeat;cursor:pointer;}
#menu li a:hover,#menu li a.uMenuItemA {background-position:0 -58px;background-color:#f0c621;color:#fff;margin:0;text-decoration:none;}
#menu li a:hover span,#menu li a.uMenuItemA span {background-position:right -87px;}
#menu .x-unselectable{margin:10px 0 0 0;}
#menu .uMenuArrow {display:none;}
#menu li.hover .uMenuArrow {display:block;background:url('http://usale.biz/images/menuarrow.png') center 0 no-repeat;width:100%;height:4px;position:absolute;bottom:-8px;_display:none;}
#menu .u-menubody {background:none;border:none;}
#menu .xw-tl,#menu .xw-bl,#menu .u-menuvsep {display:none;}
#menu .xw-ml,#menu .xw-mr {margin:0;padding:0;}
#menu .xw-mc {background:#d5d5d5;margin:0;border:1px solid #333;border-bottom:none;}
#menu .u-menu a {text-decoration:none;color:#000;cursor:pointer;}
#menu .u-menu .u-menuvitem {background:#d5d5d5;color:#ddd;font-weight:normal;float:none;margin:0;border-bottom:1px solid #333;line-height:30px;position:relative;padding: 0 16px;text-shadow:1px 1px 1px #fff;}
#menu .u-menu .u-menuitemhl {background:#0b0b0b;color:#fff;text-shadow:1px 1px 1px #000;padding:0 16px;line-height:30px;}
#menu .u-menu .u-menuitemhl a {background:none;color:#fff;}
#menu .u-menuarrow {background:url('http://usale.biz/images/arrow.gif') no-repeat 5px 6px;height:16px;width:16px;position:absolute;right:0;top:6px}
#search {float:right;width:235px;height:38px;padding:0 5px;margin:0;background:url('http://usale.biz/images/search.png') 0 0 no-repeat;border:none;display:inline;}
#search form {margin:0;padding:0;}
#search .schQuery input {width:190px;margin:8px 0 0 0;padding:3px;border:none;font-size:14px;color:#999;float:left;border:none;background:none;display:inline;}
#search .schBtn input{float:right;display:inline;margin:5px 0 0 0;height:29px;width:32px;overflow:hidden;text-indent:-10000px;background:url('/images/search-btn.png') 0 0 no-repeat;color:#fff;border:none;cursor:pointer;}
#search .schBtn input.hover {background-position:0 -29px;}
Готово.
Другие новости |
Поделиться ссылкой
|