Сегодня в этом блоге вы узнаете, как создать минимальную строку меню навигации или анимированные элементы скользящего меню при нажатии в HTML, CSS и JavaScript.
Навигационное меню или навигационная ссылка — это список ссылок, указывающих на важные области веб-сайта. Обычно они представлены в виде горизонтальной полосы ссылок в верхней части каждой страницы сайта. Навигационные меню определяют структуру вашего сайта и помогают посетителям найти то, что им нужно.
Сначала на веб-странице есть только 3-строчная кнопка меню, и при нажатии на эту кнопку меню эти элементы списка плавно скользят вниз и появляются. Я также добавляю эффект наведения на списки пунктов меню. Когда вы наводите курсор на конкретный элемент, появляется крутая вставка-тень, как вы можете видеть на изображении.
Видео пример выпадающего меню
Если вам нравится эта программа (минимальная строка меню навигации) и вы хотите получить исходные коды. Вы можете легко получить исходные коды этой программы. Чтобы получить исходные коды, вам просто нужно прокрутить вниз.
Минимальная строка меню навигации [Исходные коды]
Как всегда, перед тем, как поделиться кодами этой программы (Minimal Navigation Menu Bar). Несколько слов об основных тегах и кодах этой программы. Сначала в HTML-файле я создал <div> с именем класса «меню-контейнер» и поместил в него все остальные теги. Затем я создал еще один <div> для кнопки и внутри этого тега я создал <span> для значка меню отображения.
После этого я создал тег <ul> и поместил в него пять тегов <li>. Внутри каждого тега <li> я создал тег привязки <a>. Это программа на основе <ul> <li>, поэтому мы можем легко создать список меню.
В файле CSS сначала с помощью селектора * я сбрасываю поля и отступы по умолчанию на 0; Затем я разместил все элементы по центру по горизонтали, используя свойство flex, и задал контейнеру меню высоту и ширину. После этого я создал кнопку меню, чтобы показать или скрыть списки меню. Затем я применил основные стили к тегам <ul>, <li> и <a>, например, задал этим тегам цвета, отступы, отступы, высоту и ширину. Я создал эффект наведения на каждый список меню. Наконец, при стилизации всех тегов я отобразил <ul> для скрытия этих элементов списка.
В файле jQuery сначала я создал функцию щелчка. Затем я создал оператор if/else внутри этой функции. Внутри оператора if я написал условие, если у кнопки есть «класс», затем сдвиньте пункты меню вверх и запустите оператор else. Внутри оператора else я написал, что если у кнопки нет класса «расширить», то добавьте этот класс к кнопке. и запустите функцию setTimeout. Внутри этой функции я перемещаюсь по пунктам меню.
Во-первых чтобы создать эту программу (Минимальная строка меню навигации), вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. Сначала создайте файл HTML с именем index.html и вставьте данные коды в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animated Menu button with list</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="menu-container">
<div class="button">
Menu
<span class="fas fa-bars"></span>
</div>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('.button').click(function(){
if($(this).hasClass('expand')){
$('ul').slideUp(function(){
$('.button').removeClass('expand');
$('.fas').removeClass('expand')
});
}else{
$(this).addClass('expand');
setTimeout(function(){
$('.fas').addClass('expand');
},200);
}
});
});
</script>
</body>
</html>{codeBox}
Во-вторых, создайте файл CSS с именем style.css и вставьте данные коды в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
CSS КОД:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400i,600,700,800&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
.menu-container{
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.button{
position: relative;
background: #1b1b1b;
color: white;
font-size: 20px;
padding: 8px 20px;
width: 150px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 25px;
cursor: pointer;
transition: width .4s;
}
.button.expand{
width: 100%;
}
.fas.expand:before{
content: '\f00d';
}
ul{
list-style: none;
position: absolute;
top: 65px;
display: block;
background: #1b1b1b;
width: 100%;
text-align: center;
border-radius: 5px;
display: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
ul:before{
position: absolute;
width: 20px;
height: 20px;
}
font-size: 18px;
text-decoration: none;
}
ul li:hover a{
color: cyan;
}{codeBox}
jQuery КОД:
<script>
$(document).ready(function(){
$('.button').click(function(){
if($(this).hasClass('expand')){
$('ul').slideUp(function(){
$('.button').removeClass('expand');
$('.fas').removeClass('expand')
},200);
}
});
});
</script>{codeBox}
Вот и все, теперь вы успешно создали минимальную строку меню навигации, используя HTML CSS и jQuery. Если ваш код не работает или вы столкнулись с какими-либо ошибками/проблемами, прокомментируйте или свяжитесь с нами со страницы контактов.