• Страница 1 из 1
  • 1
Модератор форума: VOKER  
Форум » Web мастеру » Скрипты для Ucoz » Вертикальное меню для ucoz с пояснениями
Вертикальное меню для ucoz с пояснениями
VOKERДата: Вторник, 01.03.2011, 11:24 | Сообщение # 1
Его Величество Админ!
Ранг: Самый крутой на сайте
Сообщений: 191
[ ]
Вертикальное меню для ucoz с пояснениями

при наведении на один из пунктов меню, появляется подсказка с пояснениями раздела меню.

В самом низу css кидаем код
Code
/*  
=============================================================  
© 2009 Warez every day  
http://torrent-portal.at.ua  
=============================================================  
*/  

ul#menu {  
margin: 0px; /* Отступ для кнопок */  
list-style-type : none;  
font-size: 10px; /* Размер шрифта в кнопках */  
}  

ul#menu li {  
margin-bottom: 3px; /* Отступ между кнопками */  
}  

ul#menu a {  
position: relative;  
width: 130px; /* Ширина кнопки */  
height: 2em; /* Высота кнопки */  
display: block; /* Отображение кнопок (НЕ МЕНЯТЬ) */  
padding: 3px; /* Отступ для текста в кнопках */  
padding-right: 0; /* Правый отступ для кнопок */  
border: 1px solid #002948; /* Задание границы кнопки */  
background-color: #c4e5ff; /* Задание фона кнопки */  
color: #000; /* Цвет шрифта в кнопках */  
text-decoration: none; /* Отмена подчёркивания ссылок */  
font-weight: bold; /* Полужирный шрифт */  
cursor: pointer; /* Задание типа курсора */  
}  

ul#menu a span {  
position: absolute; /* Задание позиции подсказок (НЕ МЕНЯТЬ) */  
top: -10000px; /* Задание позиции подсказок (НЕ МЕНЯТЬ) */  
left: -10000px;/* Задание позиции подсказок (НЕ МЕНЯТЬ) */  
display: block; /* Отображение подсказок (НЕ МЕНЯТЬ) */  
width: 100%; /* Длинна поля подсказок */  
height: 2em; /* Задание высоты поля подсказок */  
background-color: #c4e5ff; /* Задание фона поля подсказок */  
border: 1px solid #002948; /* Задание границы поля подсказок */  
border-left: 0; /* Отключение левой границы */  
padding: 3px; /* Отступ для текста подсказки */  
padding-left: 20px; /* Отступ для текста подсказки */  
cursor: pointer; /* Задание типа курсора */  
color: #333; /* Цвет шрифта в подсказках */  
}  

ul#menu a:hover, ul#cmd a:focus, ul#cmd a:active {  
background: #c4e5ff; /* Задание фона подсказки */  
}  

ul#menu a:hover span, ul#cmd a:focus span, ul#cmd a:active span {  
top : -1px; /* Задание поля подсказки (НЕ МЕНЯТЬ) */  
left : 80px; /* Задание поля подсказки (НЕ МЕНЯТЬ) */  
}  

/* ====== Copyright by Voker ====== */

Само меню вставляем в глобальный блок и редактируем ссылки меню под себя
Code
<ul id="menu">  
<li><a href="Ссылка"><strong>Главная</strong>  
<span>→ Главная страница сайта</span></a></li>  
<li><a href="Ссылка"><strong>Форум</strong>  
<span>→ Наш форум сайта</span></a></li>  
<li><a href="#"><strong>Гостевая</strong>  
<span>→ Оставить мнение о сайте</span></a></li>  
<li><a href="#"><strong>Гостевая</strong>  
<span>→ Оставить мнение о сайте</span></a></li>  
<li><a href="#"><strong>Гостевая</strong>  
<span>→ Оставить мнение о сайте</span></a></li>  
<li><a href="#"><strong>Гостевая</strong>  
<span>→ Оставить мнение о сайте</span></a></li>  
</ul>




Форум » Web мастеру » Скрипты для Ucoz » Вертикальное меню для ucoz с пояснениями
  • Страница 1 из 1
  • 1
Поиск:
Статистика форума
Последнии темы Читаемые темы Лучшие пользователи Новые пользователи
Обмен Банерами [kotaries]

Флуд [(HP)_fo$TeR$]

Делаю баннеры! [4eJLoBek]

информер [(HP)_fo$TeR$]

Поиск [Lawliet]

Делаю баннеры! [20]

Любителям игр [6]

Поиск [6]

Группы на torrent-portal.at.ua [4]

Сборник Банеров PSD 468x60 для Ucoz (Cs 1.6) [4]

PoZziTiV4iK (1768)

VOKER (289)

GanjaDealers (16)

Slavik (9)

Sini26 (5)

Twinstar [26.11.2016¦11:45]

Chudicktest [09.12.2015¦02:41]

Janek102 [28.11.2015¦14:16]

mahach791 [19.08.2012¦10:59]

tenhoy [17.08.2012¦18:21]