Главная
Форум
Баннеры
ТОП Сайтов
Мониторинг серверов
Банлист Сервера
Статистика Сервера
Наши отзывы
Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Вертикальное меню css
KroLLIuK^Дата: Вторник, 29.12.2009, 17:48 | Сообщение # 1

GameOnline! qqq
Сообщений: 94
[ ]
:-(

Установка:

Управление сайтом--Управление дизайном--Таблица стилей (CSS)

и в самом низу прописываем данные код:

Code
/*    
=============================================================    
© 2009 Warez every day    
http://2all4you.ru    
=============================================================    
*/    

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 http://2all4you.ru ====== */

Далее

В нужном месте вставляем наше будущие меню с пояснениями
Тут нужно редактировать под себя:

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>
  • Страница 1 из 1
  • 1
Поиск:


Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"! Design bY PainKiller.Net.Ru
Тиц и pr сайта