CSS меню
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#navbar < margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; >#navbar a < color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; >#navbar a:hover
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
#navbar ul < display: none; >#navbar li:hover ul
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar li < float: left; >#navbar ul li
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul < display: none; position: absolute; top: 100%; >#navbar li < float: left; position: relative; >#navbar
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#navbar ul < display: none; background-color: #f90; position: absolute; top: 100%; >#navbar li:hover ul < display: block; >#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar < height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; >#navbar li < float: left; position: relative; height: 100%; >#navbar li a < display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; >#navbar ul li < float: none; >#navbar li:hover < background-color: #f90; >#navbar ul li:hover
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru
Create Responsive Navbar Using HTML and CSS
Navbar is one of the main aspects that throw a good impression on the visitors. One needs to have a simple, well-managed navigation bar.
Last time, I had shown you to make a simple navigation bar using flexbox in HTML5 and CSS3. But that has a problem as it was not responsive. Nowadays, a responsive design is the most. You need to design a responsive design so that users can see all the menus available.
Through this blog, you will know about how I created this simple navigation bar using only HTML and CSS only. You don’t need to know javascript to accomplish this. One of the best parts of this blog is it is responsive. It is fully responsive for all devices including mobile and tablet too. For certain devices, it will show a hamburger icon, and when you click the hamburger icon, it will show the list of dropdown menus.
Video tutorials of Responsive Navbar using HTML and CSS only
I had used the @media query to make this responsive. If you like this video and want to get the source code of the projects, you can easily find them below so that you can copy them. You can even download the whole projects folder of these navigation files.
If you are a beginner in HTML and CSS, don’t worry. I have used common properties like margin, padding, float, and so on.
NavBar Source Code
First, copy the HTML codes and create a file named index.html and paste the Html codes and save it. Remember file extension must be.html.
Second, copy the CSS codes and create a folder named styles. It’s good to arrange all the files in a good way. Then create a file named styles.css and paste the CSS codes.
@import url("https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap"); @font-face < font-family: AstroSpace; src: url(/fonts/AstroSpace.ttf); >body < margin: 0; padding: 0; font-family: "Montserrat", sans-serif; background-color: #212c3b; >header < background-color: #141b25; >.main-nav < height: 90px; >.logo < color: white; line-height: 90px; font-size: 30px; font-weight: bold; text-decoration: none; margin-left: 30px; font-family: "AstroSpace", sans-serif; >.navlinks < list-style: none; float: right; line-height: 90px; margin: 0; padding: 0; >.navlinks li < display: inline-block; margin: 0px 20px; >.navlinks li a < color: white; text-decoration: none; font-size: 18px; transition: all 0.3s linear 0s; text-transform: uppercase; >.navlinks li a:hover < color: #7ebcb9; padding-bottom: 7px; border-bottom: 2px solid #7ebcb9; >li a.contact < background-color: #00adb5; padding: 9px 20px; border-radius: 50px; transition: all 0.3s ease 0s; border-bottom: none; >li a.contact:hover < background-color: #047e85; color: white; border-bottom: none; >#check < display: none; >.menu-btn < font-size: 25px; color: white; float: right; line-height: 90px; margin-right: 40px; display: none; cursor: pointer; >@media (max-width: 800px) < .navlinks < position: fixed; width: 100%; height: 100vh; text-align: center; transition: all 0.5s; right: -100%; background: #222831; >.navlinks li < display: block; >.navlinks li a < font-size: 20px; >.navlinks li a:hover < border-bottom: none; >.menu-btn < display: block; >#check:checked ~ .navlinks < right: 0; >> @media (max-width: 360px) < .logo < margin-left: 10px; font-size: 25px; >.menu-btn < margin-right: 10px; font-size: 25px; >.menu-btn:focus < color: blue; >> That’s all, now you will have a responsive design in your hand. You can create a responsive navbar design using just HTML and CSS. If your code does not work properly or you want to skip the above manual projects, you can download the full source code from below. It’s a .zip file and completely free.
That’s it. I hope, you will be benefited from this post.