Стильное горизонтальное меню для ucoz

Горизонтальное меню для ucoz в черно-голубых цветах. Количество разделов меню можно расширить.
Установка:
1. Копируем код и вставляем в CSS:
Code
#mainnav {
list-style-type: none;
margin: 0;
}
#mainnav li {
display: block;
float: left;
margin: 0 0 0 4px;
padding: 0 0 0 6px;
}
#mainnav a {
text-decoration: none;
height: 34px;
display: block;
line-height: 34px;
color: #666;
font-size: 18px;
margin: 0;
padding: 0 10px;
float: left;
}
#mainnav a:hover { text-decoration: none }
#mainnav span {
display: block;
margin: 0;
padding: 0 6px 0 0;
float: left;
}
#mainnav li.current,
#mainnav li.current span,
#mainnav li.current span a,
#mainnav li:hover,
#mainnav li:hover a,
#mainnav li:hover span { background: url(http://faqpk.ru/images/script/1/gorizont_menu.png) no-repeat 50% -34px }
#mainnav li.current a,
#mainnav li:hover a { color: #fff }
#mainnav li.current { background-position: 0 -34px }
#mainnav li.current span { background-position: 100% -34px }
#mainnav li.current span a { background-position: 50% -34px }
#mainnav li:hover { background-position: 0 -0px }
#mainnav li:hover span { background-position: 100% 0px }
#mainnav li:hover span a { background-position: 50% 0px }
2. Вставляем в любой блок на сайте(туда, где хотим видеть горизонтальное меню):
Code
<ul id="mainnav" >
<li><a href="http://faqpk.ru"><span>Главная</span></a></li>
<li><a href="http://faqpk.ru/search"><span>Поиск</span></a></li>
<li><a href="http://faqpk.ru"><span>Регистрация</span></a></li>
<li><a href="http://faqpk.ru/sitemap.xml"><span>Карта сайта</span></a></li>
<li><a href="http://faqpk.ru"><span>О сайте</span></a></li>
</ul>
|
Дата: Воскресенье, 24.06.2012. Сообщение # 1
|
Bro |
Стильное горизонтальное меню для ucoz

Горизонтальное меню для ucoz в черно-голубых цветах. Количество разделов меню можно расширить.
Установка:
1. Копируем код и вставляем в CSS:
Code
#mainnav {
list-style-type: none;
margin: 0;
}
#mainnav li {
display: block;
float: left;
margin: 0 0 0 4px;
padding: 0 0 0 6px;
}
#mainnav a {
text-decoration: none;
height: 34px;
display: block;
line-height: 34px;
color: #666;
font-size: 18px;
margin: 0;
padding: 0 10px;
float: left;
}
#mainnav a:hover { text-decoration: none }
#mainnav span {
display: block;
margin: 0;
padding: 0 6px 0 0;
float: left;
}
#mainnav li.current,
#mainnav li.current span,
#mainnav li.current span a,
#mainnav li:hover,
#mainnav li:hover a,
#mainnav li:hover span { background: url(http://faqpk.ru/images/script/1/gorizont_menu.png) no-repeat 50% -34px }
#mainnav li.current a,
#mainnav li:hover a { color: #fff }
#mainnav li.current { background-position: 0 -34px }
#mainnav li.current span { background-position: 100% -34px }
#mainnav li.current span a { background-position: 50% -34px }
#mainnav li:hover { background-position: 0 -0px }
#mainnav li:hover span { background-position: 100% 0px }
#mainnav li:hover span a { background-position: 50% 0px }
2. Вставляем в любой блок на сайте(туда, где хотим видеть горизонтальное меню):
Code
<ul id="mainnav" >
<li><a href="http://faqpk.ru"><span>Главная</span></a></li>
<li><a href="http://faqpk.ru/search"><span>Поиск</span></a></li>
<li><a href="http://faqpk.ru"><span>Регистрация</span></a></li>
<li><a href="http://faqpk.ru/sitemap.xml"><span>Карта сайта</span></a></li>
<li><a href="http://faqpk.ru"><span>О сайте</span></a></li>
</ul>
|
Модератор
Сообщений: 196
Нет на сайте
|
|
|
|