Делаем простое горизонтальное меню

Нужен САЙТ? Заказуй у меня - Жми сюда! Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

Меню - один из главных элементов на веб-странице. Практически на каждом сайте используется меню, хотя сегодня они настолько разнообразны, что некоторые даже сложно такими назвать. Сегодня мы попробуем сделать простое, но практичное горизонтальное меню, используя только CSS и HTML.

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

 

HTML

По традиции, начнем с HTML разметки. Ничего сложного - меню будет опираться на список.

<ul id="menu">
        <li><a href="#">О нас</a></li>
        <li>
                <a href="#">Статьи</a>
                <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">jQuery</a></li>
                </ul>
        </li>
        <li>
                <a href="#">Видео курс</a>
        </li>
        <li>
                <a href="#">Материалы</a>
        </li>
        <li>
                <a href="#">Форум</a>
        </li>
</ul>

Обратите внимание на вложенный список во второй пункт списка. Часто главных пунктов меню не достаточно, нужно что бы они разбивались на подпункты. Для этого мы используем вложенный список.

CSS

Дальше рассмотрим стили нашего меню.

#menu {
        padding: 0;
        margin: 0;
        font-family:  Verdana;
        }
#menu li {
        list-style: none;
        float: left;
        height: 30px;
        padding: 0;
        margin: 0;
        width: 150px;
        text-align: center;
        background:  #95DF8E;
        position: relative;
        padding-top: 12px;
        }
#menu li ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        display: none;
        position: absolute;
        left: 0;
        top: 42px;
        }
#menu li ul li {
        float: none;
        height: 30px;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #95DF8E;
        }
#menu li a {
        display: block;
        width: 150px;
        height: 30px;
        color:    #006A35;
        text-decoration: none;
        }

  #menu li:hover ul{
          display: block;
          }
  #menu li:hover{
          background: #35C835;
          }

Как видите, ничего сложного и страшного тут нету. С помощью display:none мы прячем наши подпункты, а при наведение снова показуем их. Так же при наведение мы изменяем цвет заливки, что бы пользователь видел, что он нажимает.

Готово!

Надеюсь, эта простая статья поможет вам, и вдохновит на новые проекты. В скором времени я расскажу как улучшить наше меню с помощью библиотеки jQuery.

Нужен САЙТ? Заказуй у меня - Жми сюда! Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

Делясь ссылкой на пост в социальных сетях - Вы помогаете развитию блога! Спасибо ;)

(1 голосов. Рейтинг: 5,00 из 5)
Loading...Loading...

Метки: , , ,

Рубрика: CSS, HTML

Комментарии (4)

| RSS комментария

  1. Not Found

    The requested URL /20-07-2012/01/ was not found on this server.

    Демо не пашет

  2. мас:

    Пикабууу

Оставьте свой комментарий