Все больше и больше сайтов используют значок с фиксированным положением, для раскрывающегося вывода меню. В то время как есть много JQuery плагинов, которые будут создавать этот эффект, это на самом деле довольно легко сделать не используя ни чего кроме CSS и HTML. Эта статья покажет вам, как сделать простой вариант бокового выдвигающегося меню с эффектом скольжения, используя только CSS.
Вот демо версия показывающая конечный результат:
Начнем с HTML разметки
Это основная структура html разметки:
1
2
3
4
5
6
7
8
9
10
11
12
| <ul class="navigation"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">Portfolio</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Blog</a></li> <li class="nav-item"><a href="#">Contact</a></li></ul><input type="checkbox" id="nav-trigger" class="nav-trigger" /><label for="nav-trigger"></label><div class="site-wrap"> <!-- основная страница сайта --></div> |
Вся разметка нашего сайта состоит из трех основных частей: меню навигации, чекбокса с label, и содержимое сайта.
- Основные моменты разметки:
- Раздел навигации идет первым в разметке, потому что все остальные элементы находятся за меню. Вы можете использовать любые HTML теги какие вы хотите для построения меню. Здесь я использую неупорядоченный список.
- Кнопка управления меню это чекбокс и label. Обычно label идет перед чекбоксом или обернут вокруг него. В нашем случае чекбокс должен идти непосредственно перед label. Мы увидим почему это так когда после добавления CSS.
- Остальная часть нашего сайта должна быть заключена в уникальном div. Это объясняется тем, что, когда мы открываем меню, все остальное смещается немного правее, чтобы показать скрытые элементы навигации.
Теперь, когда мы получили структуру HTML, мы можем начать все красиво оформлять.
CSS для элементов меню
Давайте начнем с настройки меню и его элементов. Прежде всего, мы должны убедиться, что навигационное меню находится позади нашего контента и что оно остается на месте, даже если пользователь перемещается по странице:
1
2
3
4
5
6
7
8
9
10
11
12
| .navigation { list-style: none; background: #111; width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;} |
Я добавил стили, чтобы настроить оформление нашего меню (фоновые цвета, границы, градиенты и т.д.). Я не буду повторять код здесь, но вы можете ознакомиться с ним в демо примере.
Теперь у нас есть красивые элементы меню, но все меню находится над страницей с контентом. Необходимо добавить стили, чтобы скрывать меню, пока же мы настроим страницу с контентом.
CSS для блока с контентом сайта
Для начала, давайте удостоверимся, что контент сайта полностью закрывает наше меню. Вы можете добавить несколько абзацев РыбаТекста в .site-wrap, если вы еще не добавили содержания.
1
2
3
4
5
6
7
8
9
10
| .site-wrap { min-width: 100%; min-height: 100%; background-color: #fff; position: relative; top: 0; bottom: 100%; left: 0; z-index: 1;} |
Обратите внимание, что мы должны указать фон .site-wrap, иначе меню будет отображаться позади контента. Вы конечно можете использовать любой фоне который хотите. Я добавил следующие параметры:
1
2
3
4
5
6
7
8
| .site-wrap { padding: 4em; background-image: linear-gradient(135deg, rgb(254,255,255) 0%, rgb(221,241,249) 35%, rgb(160,216,239) 100%); background-size: 200%;} |
CSS для кнопки меню
Теперь мы добавим стили, которые придадут нашим чекбоксу и label привычный всем вид, к которому все привыкли.
Прежде всего, давайте скроем чекбокс.
1
2
3
4
5
| .nav-trigger { display: block; width: 0; height: 0;} |
Настройки
displa: block важны. По умолчанию input элементы отображаться как inline-block, так что мы должны установить его как block, чтобы мы могли установить ширину и высоту до нуля. Если мы использовали бы display:none или visiblity: hidden то отключили бы взаимодействие клавиатуру с кнопкой меню, так что мы избежали этого.
Теперь давайте стилизуем
1
2
3
4
5
6
| label[for="nav-trigger"] { position: fixed; top: 15px; left: 15px; z-index: 2;} |
Во-первых, мы установим
position: fixed; теперь label будет на фиксированном месте во время прокрутки страницы. top и left свойства определяют, как далеко от края будет находится кнопка. Мы также установим z-index что бы кнопка была выше .site-wrap.
Далее, мы добавляем значок для кнопки.
1
2
3
4
5
6
7
| label[for="nav-trigger"] { width: 30px; height: 30px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-size: contain;} |
Я использовал встроенный SVG в качестве фонового изображения, но вы можете использовать любой значок.
Обратите внимание, я также включил
cursor: pointer; для визуального отображения интерактивности кнопки.
CSS для анимации
Теперь, когда наши стили меню и кнопки готовы, давайте добавим несколько строк CSS, которые анимируют все это.
1
2
3
4
5
6
7
| .nav-trigger:checked + label { left: 215px;}.nav-trigger:checked ~ .site-wrap { left: 200px; box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);} |
Второй блок гарантирует, что контент сайта сместится вправо на 200 пикселей. Я также добавил тень к блоку контента, чтобы придать ему дополнительный визуальный вид того, что она смешена.
Первый селектор (
.nav-trigger:checked + label) контролирует положение триггера, когда меню открыто. Значение 215 получается из суммы значений 15 ( label[for="nav-trigger"] значение left) и 200 (.nav-trigger:checked ~ .site-wrap значение left )
Это код где порядок элементов триггера становится важным. Второй селектор использует ~, селектор для .site-wrap, когда .nav-trigger отмечен.
1
2
3
| .nav-trigger + label, .site-wrap { transition: left 0.2s;} |
И последнее, скрыть скрол по горизонтали.
1
2
3
| body { overflow-x: hidden;} |
Готовый вариант
И вот оно! Мы успешно построил выдвигающееся меню навигации без JavaScript. Еще раз, демо версия:
Теперь, когда вы знаете, как это делается, можно использовать разные вариации и настройка, пробуйте экспериментируйте.
источник
источник
или 
.png)
