Вход на сайт

Поиск

Наш опрос

Что у вас ?
Всего ответов: 291

Мини-чат

 
200

Статистика

Evolution
Воскресенье, 01.12.2024, 20:46
Приветствую Вас Гость
Главная | Регистрация | Вход | RSS

Вертикальное меню css - Форум

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Вертикальное меню css
NoMaDДата: Пятница, 25.06.2010, 15:54 | Сообщение # 1
→No[m]aD←
Группа: Пользователь
Сообщений: 517
Награды: 4
Репутация: 53
Статус:


Установка:

Управление сайтом--Управление дизайном--Таблица стилей (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>  

Данная форма дает пояснение:
Code
<span>→ Оставить мнение о сайте</span>
 
FanatДата: Четверг, 08.07.2010, 18:39 | Сообщение # 2
Сержант
Группа: Пользователь
Сообщений: 21
Награды: 0
Репутация: 4
Статус:
фуфел

 
NoMaDДата: Суббота, 10.07.2010, 19:48 | Сообщение # 3
→No[m]aD←
Группа: Пользователь
Сообщений: 517
Награды: 4
Репутация: 53
Статус:
+ В твою историю замечаний !
 
  • Страница 1 из 1
  • 1
Поиск: