пятница, 1 августа 2014 г.

[вёрстка] Как сделать горизонтальное меню для сайта

Классическим средством навигации по сайту является горизонтальное меню в шапке сайта. Посмотрим, как сделать простое горизонтальное меню на HTML и CSS.

Простое HTML меню

По смыслу меню является списком разделов сайта, поэтому логично для меню использовать тег ul — маркированный список. Кроме того, в HTML5 появился новый тег, который следует использовать для обозначения области навигации по сайту — nav. Использование этих двух тегов позволит поисковой системе точнее разобраться в структуре нашего сайта.

В качестве примера возьмём меню из 4-х пунктов: Главная, Статьи, Услуги и Контакты. Таким образом код HTML нашего меню будет выглядеть так:

<nav class='hmenuA'>
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Статьи</a></li>
        <li><a href="#">Услуги</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</nav>

Если у вас nav используется только для главного горизонтального меню, можно обойтись без указания класса и все стили описать с использованием nav в качестве опорного селектора. Но я буду показывать несколько вариантов меню, поэтому добавил класс hmenuA, чтобы можно было применить разные стили к разным вариантам меню. Буква A на конце класса потому, что будут еще варианты B и С

Пока что наше меню совсем не похоже на горизонтальное. Выглядит оно вот так:

В первую очередь необходимо убрать маркеры списка и лишние отступы:

    .hmenuA > ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

К элементам списка мы применяем режим inline-block:

    .hmenuA > ul > li {
        display: inline-block;
    }

Этот режим означает, что «снаружи» элементы списка будут обрабатываться как строчные элементы, т.е. они вытянутся в одну строку. Внутри же они будут по-прежнему блочными элементами. Получается горизонтальная строка меню:

Видите пробелы между элементами меню? Это не отступы, а реальные текстовые пробелы. Они возникли из-за того, что HTML-код был разбит на несколько строк, и «пустые» символы между пунктами меню браузер интерпретировал как пробелы между «словами». Эту особенность надо учитывать при использовании режима inline-block.

В принципе, эти пробелы нам не очень мешают. Но если вам при вёрстке меню потребуется задать точные расстояния отступов между пунктами меню или прижать пункты меню друг к другу вообще без отступов, пробелы нам помешают. Поэтому при вёрстке горизонтальных панелей inline-block-ом принято все ненужные пробелы убирать. Я исправил HTML код меню так, чтобы между тегами не было лишних пробелов. Чтобы код оставался нормально читаемым, я поместил переводы строк внутрь тегов, перед закрывающей угловой скобкой. Вот такой код получился:

<nav class='hmenuA'>
    <ul>
        <li><a href="#">Главная</a></li
        ><li><a href="#">Статьи</a></li
        ><li><a href="#">Услуги</a></li
        ><li><a href="#">Контакты</a></li>
    </ul>
</nav>

Теперь пробелы исчезли:

Не бойтесь, что пункты меню сливаются. Сейчас мы добавим немного оформления, и всё станет намного симпатичнее:

    .hmenuA > ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        background-color: #d0e0ff;
        text-align: center;
    }

    .hmenuA > ul > li {
        display: inline-block;
    }

    .hmenuA > ul > li > a {
        display: block;
        padding: 0 30px;
        text-decoration: none;
        color: #088;
        line-height: 50px;
        font-family: "Verdana", "Arial";
        font-size: 18px;
    }

text-align: center используется, чтобы выровнять меню по центру страницы. Та как мы указали, что пункты меню следует воспринимать как строчные элемениты, они выравниваются при помощи text-align.

Высоту меню я задал, указав line-height. Этот приём позволяет одновременно указать высоту блока и выровнять текст по центру блока в вертикальном направлении.

Для тега a я также задал режим display: block, это делает ссылкой, на которую можно надать, весь прямоугольник пункта меню, а не только небольшую область текста.

Результат:

Как поведёт себя наше меню при уменьшении ширины страницы? Уменьшите окно браузера по ширине так, чтобы меню перестало в него помещаться. Что происходит? Меню из однострочного становистя двустрочным. (Или даже трёх- и четырёхстрочным, если сделать окно браузера совсем узким.)

Если вы не хотите, чтобы меню становилось многострочным, вам придётся ограничить минимальную ширину страницы, подобрав подходящее значение min-width для тега body.

Давайте добавим немного анимации. Самый простой вариант — подчёркивание пунктов меню при наведении мыши. Но так как простое подчёркивание — это совсем скучно, давайте сделаем, чтобы оно появлялось и исчезало плавно.

Добавим к стилям следующее:

    .hmenuA > ul > li > a {
        position: relative;
    }

    .hmenuA > ul > li > a:after {
        content: ' ';
        position: absolute;
        height: 2px;
        background-color: transparent;
        bottom: 10px;
        left: 30px;
        right: 30px;
        transition: background-color 0.6s ease;
    }

    .hmenuA > ul > li > a:hover:after {
        background-color: #088;
    }

Результат:

