как создать меню справа в шапке сайта
Каша в HTML, дивы не лежат друг в друге, меню не должно выходить за котент или что то другое? У вас content лежит не в контейнере.
21 июн 2017 в 20:27
@RuslanSemenov когда начинаешь двигать окно браузера то меню просто выходит за рамки сайта это видно по бордеру в 1пикс
21 июн 2017 в 20:37
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вот пример если понимаете flexBox
.site < max-width: 1000px; margin: 0 auto; background-color: #3F3F3F; min-height: 100vh; >nav < width: 100%; >.menu < display: flex; justify-content: flex-end; background-color: pink; list-style: none; >.menu li < position: relative; padding: 10px; >article
Вот ваш код без flex, немного почистил
.container < max-width: 400px; margin: 0 auto; text-align: center; background-color: skyblue; >#header < background: url(img/header.jpg) no-repeat; background-size: cover; background-color: yellow; >ul < text-align: right; >ul li
Отслеживать
ответ дан 21 июн 2017 в 20:07
Ruslan Semenov Ruslan Semenov
3,651 1 1 золотой знак 9 9 серебряных знаков 23 23 бронзовых знака
на сколько я знаю flexbox многие браузеры не поддерживают
21 июн 2017 в 20:09
Все, но нужно прогнать код префиксами, сейчас куча авто вариантов сделать это. А вот и поддержка caniuse.com/#search=flex
21 июн 2017 в 20:15
Semenov не совсем ещё разбираюсь поэтому для меня это далеко пока
21 июн 2017 в 20:22
autoprefixer.github.io/ru вот сайт который изменит для вас css в универсальный формат.
21 июн 2017 в 20:29
Semenov спасибо
21 июн 2017 в 20:39
- html5
- css3
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как создать бургер меню с выезжающей панелью на чистом CSS
Сегодня будет простенькая статья о том как сделать простое выезжающее меню без использования скриптов, то есть на чистом html + CSS. Данный урок будет полезен тем, кто верстает простые макеты, хочет создать свой сайт и изучает верстку. Конечно же, подойдет и мастерам, что создают темы на WordPress. Материал интересный и отлично подойдет для создания простых меню или меню для мобильных устройств, то бишь которое появляется на адаптивных страницах.
Я использовал данный вариант несколько рази и вот недавно мне попался схожий, но он был сложнее и с большим количеством кода, поэтому я решил опубликовать статью о своем варианте и поделится этим 100% рабочим методом с вами. Пример того как работает все это можно посмотреть нажав на кнопку ниже. Если это то что нужно вам и вы хотите сделать выезжающее меню с левой или правой стороны без использования скриптов у себя на сайте, то давайте перейдем к коду.
Первое что понадобится — добавить html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню — это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.
В нужное вам место на сайте добавьте html следующий код:
Давайте я подробно распишу что и как тут устроено и для чего каждый элемент
- Сначала идет главный блок-контейнер с классомburger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
- Далее идет чекбокс с ID — menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
- Далее идет label с классом —menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
- После идет наше основное меню в виде ul списка с классом — menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру — делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.
Как вы поняли, суть способа в том, что у нас есть скрытое меню за пределами страницы и обычный чекбокс, стилизованный под бургер меню. Когда мы нажимаем на чекбокс, мы задаем новые параметры для нашей скрытой панели/блока который появляется сбоку. В примере он выезжает слева, можете поменять и сделать справа.
Для начала, давайте добавим сами CSS стили, чтобы заработало, а уже потом сможете их менять. Открывайте свой файл стилей и добавьте в него следующий кусок кода:
Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.
.menu-btn < display: flex; align-items: center; position: absolute; top: 0; right:0; width: 26px; height: 26px; cursor: pointer; z-index: 1; >.menu-btn > span, .menu-btn > span::before, .menu-btn > span::after < display: block; position: absolute; width: 100%; height: 2px; background-color: #616161; transition-duration: .25s; >.menu-btn > span::before < content: ''; top: -8px; >.menu-btn > span::after
Далее задаем стили для нашего меню, то бишь ul списку.
.menubox
left: -100%; — в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.
Ну и мои стили для пунктов меню. Тут можете задавать что хотите, свои, эти стили не обязательны
.menu-item < display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; >.menu-item:hover
Теперь скрываем стандартный чекбокс в виде галочки
#menu-toggle
Задаем правила, что делать с нашим бургер меню, и самим меню, когда происходит активирование чекбокса, то есть когда вы жмете по нему и по label. Одну полоску мы поворачиваем, а две нижние поднимаем вверх и тоже поворачиваем и в результате из трех полосок получаем крестик. Так же делаем видимым наш скрытый блок с пунктами меню.
#menu-toggle:checked ~ .menu-btn > span < transform: rotate(45deg); >#menu-toggle:checked ~ .menu-btn > span::before < top: 0; transform: rotate(0); >#menu-toggle:checked ~ .menu-btn > span::after < top: 0; transform: rotate(90deg); >#menu-toggle:checked ~ .menubox
В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы — left: 0;. Если хотите справа, то просто смените на right: 0;.
Ну и весь код целиком, если вы не копировали по порядку, предыдущие отрезки.
.menu-btn < display: flex; align-items: center; position: absolute; top: 0; right:0; width: 26px; height: 26px; cursor: pointer; z-index: 1; >.menu-btn > span, .menu-btn > span::before, .menu-btn > span::after < display: block; position: absolute; width: 100%; height: 2px; background-color: #616161; transition-duration: .25s; >.menu-btn > span::before < content: ''; top: -8px; >.menu-btn > span::after < content: ''; top: 8px; >.menubox < display: block; position: fixed; visibility: hidden; top: 0; left: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #ECEFF1; box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); transition-duration: .25s; >.menu-item < display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; >.menu-item:hover < background-color: #CFD8DC; >#menu-toggle < opacity: 0; >#menu-toggle:checked ~ .menu-btn > span < transform: rotate(45deg); >#menu-toggle:checked ~ .menu-btn > span::before < top: 0; transform: rotate(0); >#menu-toggle:checked ~ .menu-btn > span::after < top: 0; transform: rotate(90deg); >#menu-toggle:checked ~ .menubox
Если вы все сделали правильно и нигде не допустили ошибку, то все должно работать так как в примере. Очень надеюсь, что вам понравилась статья и вы воспользовались ней. Если у вас возникли вопросы или проблемы, можете обратиться ко мне или заказать услугу по доработке вашего сайта. Контакты можете найти в шапке или подвале сайта.
На этом все, спасибо за внимание. ��
Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂
Как сделать меню справа css
Если вы когда-нибудь верстали макет страницы с помощью таблиц, то вам хорошо известно, насколько просто достичь изображенного на рис. 9.10 эффекта. Достаточно выровнять содержимое левой ячейки таблицы, состоящей из двух колонок, по левому краю, а правой – по правому. К счастью, того же результата можно добиться и с помощью CSS.
Рис. 9.10. Расположение логотипа слева, а слогана – справа с помощью CSS
Решение
Для позиционирования элементов указанным образом можно воспользоваться свойством float :
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> Логотим и слоган http-equiv="content-type" content="text/html; charset=utf-8" /> rel="stylesheet" type="text/css" href="slogan-align.css" /> id="header"> src="img/logo.png" width="300" height="42" alt="XOOPS.ws" class="logo" /> class="slogan">Поддержка XOOPS
body margin: 0; padding: 0; background-color: #000000; color: #2B4EFF; font-family: Arial, Helvetica, sans-serif; border-top: 2px solid # 2B4EFF ; > #header border-top: 1px solid #778899; border-bottom: 1px dotted #B2BCC6; height: 3em; > #header .slogan font: 120% Georgia, “Times New Roman”, Times, serif; color: #2B4EFF; background-color: transparent; float: right; width: 200px; margin-right: 2em; margin-top: 0.5em; > #header .logo float: left; width: 187px; margin-left: 1.5em; margin-top: 0.5em; >
Обсуждение
С помощью свойства float можно выравнивать элементы «шапки» по любой стороне. Перед добавлением данного свойства элементы будут отображаться рядом друг с другом, как показано на рис. 9.11.
Такое позиционирование элементов обусловлено HTML-разметкой, в которой не содержится никаких указаний относительно их расположения. Именно поэтому они просто следуют друг за другом.
Рис. 9.11. Расположение элементов по умолчанию
Рассмотрим HTML-код, управляющий расположением слогана:
id="header"> src="img/logo.png" width="300" height="42" alt="XOOPS.ws" class="logo" /> class="slogan">Поддержка XOOPS
С помощью свойства float можно разместить элементы класса logo слева, а элементы класса slogan – справа. Кроме того, я добавила правило для выравнивания текста слогана вправо, без которого он прижимался бы к левому краю содержащего его элемента span, который выровнен вправо! Результат проведенных действий показан на рис. 9.12.
Рис. 9.12. Применение свойства float для позиционирования элементов
Для создания дополнительного пустого пространства вокруг элементов добавим к логотипу внешний отступ сверху и слева, а к слогану – сверху и справа:
#header .slogan font: 120% Georgia, “Times New Roman”, Times, serif; color: #778899; background-color: transparent; float: right; width: 200px; text-align: right; margin-right: 2em; margin-top: 0.5em; > #header .logo float: left; width: 187px; margin-left: 1.5em; margin-top: 0.5em; >
При использовании такого подхода следует учесть следующее: если вы делаете все элементы в контейнере плавающими, то ничто не заставляет контейнер оставаться открытым, и его высота уменьшается до нуля, как показано на рис. 9.13.
Рис. 9.13. При указании свойства float для дочерних элементов «шапки» она полностью сворачивается
Для большей наглядности я добавила к контейнеру логотипа и слогана рамку. На рис. 9.14. показан вид контейнера до присваивания дочерним элементам свойства float.
Рис. 9.14. Размер «шапки» до присваивания дочерним элементам свойства float
После присваивания дочерним элементам свойства float высота контейнера уменьшается до нуля, поскольку теперь они удалены из общего потока элементов в документе, в результате чего рамка контейнера превратилась в сплошную красную линию, как видно на рис. 9.13.
Во избежание такой ситуации можно задать высоту блока с помощью свойства height:
#header border-top: 1px solid #778899; border-bottom: 1px dotted #B2BCC6; height: 3em; >
Теперь блок занимает отведенную ему область страницы, как показано на рис. 9.15.
Рис. 9.15. После задания свойства height для div c «шапкой» страница отображается совершенно нормально
При выборе значения свойства height в такой ситуации следует учитывать возможные изменения в документе при увеличении размера шрифта пользователем. В качестве единиц измерения при этом лучше всего использовать em, поскольку при этом высота элемента будет увеличиваться в соответствии с размером текста, и он по-прежнему сможет вместить его, не «выталкивая» плавающие элементы.
Если бы объем текста в данном контейнере был неизвестен, то следовало бы воспользоваться свойством clear, о котором мы говорили чуть ранее.
Как сделать — Меню по правому краю
Узнать, как создать панель навигации с выровненными по левому краю и по правому краю ссылками.
Ссылки меню выровнены по правому краю
Создание верхней панели навигации
Шаг 1) Добавить HTML:
Пример
Пример
/* Добавить черный цвет фона для верхней навигации */
.topnav background-color: #333;
overflow: hidden;
>
/* Стиль ссылок внутри панели навигации */
.topnav a float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>
/* Изменение цвета ссылок при наведении курсора */
.topnav a:hover background-color: #ddd;
color: black;
>
/* Добавить цвет для активной/текущей ссылки */
.topnav a.active background-color: #4CAF50;
color: white;
>
/* Выровненный по правому краю раздел внутри верхней навигации */
.topnav-right float: right;
>
Совет: Чтобы создать удобные для мобильных устройств, отзывчивые навигационные панели, прочитайте наш учебник Как сделать — Отзывчиую верхнюю навигацию.
Совет: Зайдите на наш учебник CSS Навигация чтобы узнать больше о навигационных барах.