0
Я делал отзывчивый веб-дизайн, но я столкнулся с этой проблемой с моим jquery. Всякий раз, когда я пытаюсь открыть свое меню, когда он находится в мобильном размере, он просто открывается на секунду и быстро закрывается даже до того, как я нажму кнопку меню. Когда я меняю .css ('display', '') на .css ('display', '500'), меню работает, но тогда проблема в том, что, когда я закрываю мобильное меню, тогда мое полное навигационное меню на рабочем столе не показать. Как я могу исправить это, чтобы мой навигатор работал на мобильных устройствах и на настольных и планшетных компьютерах?Отзывчивый мобильный навигатор (навигация) jquery/javascript
Я сохранил свои файлы для телефона/планшета/dektop .css отдельно вместо того, чтобы создавать @media и предпочел бы сохранить его таким образом, если это возможно. (Если у вас есть какие-либо вопросы по поводу кода просто не стесняйтесь спрашивать и заранее спасибо за то время, помогая мне с этим.)
jQuery(document).ready(function() {
jQuery(".menubutton").click(function() {
jQuery(".nav-menu").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '')
//the number next to 'display' '' can be turned into 1 but then the menu of desktop doesn't show
});
});
});@charset "utf-8";
/* cssphone */
.menubutton {
display: block;
position: relative;
background-color: orange;
text-align: center;
padding: 15px;
font-size: 20pt;
font-size: 6vw;
cursor: pointer;
}
/* Navigation java*/
.nav-expanded {
display: block;
}
/* Navigation java end*/
.nav-menu {
display: none;
}
nav ul {
display: block;
list-style: none;
padding: 0;
margin: 0;
text-align: center;
position: relative;
background-color: #680000;
}
nav ul li {
display: inline-block;
box-sizing: border-box;
width: 100%;
border-bottom: 1px black dashed;
}
nav ul li:hover {
background-color: #ff0000;
}
nav ul li:active {
border-bottom: 3px #fff dashed;
background-color: #ff0000;
}
.currentnav {
border-bottom: 3px #fff dashed;
background-color: #ff0000;
}
nav ul li a {
display: block;
padding: 15px;
color: white;
text-decoration: none;
box-sizing: border-box;
font-size: 20pt;
font-size: 6vw;
font-weight: bold;
}
nav ul li:last-child {
border-bottom: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: block;
position: relative;
background-color: #680000;
width: 100%;
text-align: left;
list-style: none;
}
nav ul ul li {
display: block;
text-align: center;
}
nav ul ul li:hover {
color: white;
background-color: #ff0000;
}
/* css phone ends */
/* css desktop */
@charset "utf-8";
.menubutton {
display: none;
width: 100%;
box-sizing: border-box;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
position: relative;
background-color: #680000;
}
nav ul li {
display: inline-block;
}
nav ul li:hover {
background-color: #ff0000;
}
nav ul li:active {
border-bottom: 3px #fff solid;
background-color: #ff0000;
}
.currentnav {
border-bottom: 3px #fff solid;
background-color: #ff0000;
}
nav ul li a {
display: block;
padding: 15px;
color: white;
text-decoration: none;
font-size: 20pt;
font-weight: bold;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
background-color: #680000;
min-width: 150px;
text-align: left;
border-top: 0;
margin: 0 0 0 -2px;
}
nav ul ul li {
display: block;
border: 1px solid black;
text-align: center;
}
nav ul ul li:hover {
color: white;
background-color: #ff0000;
}
/* css desktop ends */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYLE html>
<html class="html" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="cssdesktop.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1px) and (max-width: 599px)" href="cssphone.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 600px) and (max-width: 960px)" href="csstablet.css">
<link rel="icon" type="image/png" href="images/logo%2016x16.png" alt="16x16logo">
<link rel="shortcut icon" type="image/png" href="images/logo%2016x16.png">
<script type="text/javascript" src="jsfiles/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="jsfiles/script.js"></script>
</head>
<body class="homepage" link="orange" vlink="blue" alink="yellow">
<div class="menubutton">MENU</div>
<nav class="nav-menu">
<ul>
\t <li class="currentnav"><a href="index.html">Home</a></li><li>
\t <a href="Gamin'_News.html">News</a>
<ul>
<li><a href="Latest_Gamin'_News.html">LGN</a></li>
<li><a href="Games_Coming_Out_requirements.html">Games Coming out/Requirements</a></li>
<li><a href="Technology_News.html">Technology News</a></li>
</ul>
</li><li>
\t <a href="Gameplay.html">Gameplay</a>
<ul>
<li><a href="Counter_Strike_Global_Offensive.html">CS</a></li>
<li><a href="The_Elder_Scrolls_Online_Tamriel_Unlimited.html">TESO</a></li>
<li><a href="Other_Games.html">Other Games</a></li>
</ul>
</li><li>
\t <a href="F.A.Q..html">F.A.Q.</a>
<ul>
<li><a href="Cookies.html">Cookies</a></li>
</ul>
</li><li>
\t <a href="About.html">About</a>
<ul>
<li><a href="Who_am_I.html">Who am I?</a></li>
<li><a href="Facebook.html">Facebook</a></li>
<li><a href="Twitch.html">Twitch</a></li>
<li><a href="Youtube.html">Youtube</a></li>
</ul>
</li><li>
\t <a href="Contact.html">Contact</a></li>
\t </ul>
</nav>
</body>
</html>
Этот код в порядке и делает все работы, кроме рабочего стола. Конечно, я могу попасть в меню, но нажав кнопку меню, но я действительно хотел, чтобы кнопка меню отображалась только в мобильной форме, но не в виде рабочего стола. Таким образом, я хочу, чтобы навигационная панель (view = desktop) всегда была видна без кнопки меню (теперь видна кнопка меню), а в (view = mobile) я хотел бы, чтобы кнопка меню была видимой, но навигация была видна только при нажатии. –
Вам просто нужно иметь медиа-запрос, обернутый вокруг свойств отображения, например, этот '@media all и (max-width: 500px) .menubutton { display: block;}' –