Здесь мы прописываем только один блок для кнопки, для примера я создал элемент с классом hamburger . Полоски будут создаваться в помощью стилей, мы будет создавать вторую и третью полоски через свойства border-bottom и border-top , а центральная полоска будет создаваться через псевдоэлемент before .
CSS
CSS код тоже простой. Здесь для понимания я все расписал.
.hamburger < position: relative; display: block; width: 50px; height: 25px; margin: 20px auto; border-top: 5px solid #fff; border-bottom: 5px solid #fff; >.hamburger:before
Ещё один вариант кнопки
.hamburger < position: relative display: flex flex-direction: column row-gap: 5px width: 50px height: fit-content margin: 20px auto >.hamburger hr < width: 100% height: 5px border: none background: #fff margin: 0 0 0 auto >.hamburger hr.line2 < width: 63% >.hamburger hr.line3
На этом всё!
Больше интересных статей в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
CSS фича #4 ➤ Кнопка меню гамбургер | Burger menu button CSS
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime
Наши планы
- Написание материала для курса по разработке ботов на Telegram
- Разработка универсального парсера на PHP
Поддержите мой сайт!
Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube
Источник: prog-time.ru
Создание простого меню для сайта на HTML и CSS
Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!
Большое спасибо за вашу помощь и внимательность к нам!
И снова всех приветствую на нашем проекте! Сегодня у нас будет рассмотрен урок на тему создание простого меню для сайта. Тема очень распространенная, но надеюсь Вы сможете для себя, как новичок, получить полезные знания и возможно просто разобраться, как это реализуется.
Данный урок был записан по просьбе одного из наших постоянных читателей, поэтому другие темы и не рассматривались. После чего я, вместе со своим напарником по разработке, Евгением Кузьменко, подготовил для Вас выпадающее меню для сайта.
С данным уроком Вы можете ознакомиться, как на сайте прочитав статью, так и по видео уроку, чтобы более детально понять основные принципы реализации выпадающего меню. Кстати, по поводу создания меню, также рассказывали и в других уроках, например таких как: Создание меню в Битрикс, Делаем меню как в nexus или например, как Адаптивное меню SlickNav, поэтому можете рассмотреть и их, вдруг что-то окажется полезным и пригодится!
Первый шаг. HTML.
И так, переходим к первому шагу данного урока и сначала нам нужно подключить файл demo.css, который лежит у нас в папочке css, а затем уже подключаем шрифт Open Sans. Ребята, я рассказываю все по демо, поэтому Вы можете все делать по своему усмотрению.
Далее нам нужно создать обычный маркированный список ul li, а также задать первому ul идентификатор nav, чтобы мы могли работать через него, обращаясь к стилям css. Делается это очень просто, не знаю, что тут можно описать, поэтому скидываю сразу структуру, как в демо.
Второй шаг. CSS.
Переходим к стилям CSS и первым делом, мы должны установить тот шрифт, который прописали вначале данного урока, а именно Open Sans. После того, как наш шрифт успешно прописан, переходим уже к самому каркасу нашего маркированного списка, которому зададим определенные свойства, а также расположение и позиционирование элементов. Заметим, что мы создаем горизонтальное меню, поэтому применяем свойство float left.
#nav < font-family: ‘Open Sans’, arial; >#nav li< float:left; /* все ссылки идут слева на право */ position:relative; list-style:none; /* убираем точки */ background:#ff3131; width:190px; >
Убираем у каждой ссылки нашего меню нижнее подчеркивание, а также придаем белый цвет. Далее, чтобы при наведении на выпадающее меню основная ссылка была выделена, задаем идентификатор active, а также не забываем про сам цвет при наведении всех элементов данного меню. Так как у нас имеется выпадающее меню, нам соответственно нужно его будет скрыть. Для этого прописываем свойство visible и указываем ему параметр hidden, а также не забываем про абсолютное позиционирование данного элемента.
#nav a < text-decoration:none; display:block; /* делаем блочным элементов тег «a» */ padding:35px 65px; color:#ffffff; >#active a, #nav li:hover > a < background:#b32424; >#nav ul < visibility:hidden; /* скрываем выпадающее меню */ padding:0; position:absolute; >
Теперь после того, как наше меню успешно скрыто, нам нужно сделать выпадающее меню. Это реализовать достаточно просто, нужно задать элементу меню с идентификатором nav свойство visible. Тем самым мы получим результат выпадающего меню. Далее все по стандарту, изменяем выпадающее меню на наше усмотрение, задаем ему отступы и цвет. Не забываем указать свойство left 0 при ховере, ведь без него все выпадающее меню поедет и соответственно будет не очень красиво. (пункт 1)
#nav li:hover > ul < visibility:visible; /* показываем выпадающее меню при наведении */ position: relative; >#nav ul a < padding:18.5px 65px; /* делаем отступы выпадающего меню меньше от основного */ >#nav ul li:hover < background:#d92a2a; >#nav li:first-child:hover > ul< left: 0px; /* при наведении на первый элемент чтобы не съежало выпадающее меню */ >
Так как Евгений, подготовил макет данного меню, то все моменты связанные с его дизайном, мы реализовали с Вами в соответствии. Теперь, нам нужно реализовать border меню, так как он имеют некую функциональную особенность. Давайте ее рассмотрим. Для начала нам потребуется сделать border справа для основного меню, затем чтобы border не было слева нам нужно указать основному меню задать свойство none.
#nav > li < border-right: 2px solid #d92a2a; /* добавляем рамку к основному меню справа */ >#nav > li:last-child< border-right: none; /* убираем рамку справа основного меню */ >
Теперь, пора перейти к выпадающему меню, где функциональные свойства намного покажутся сложнее основного меню, ведь нам придется задавать определенные свойства элементам. Для начала укажем border для двух сторон выпадающего меню, а именно для правой стороны и левой. И напоследок нам будет необходимо скрыть с помощью свойства border none правую и левую сторону меню.
#nav > li ul li < border-left: 2px solid #d92a2a; /* добавляем рамку к выпадающему меню слева */ border-right:2px solid #d92a2a; /* добавляем рамку к выпадающему меню справа */ >#nav li:first-child ul li,#nav li:first-child ul < border-left:none; /* убираем рамку у выпадающего меню слева */ >#nav li:last-child ul li,#nav li:last-child ul < border-right:none; /* убираем рамку у выпадающего меню справа */ >
Проверяем все на сайте и видим, что все отлично работает, кроме одной детали, а именно наше выпадающее меню при наведении на вторую ссылку и последующую сдвигается немного вправо. Для этого, чтобы устранить данную проблему, мы задаем элементу меню с идентификатором nav свойство left и в качестве параметра даем ему минус два. (см. пункт 1)
#nav li:hover > ul< left: -2px; /* смещаем выпадающее меню слева от размера рамки*/ >
Проверяем все на сайте и видим, что мы теперь действительно все сделали верно и можем заканчивать данный урок. Я благодарю Вас за ваше внимание, за ваши комментарии, а также за то, что Вы ознакомились с данным уроком и надеюсь, смогли для себя что-то выделить и подчеркнуть. А я с Вами прощаюсь и в следующем уроке мы рассмотрим тему меню сопровождением звуковой анимацией. Всем удачи!)
Источник: roothelp.ru
Выпадающее меню на HTML и CSS
Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней.
Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.
- Вертикальное выпадающее меню
- Горизонтальное выпадающее меню с одним уровнем вложенности
- Горизонтальное меню с несколькими уровнями вложенности
Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось.
HTML файл мы больше трогать не будем. Все дальнейшие изменения производятся только за счёт CSS. Первое что нам нужно сделать — скрыть вложенные пункты.
ul.nav li ul
Ещё нужно убрать маркеры но это дело вкуса.
ul.nav li
Чтобы вложенные пункты появлялись при наведении на родительский пункт используем псевдокласс :hover, при этом нужно сделать так что бы появлялись только пункты первого уровня вложенности. Для этого используем знак >
ul.nav li:hover > ul
В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.
С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.
Вертикальное выпадающее меню
Используя свойство position мы переместим вложенные пункты в право на расстояние равное ширине меню. В рассматриваемом способе есть одно ограничение. При позиционировании нам придётся жёстко задать ширину. С другой стороны вертикальное меню размещается в сайдбаре ширина которого заранее определена, поэтому привязка к ширине не должна вызвать проблем.
/* Вертикальное выпадающее меню*/ body < background: #DCDCDC; >/*блок меню*/ ul < margin: 0; padding: 0; >ul.nav li < background: #B3B3FF; border: 1px solid #FFFFFF; list-style: none; width: 150px; /*ширина блока меню*/ >ul.nav li a < text-decoration: none; display: block; padding: 5px 5px 5px 15px; >ul.nav li ul < display: none; /*скрываем вложенные пункты*/ >/*Выпадающее меню*/ ul.nav li:hover < /* позиционирование вложенных элементов * будет расчитыватьться относительно * родительского элемента */ position: relative; background: yellow; >ul.nav li:hover > ul < display: block; >ul.nav li:hover ul< position: absolute; top: 0; /*Задаём координаты для вложенных пунктов*/ left: 150px; /*меню раскрывается вправо*/ >
Вот что должно получиться в результате. демка
Горизонтальное выпадающее меню
Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float. Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным.
Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.
/*Горизонтальное выпадающее меню с одним уровнем вложенности*/ body < background: #DCDCDC; >/* Блок меню*/ ul < margin: 0; padding: 0; >ul.nav li < background: #B3B3FF; border-right: 1px solid #FFFFFF; float: left; /*делаем меню горизонтальным*/ height: 30px; list-style: none; >ul.nav li a < text-decoration: none; display: block; padding: 5px 5px 5px 15px; >ul.nav li ul < display: none; /*скрываем вложенные пункты*/ >ul.nav li:hover < background: yellow; >/*Выпадающее меню*/ ul.nav < position: relative; background: #B3B3FF; height: 30px; width: 600px; >ul.nav li:hover > ul
Вот что получиться в итоге демка.
Многоуровневое горизонтальное выпадающее меню
Созданное в предыдущем пункте меню также может быть многоуровневым но выглядит оно при этом не очень. На мой взгляд многоуровневое меню должно открываться следующим образом — первый уровень вниз остальные вправо. Здесь, в отличии от предыдущего горизонтального меню, вложенные пункты позиционируем относительно родительского пункта и задаём для них ширину. Ширина нам нужна для второго и последующих уровней вложенности. В этом меню мы возьмём понемногу от предыдущих и немного добавим нового.
/*Горизонтальное выпадающее меню a*/ body < background: #DCDCDC; >/* Блок меню*/ ul < margin: 0; padding: 0; >ul.nav li < background: #B3B3FF; border-right: 1px solid #FFFFFF; float: left; /*делаем меню горизонтальным*/ height: 30px; list-style: none; >ul.nav li a < text-decoration: none; display: block; padding: 5px 5px 5px 15px; >ul.nav li ul < display: none; /*скрываем вложенные пункты*/ >ul.nav < /*задаём высоту и ширину меню*/ background: #B3B3FF; height: 30px; width: 600px; >/*Выпадающее меню*/ ul.nav li:hover < background: yellow; position: relative; >ul.nav li:hover > ul < border-top: 1px solid white; display: block; position: absolute; top: 30px; /*первый уровень меню раскрывается вниз*/ left: 0; >/*Второй и последующие уровни вложенности*/ ul.nav li ul li < border-bottom: 1px solid white; height: auto; width: 150px; >ul.nav li:hover ul li ul< position: absolute; top: 0; left: 150px; /*второй и последующие уровни расскрываются вправо*/ >
Вот так будет выглядеть наше многоуровневое меню демка.
- Войдите, чтобы оставлять комментарии
Спасибо огромное! Задолбался
Добавлено пользователем Юрий on ср, 04/02/2014 — 16:35
Спасибо огромное!
Задолбался я иcкать решение простое до нельзя, что бы было только нужное и больше ничего лишнего.
А то раздуют css непонятно чем. Здесь же все просто и локанично.
Интересно, а для Вордпресс
Добавлено пользователемНадежда Давыдоваon сб, 04/12/2014 — 11:54
Интересно, а для Вордпресс такое решение не подходит? Довольно просто все изложено, сделать сможет любой. Отличные советы, без лишней «шелухи»!
HTML + CSS в чистом виде,
Добавлено пользователем Oleg on сб, 04/12/2014 — 13:32
HTML + CSS в чистом виде, поэтому должно подойти для любого сайта. Специально писал с минимумом оформления, чтобы не перегружать CSS.
Очень полезная информация.
Добавлено пользователемЮлияon вс, 05/04/2014 — 08:57
Очень полезная информация. Когда такое меню хотела реализовать у себя на блоге, то пришлось обращаться к веб-мастеру. А теперь могу сесть и потихоньку реализовать такую задумку сама. Подписалась на Ваш блог. Буду изучать.
Возникнут вопросы обращайтесь
Добавлено пользователем Oleg on вс, 05/04/2014 — 09:41
Возникнут вопросы обращайтесь. Чем смогу помогу.
Что-то мой комментарий не
Добавлено пользователемМихаилon сб, 09/20/2014 — 12:28
Что-то мой комментарий не виден — дублирую:
===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка «ul. nav li:hover ul «
Подскажите, в чем дело?
Есть пожедания по изложению материала:
-хорошо бы в этой строке (ul.aaaaa li:hover ul ) растолковать, какая ее часть отвечает за «выпадение меню», а какая — за скрывание пунктов более глубокого уровня вложенности
-хорошо бы в примерах каждую строку снабжать комментарием, что она делает.
-в частности, неясно, зачем нужна строка «
-перед этой строкой стоят 2 строки, видимо, не относящиеся к делу (Домой
и Посмотреть вертикальное меню). У человека, незнакомого с новым материалом (то есть, как раз для того, для которого вы писали), уходит время на осознание того, что эти строки для выпадающего меню не нужны. Или все-таки нужны?
-в хеддере в вашем примере имеются 3 строки. Из них только одна относится к теме (задает имя ЦСС-файла), а 2 другие — нет. Это также осложняет освоение материала. Тем более, что на моем компьютере такой хеддер вообще приводит к некорректному отображению текста, поскольку мне нужно ставить не «utf-8», а «Windows-. «
-в примере неясно, что слова «style.css», «block-menu» и «nav» — это не ключевые слова, а названия, задающиеся пользователем. Я выяснял это экспериментально
Короче говоря, хотелось бы, чтобы в примерах было только то, что имеет отношение к делу, причем, чтобы про неясные по контексту строки было бы написано, какое именно «отношение к делу» они имеют.
Самый объёмный коммент.
Добавлено пользователем Oleg on сб, 09/20/2014 — 23:50
Самый объёмный коммент.
Коментарии проходят только после модерации поэтому вы и не увидели свой коммент сразу.
Постараюсь ответить на всё. Начнём с вопросов зачем здесь это. Таки да две ссылки просочились с рабочего варианта.
Насчёт не корректного отображения текста. Вы смогли прочитать и откоментить эту страницу при том что кодировка у неё такая же как и у примера в посте.
Данный пост не предназначен для абсолютных новичков и был написан по желанию подписчиков. Если объяснять абсолютно всё то нужно будет рассказать про классы и идентификаторы, блоки, позиционирование, псевдоселекторы, каскад и прочее. Довольно большая статья получиться и что самое главное бесполезная.
ul.nav li:hover > ul будет показывать ранее скрытый пункт. Если разбирать по буквам то(здесь параллельно смотрим на код ) при наведении на пункт меню(ul.nav li) сработает :hover и первый вложенный список >ul будет виден за счёт того что значение display сменит значение с none на block.
Поправил статью с учётом
Добавлено пользователем Oleg on пт, 10/17/2014 — 18:12
Поправил статью с учётом ваших замечаний. Про кодировку честно говоря забыл что виндовс сохраняеи файлы в windows-1251 Тут два варианта или как вы заметили указать форточную кодировку в файле или изменить кдировку файла например в Notepad++.
Спасибо за критику приходите к нам ещё
Меню некоректно отображается
Добавлено пользователем Евгений on вс, 05/04/2014 — 16:55
Меню некоректно отображается в safari IE Mozila Firefox не подскажите в чем может быть проблема?
Только что проверил в IE и
Добавлено пользователем Oleg on вс, 05/04/2014 — 23:48
Только что проверил в IE и FireFox всё работает как надо. Можно подробнее в чём проблема
Источник: webonlife.ru