#javascript #html #css
#javascript #HTML #css
Вопрос:
Мне удалось создать адаптивное навигационное меню, однако на маленьком экране оно отображается в соответствии с прикрепленной фотографией. Я хочу сгруппировать ссылки в кнопку выпадающего меню, которая отображается на небольших экранах.
Вот как это отображается на большом экране 
Вот как это отображается на маленьком экране 
<header>
<!-- Navigation Links -->
<div class="overlay"></div>
<div class="topnav">
<nav>
<ul>
<li><a href="#0" class="active"><div class="image-icon"><img src="img/icons/face_icon.ico" alt="Face Icon"></div>Face</a></li>
<li><a href="#0"><div class="image-icon"><img src="img/icons/forehead_icon.ico" alt="Forehead Icon"></div>Forehead</a></li>
<li><a href="#0"><div class="image-icon"><img src="img/icons/eyebrow_icon.ico" alt="Eyebrow Icon"></div>Eyebrow</a></li>
<li><a href="#0"><div class="image-icon"><img src="img/icons/nose_icon.ico" alt="Nose Icon"></div>Nose</a></li>
<li><a href="#0"><div class="image-icon"><img src="img/icons/lip_icon.ico" alt="Lip Icon"></div>Lips</a></li>
<li><a href="#0"><div class="image-icon"><img src="img/icons/ear_icon.ico" alt="Ear Icon"></div>Ears</a></li>
</ul>
</nav>
</div> <!-- .cd-slider-nav -->
</header>
.topnav {
text-align: center;
overflow: hidden;
position: relative;
}
.topnav ul {
padding: 0;
margin: 0;
}
.topnav ul li {
display: inline-block;
margin: 30px 30px;
}
.topnav ul li a {
font-size: 14px;
text-transform: uppercase;
text-align: center;
font-weight: 550;
color: #fff;
margin-top: 15px;
}
.topnav ul li a:hover {
color: #ffbb05;
text-decoration: none;
}
.topnav ul .active {
color: #ffbb05;
}
.topnav .image-icon img {
width: 50px;
}
.topnav .image-icon {
margin: 0 auto;
margin-bottom: 15px;
display: block;
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 50%;
text-align: center;
background-color: #ffbb05;
}
.topnav .image-icon:hover {
background-color: #fff;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
}
/*
========================================
---------- RESPONSIVE STYLE ------------
========================================
*/
@media screen and (max-width: 750px) {
.topnav .image-icon img {
display: none;
}
.topnav .image-icon {
display: none;
}
}
jsfiddle —https://jsfiddle.net/Dexter01/vyn3j2d0 /
Комментарии:
1. Ознакомьтесь с медиа-запросами CSS здесь
2. Оформить загрузку — getbootstrap.com , это поможет вам создавать адаптивные веб-сайты
3. @NikhilSingh Рекомендовать полный фреймворк для одной задачи, подобной этой, не нужно, и есть другие фреймворки. Ответы здесь должны основываться на фактах, а не на мнениях, и предложение одной платформы, о которой даже не спрашивали, определенно основано на мнении!
4. @NikhilSingh Это все еще рекомендация, которая выходит далеко за рамки требований, которые они задавали, и это может даже нанести вред, если неопытный пользователь отправится в неправильном направлении или во что-то, выходящее за рамки их уровня знаний, поэтому такого рода предложения лучше всего хранить для пользователей, которые проявили интерес к фреймворкам, а не к простым задачам, чтобы сохранить информацию по теме. Даже комментарии тоже должны быть по теме 🙂
5. @FluffyKitten обязательно позаботится о том, чтобы в следующий раз быть более конкретным 🙂
Ответ №1:
Скрыть меню, когда оно находится на маленьком экране. Затем вы можете переключить видимость меню, переключив класс. Что-то вроде is-open .
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content=" ">
<meta name="author" content=" ">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobileoptimized" content="0" />
<!-- FONT -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;642;700amp;display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Scripts -->
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<header>
<button class="show">
Show
</button>
<!-- Navigation Links -->
<div class="overlay"></div>
<div class="topnav">
<nav>
<ul>
<li><a href="#0" class="active">
<div class="image-icon"></div>Face
</a></li>
<li><a href="#0">
<div class="image-icon"></div>Forehead
</a></li>
<li><a href="#0">
<div class="image-icon"></div>Eyebrow
</a></li>
<li><a href="#0">
<div class="image-icon"></div>Nose
</a></li>
<li><a href="#0">
<div class="image-icon"></div>Lips
</a></li>
<li><a href="#0">
<div class="image-icon"></div>Ears
</a></li>
</ul>
</nav>
</div> <!-- .cd-slider-nav -->
</header>
<!-- Footer -->
<footer>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"></script>')
</script>
<!-- End Document -->
</body>
</html>
Только что добавлена кнопка с show классом в приведенном выше блоке кода.
@media screen and (max-width: 750px) {
.topnav .image-icon img {
display: none;
}
.topnav .image-icon {
display: none;
}
.topnav ul {
display: none;
}
.topnav ul.is-open {
display: flex;
flex-direction: column;
}
}
Добавлен медиа-запрос только для обработки меню небольшого размера экрана.
$(".show").click(() => {
$(".topnav ul").toggleClass("is-open");
})
Код Jquery для переключения класса.
Я предпочитаю это, чем использовать обычный show() and hide() , таким образом, вы можете изменить всех потомков is-open класса. Вот измененный jsfiddle