Создание сайтов > Верстка > Создание горизонтального меню с пояснениями

Создание горизонтального меню с пояснениями

Создание горизонтального меню с пояснениями

Возможно я утомил вас записями о WordPress. Поэтому сегодня я решил дать роазгрузку (wordpress еще будет).

А покажу я вам сегодня пример создания горизонатальног меню с пояснением.

Все просто:

  • Имеется ссылка, при наводе на которую выдвигается полоска с дополнительным текстом.

Я разобрал css код для вас. Если возникнут вопросы, задавайте..
ul#menu1 {
margin: 5px; /* Отступ для кнопок */
width:150px;
list-style-type : none; /* Убираем точку перед <li> */
font-size: 13px; /* Размер шрифта в кнопках */
font-family:Verdana; /* Задаем имя шрифта */
}

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

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

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

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

ul#menu1 a:hover span, ul#cmd a:focus span, ul#cmd a:active span {
top : -1px; /* Задание поля подсказки (НЕ МЕНЯТЬ) */
left : 80px; /* Задание поля подсказки (НЕ МЕНЯТЬ) */
}
Вот html:
<ul id="menu1">
<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>
С помощью jQuery или JS, можно сделать это намного красивее.

Просмотреть пример

Работает в: Internet Explorer 6 — 7; Mozilla Firefox 2.x; Oprea 9.xx, Konqueror 3.5.x

13 декабря 2008 в 22:457 комментариев Верстка, ,

Комментарии — 7 комментариев

  1. #169 НаУм в 18:33, 14 декабря 2008: (подписался)

    Ответить | Цитировать

    Выложи пример, того, что ты разобрал. Коди читать конечно интересно, но видеть, что из этого кода может получится, по-моему интереснее!

  2. #170 WebMast в 20:10, 14 декабря 2008:

    Ответить | Цитировать

    НаУм, извини что срау не смог.
    Пример можно посмотреть здесь: helps.html

  3. #171 НаУм в 23:40, 14 декабря 2008: (подписался)

    Ответить | Цитировать

    Спасибо. Выглядит неплохо, тока в IE 7 такие кракозябры: «РўРµРєСЃС‚», но это уже тонкости.

  4. #174 WebMast в 14:47, 15 декабря 2008: (подписался)

    Ответить | Цитировать

    В ИЕ главное что работает :). А кракозябры из-за кодировки, utf-8 надо юзать.

  5. #191 AleX в 20:53, 8 января 2009:

    Ответить | Цитировать

    Надо было просто на страницу добавить:

    Сорри, у тебя код не выводит. =\ Короче, на страницу helps.html выставь charset.

  6. #9900 arkasha в 15:13, 27 июля 2010: (подписался)

    Ответить | Цитировать

    все отлично работает. Даже в ИЕ 7. У меня один вопрос. Как мне весь меню сдвинуть в лево, а то у меня правый край менюшки выходит из таблицы. А то сам я тыкал-тыкал, но так не смог решить эту проблему

  7. #9901 Евгений Жлобо в 16:08, 27 июля 2010: (подписался)

    Ответить | Цитировать

    Уберите margin:

    ul#menu1 {
    margin: 5px; /* Отступ для кнопок */

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting