Горизонтальное меню с подсказками

Доброго времени суток, друзья. Простое горизонтальное меню с небольшой "изюминкой". При наведении на пункты меню появляется небольшая подсказка. Меню очень легко настраивается под любой дизайн и с установкой проблем не возникнет. 

Вот так оно выглядит

Необычное горизонтальное меню

Если скопируете код и вставите его в этом редакторе , то увидите меню с подсказками в рабочем исполнении

Код

<style>#menu ul {

 list-style: none;

 font-family: Georgia;

 font-size: 18px;

 font-style: italic;

 line-height: 24px;

 border: 2px solid #000000;

 border-left: 1px solid #000000;

 float: left;

 padding: 0;

 margin: 12px 0 25px 24px;

 }

#menu ul li {

 float: left;

 }

#menu ul li a {

 display: block;

 text-decoration: none;

 background-color: #595959;

 padding: 5px 10px 0 10px;

 color: #fefefe;

 width: 120px;

 border-right: 1px solid #797979;

 border-left: 1px solid #191919;

 }

#menu ul li a span {

 display: block;

 }

#menu ul li a span.text-top {

 border-bottom: 1px solid #595959;

 }

#menu ul li a:hover span.text-top {

 border-bottom: 1px dashed #fefefe;

 color: #ffddbb;

 }

#menu ul li a span.text-bottom {

 visibility: hidden;

 font-size: 11px;

 text-align: right;

 }

#menu ul li a:hover span.text-bottom {

 visibility: visible;

}

</style>

<div id="menu">

 <ul>

  <li>

   <a href="#">

    <span class="text-top">Главная</span>

    <span class="text-bottom">все стихи</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №2</span>

    <span class="text-bottom">Подсказка №2</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №3</span>

    <span class="text-bottom">Подсказка №3</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №4</span>

    <span class="text-bottom">Подсказка №4</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №5</span>

    <span class="text-bottom">Подсказка №5</span>

   </a>

  </li>

 </ul>

</div>


Вместо решёток, отмеченных синим цветом, вставьте адреса страниц, на которые будет осуществлён переход при нажатии. Пункты и подсказки меняйте на свои. При необходимости добавляйте ещё вкладки меню, используя такой  участок кода

<li>

   <a href="#">

    <span class="text-top">Пункт №2</span>

    <span class="text-bottom">Подсказка №2</span>

   </a>

  </li>


В настройках самого стиля горизонтального меню можно поиграться со всеми значениями. Цвет фона, рамки, цвет и размер шрифта и другими. Будут сложности обращайтесь в комментариях. Готовый код устанавливается обычным способом в гаджет HTML/JavaScript и перетаскивается над сообщениями или под шапку блога. 

Посмотрите другие варианты меню под соответствующим ярлыком. 

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email


8 комментариев:

  1. Красота! У меня подобное твое уже стоит внизу. Спасибо, Вика! Привает!

    ОтветитьУдалить
  2. Ирина, менюшка в самом низу это очень оригинально и вполне уместно. По любому посетитель прокручивает до конца страницу. И обратила внимание, что сам блог у тебя очень симпатично смотрится. И читателей уже вон сколько.

    ОтветитьУдалить
    Ответы
    1. Да уж стараемся. Так ты меня и научила!!!!

      Удалить
  3. Очень забавная фишка. Мне нравится.

    ОтветитьУдалить
    Ответы
    1. Семён, менюшка необычная и простая одновременно. Семён, без обид, я комментарий со ссылками удаляю, так как переспам будет . На почте оставляю и обязательно посмотрю.

      Удалить
  4. Не понял, кто "переспам", с кем "переспам"... Старый и тупой стал. Как говаривал мой мимолётный знакомец Владимир Семёнович Высоцкий: "Ну, сумасшедший, что возьмёшь?!" Если надо сбросить на "мыло". я готов. Правда, не помню адреса.

    ОтветитьУдалить
  5. Семён, что уж так - то Вы себя.Лишние ссылки, даже не активные поисковики видят и не любят их жуть как. А я их в блоге удалила. Но на почте они остались. И огромное Вам спасибо, обязательно на досуге посмотрю.

    ОтветитьУдалить
  6. Вика, привет! Я там тебе писульку послала по форме! Очень важно твое мнение!

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML