Это мой код HTML, и я пытаюсь создать адаптивную навигационную панель, которая работает нормально, если я изменяю ее размер в мобильном представлении, но всякий раз, когда я нажимаю на значок меню в мобильном представлении, пытаюсь скрыть свое правильное меню и изменить его размер в формате рабочего стола меню справа всегда скрывается, но я не хочу, чтобы меню скрывалось всякий раз, когда я пытаюсь изменить его размер в формат рабочего стола, пожалуйста, кто-нибудь поможет мне решить эту проблему. Я использую jquery ниже в этом html коде для перемещения по меню вверх и вниз. Есть ли простой способ сделать это, используя css.
Вот мой css код
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
list-style-type: none;
}
ul li:hover {
list-style-type: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
h1 {
font-size: 40px;
}
.page-block {
height: 30%;
width: 60%;
padding: 6% 10%;
background-color: #d7d7d7;
text-align: center;
margin: 10% auto;
border-radius: 10px;
position: relative;
}
nav {
display: block;
height: 100%;
width: 100%;
background-color: #dfdfdf;
padding: 10px 30px;
position: relative;
}
.nav-brand {
color: darkgrey;
display: inline-block;
font-size: 25px;
font-weight: bold;
}
.active {
background-color: orange;
color: #fff;
}
.right-menu-toggle {
display: none;
border: 1px solid darkgrey;
border-radius: 3px;
padding: 5px;
position: absolute;
top: 16px;
right: 30px;
color: darkgrey;
cursor: pointer;
}
.menu-right {
float: right;
margin-top: 6px;
width: auto;
height: 100%;
}
.menu-right ul{
margin: 0px;
padding: 0px;
font-size: 16px;
}
.menu-right ul li{
list-style-type: none;
display: inline-block;
}
.menu-right ul li a{
padding: 8px 20px;
text-decoration: none;
}
.menu-right ul li a:hover {
background-color: darkgrey;
color: white;
}
/* ------- Media query ------- */
@media screen and (max-width: 600px) {
.nav-brand {
display: block;
}
.menu-right {
display: none;
float: left;
width: 100%;
text-align: center;
border: 1px solid lightgrey;
}
.menu-right ul li{
display: block;
border-bottom: 1px solid lightgrey;
}
.menu-right ul li a{
display: block;
padding: 8px 20px;
}
.right-menu-toggle {
display: block;
}
}
Вот мой html код
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Navbar</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="font_awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="demo_nav.css"/>
</head>
<body>
<nav>
<div class="nav-brand">
<p><a href="#">Navbar Brand</a><p>
</div>
<div class="menu-right">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="right-menu-toggle">menu</div>
</nav>
<div class="page-block">
<h1>NAVBAR DEMO</h1>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".right-menu-toggle").click(function(){
$(".menu-right").slideToggle(500);
});
});
</script>
</body>
</html>