Вертикальное меню css - 6 Октября 2009 - graffitis
Меню сайта
Категории раздела
Последнее на форуме
Главная » 2009 » Октябрь » 6 » Вертикальное меню css
19:49
Вертикальное меню css

Установка:

Управление сайтом--Управление дизайном--Таблица стилей (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>
Категория: Скрипты | Просмотров: 256 | Добавил: Johan | Теги: Вертикальное меню css | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email:
Код *:
Мини сайт
      Привет: Прохожий

      Сообщения:

      Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
Мини-чат
Наш опрос

От куда ты?

Результат опроса Результаты
Все опросы нашего сайта Архив опросов

Всего голосовало: 89
Обсудить опрос на форуме
Статистика