Другой вариант анимации:

    .hmenuA > ul > li > a {
        position: relative;
    }

    .hmenuA > ul > li > a:after {
        content: ' ';
        position: absolute;
        height: 2px;
        background-color: #088;
        bottom: 10px;
        left: 30px;
        right: 100%;
        transition: right 0.7s ease;
    }

    .hmenuA > ul > li > a:hover:after {
        right: 30px;
    }

Посмотрим еще несколько вариантов, как можно оформить меню. Всё ограничивается лишь вашей фантазией.

Меню с плоскими кнопками

Вариант меню с плоскими кнопками и появлением окантовки при наведении:

<style>
    .hmenuB > ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        text-align: center;
    }

    .hmenuB > ul > li {
        display: inline-block;
        padding: 3px;
    }

    .hmenuB > ul > li > a {
        display: block;
        padding: 0 15px;
        text-decoration: none;
        background-color: #349;
        color: #fff;
        line-height: 36px;
        font-family: "Verdana", "Arial";
        font-size: 16px;
        transition: background-color 0.7s ease;
        position: relative;
    }

    .hmenuB > ul > li > a:hover {
        background-color: #119;
    }

    .hmenuB > ul > li > a:after {
        content: ' ';
        position: absolute;
        background-color: transparent;
        border: 1px solid transparent;
        transition: border-color 0.7s ease;
        top: 2px;
        bottom: 2px;
        left: 2px;
        right: 2px;
    }

    .hmenuB > ul > li > a:hover:after {
        border-color: #fff;
    }

</style>

<nav class='hmenuB'>
    <ul>
        <li><a href="#">Главная</a></li
        ><li><a href="#">Статьи</a></li
        ><li><a href="#">Услуги</a></li
        ><li><a href="#">Контакты</a></li>
    </ul>
</nav>

Меню с рельефными разделителями

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

<style>
    .hmenuC > ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        text-align: center;
        background-color: #322;
    }

    .hmenuC > ul > li {
        display: inline-block;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        border-right: 1px solid rgba(0, 0, 0, 0.5);
    }

    .hmenuC > ul > li:first-child {
        border-left-color: transparent;
    }

    .hmenuC > ul > li:last-child {
        border-right-color: transparent;
    }

    .hmenuC > ul > li > a {
        display: block;
        padding: 0 15px;
        text-decoration: none;
        color: #fff;
        line-height: 36px;
        font-family: "Verdana", "Arial";
        font-size: 16px;
        transition: all 0.7s ease;
    }

    .hmenuC > ul > li > a:hover {
        text-decoration: underline;
    }
</style>

<nav class='hmenuC'>
    <ul>
        <li><a href="#">Главная</a></li
        ><li><a href="#">Статьи</a></li
        ><li><a href="#">Услуги</a></li
        ><li><a href="#">Контакты</a></li>
    </ul>
</nav>

Анимированное меню с подписями

Красивое меню с подписями, которые появляются при наведении мыши:

<style>
    .hmenuD > ul {
        list-style: none;
        margin: 0px auto;
        padding: 0px;
        text-align: center;
        width: 640px;
        height: 50px;
        background-color: #349;
        border: 2px solid rgba(0, 0, 0, 0.5);
    }

    .hmenuD > ul > li {
        display: inline-block;
        width: 25%;
        height: 100%;
        box-sizing: border-box;
        border-right: 1px solid rgba(0, 0, 0, 0.5);
        position: relative;
        overflow: hidden;
    }

    .hmenuD > ul > li:last-child {
        border-right-color: transparent;
    }

    .hmenuD > ul > li > a {
        display: block;
        padding: 0 15px;
        text-decoration: none;
        color: #fff;
        font-family: "Verdana", "Arial";
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
    }

    .hmenuD > ul > li > a > div {
        padding-top: 0px;
        line-height: 45px;
        font-size: 16px;
        transition: all 0.7s ease;
    }

    .hmenuD > ul > li > a:hover > div {
        padding-top: 4px;
        line-height: 20px;
    }

    .hmenuD > ul > li > a > div + div {
        font-size: 12px;
    }
</style>

<nav class='hmenuD'>
    <ul>
        <li><a href="#">
            <div>Главная</div>
            <div>О нас</div>
            </a></li
        ><li><a href="#">
            <div>Статьи</div>
            <div>Уроки CSS</div>
            </a></li
        ><li><a href="#">
            <div>Услуги</div>
            <div>Вёрстка, дизайн</div>
            </a></li
        ><li><a href="#">
            <div>Контакты</div>
            <div>Свяжитесь с нами</div>
            </a></li>
    </ul>
</nav>

4 комментария

Анонимный

все круто но помоему в последнем примере нет смысла задавать для .hmenuD > ul > li > a {
position absolute он и без этого неплохо работает. отпишись если я ошибаюсь...

Дворик Фермера

Спасибо как раз то что искал.

xMe

Не получается добавить больше, чем 4 красивых ссылки.

AMS

Скачайте прогу Видео монтаж!

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