FAQpk FAQpk.ru   Войти   Зарегистрироваться  


faqpk.ru
Компьютерный форум
С оплатой за сообщения



faqpk.ru

Страница 1 из 11
Компьютерный форум » Web-Мастер » Скрипты для сайта » Стильное горизонтальное меню для ucoz (Скрипты для ucoz)
Стильное горизонтальное меню для ucoz
Стильное горизонтальное меню для 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://www.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://www.faqpk.ru"><span>Главная</span></a></li>   
  <li><a href="http://www.faqpk.ru/search"><span>Поиск</span></a></li>   
  <li><a href="http://www.faqpk.ru"><span>Регистрация</span></a></li>   
  <li><a href="http://www.faqpk.ru/sitemap.xml"><span>Карта сайта</span></a></li>   
  <li><a href="http://www.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://www.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://www.faqpk.ru"><span>Главная</span></a></li>   
  <li><a href="http://www.faqpk.ru/search"><span>Поиск</span></a></li>   
  <li><a href="http://www.faqpk.ru"><span>Регистрация</span></a></li>   
  <li><a href="http://www.faqpk.ru/sitemap.xml"><span>Карта сайта</span></a></li>   
  <li><a href="http://www.faqpk.ru"><span>О сайте</span></a></li>  
  </ul>
Прикрепления: 7563006.png(5Kb)
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Компьютерный форум » Web-Мастер » Скрипты для сайта » Стильное горизонтальное меню для ucoz (Скрипты для ucoz)
Страница 1 из 11
Поиск: