Зеленое горизонтальное меню для ucoz
Состав меню
<div class="con">
<ul id="topnav">
<li><a href="#">Главная</a></li>
<li><a href="#">Поиск</a></li>
<li><a href="#">Регистрация</a></li>
<li><a href="#">Карта сайта</a></li>
<li><a href="#">О сайте</a></li>
</ul></div>
|
В scc
body {
margin: 0; padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}
h1 small{
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.4em;
display: block;
color: #ccc;
}
.con {
width: 100%;
height: 45px;
}
img {border: none;}
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v1 span{
background: url(bg.gif) repeat-x left top;
}
ul#topnav.v1 a{
color: #555;
background: url(bg.gif) repeat-x left bottom;
}
|
Вставить следующий код между тегами <head> и </head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});
});
</script>
|
Скачиваем архив меню и заливаем к себе в корень сайта | 
