Lecaw

Учимся создавать Web-сайты

Адаптивное меню на CSS3

May 27, 2013
CSS
448hits

Сегодня я расскажу Вам, как создать адаптивное навигационное меню, используя только CSS3. Как вы знаете, многие люди используют Интернет с мобильных устройств (таких как iPad, iPhone или Android). И важно чтобы эти пользователи, могли с комфортом посещать Ваш сайт. Вы можете найти, некоторые способы реализации адаптивного меню, но большинство из них используют jQuery или JavaScript. Но сегодня я покажу Вам, как создать адаптивное меню без использования JavaScript.

ДЕМО Исходные файлы

 

По умолчанию, это обычное UL-LI выпадающее меню. Но, если экран слишком маленький (в случае мобильных устройств), это меню превращается в click-меню. В этом случае ваши посетители должны будут нажать на элемент меню, чтобы открыть его содержимое.

Шаг 1. HTML

HTML разметка для нашей демонстрационной страницы:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Responsive menu | Script Tutorials</title>
        <!-- добавление стилей -->
        <link href="/css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="container">
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#s1">Menu 1</a>
                    <span id="s1"></span>
                    <ul class="subs">
                        <li><a href="#">Header a</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Header b</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="active"><a href="#s2">Menu 2</a>
                    <span id="s2"></span>
                    <ul class="subs">
                        <li><a href="#">Header c</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Header d</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="#">Back to Responsive menu tutorial</a></li>
            </ul>
        </div>
    </body>
</html>

Теперь если мы хотим создать сайт, должны использовать небольшую хитрость с мета тегом name=’viewport’ для нашего адаптивного меню. Этот тег необходим для масштабирования содержимого страницы на вашем экране должным образом. Это может быть экран вашего десктопа или экран вашего мобильного устройства. Остальной код, думаю, понятен - многоуровневое UL-LI меню.

Шаг 2. CSS

Теперь - стили. В самом начале я определил базовые стили нашей страницы:

css/main.css

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #fff;
    height: 100%;
}
body {
    color: #333333;
    font: 0.75em/1.5em Arial,sans-serif;
}
.container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 96%;
}

Теперь мы можем определить стили для элементов верхнего уровня:

#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: #F5F5F5;
    border-bottom: 5px solid #333333;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
#nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}

Стили для выпадающего меню (подменю):

/* подменю */
#nav li:hover ul.subs {
    display: block;
}
#nav ul.subs > li {
    display: inline-block;
    float: none;
    padding: 10px 1%;
    vertical-align: top;
    width: 33%;
}
#nav ul.subs > li a {
    color: #777777;
    line-height: 20px;
}
#nav ul li a:hover {
    color: #F55856;
}
#nav ul.subs > li > a {
    font-size: 1.3em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
    padding-left: 15px;
}

Теперь самое интересное - каким образом мы можем использовать правила адаптирования? На самом деле это легко, мы можем установить медиа запросы (CSS3), которые используются для определения пользовательских стилей для нескольких разрешений экрана. Как вы знаете, различные мобильные устройства имеют различные разрешения экрана, а значит - мы можем использовать это, чтобы определить наши собственные стили. Я собираюсь превратить наше выпадающее меню в click-меню. Вы заметили, у нас есть скрытые элементы SPAN которые я поставил сразу после элементов верхнего уровня меню? Щелкнув по ним, мы отобразим все оставшееся меню (подменю):

@media all and (max-width : 980px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }
    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(2 голосов)

2 Responses

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