Javascript показать/скрыть функцию

-1

Может ли кто-нибудь увидеть, почему мое меню не отображается/скрывается? Я был у него часами !!! & Я уверен, что это что-то глупое.Javascript показать/скрыть функцию

Мне нужно, чтобы навигация имела пункт меню, который появляется в меню, когда медиа-запрос запускается, чтобы скрыть меню. Затем кнопка переключит навигационное меню.

Здесь он находится на jsfiddle. Я просто положить весь мой код, чтобы вы могли видеть все https://jsfiddle.net/Doops/ut1d28c4/1/

CSS:

/* Responsive -1024 */ 
@media screen and (max-width: 1024px) { 
    body { 
    background-color: black; } 

    .header { 
    width: 90% !important; } 

    .brand { 
    width: 30% !important; } 

    .brand img { 
    display: block !important; 
    margin: auto !important; 
    max-width: 190px !important; 
    width: auto !important; 
    height: auto !important; } } 
/* Responsive -720 */ 
@media screen and (max-width: 720px) { 
    body { 
    background-color: pink; } 

    .header { 
    width: 100% !important; } 

    .brand img { 
    display: block !important; 
    margin: auto !important; 
    max-width: 190px !important; 
    width: auto !important; 
    height: auto !important; } 

    .brand { 
    width: 100% !important; 
    float: none !important; } 

    .nav { 
    display: none !important; 
    float: none !important; 
    width: 100% !important; } 

    .nav ul, .navmenu ul { 
    width: 100% !important; } 

    .nav li, .navmenu ul { 
    display: block !important; 
    padding: 5px 0 !important; 
    height: auto !important; 
    text-align: center; } 

    .nav li a, .navmenu ul a { 
    line-height: 34px !important; } 

    .navmenu { 
    display: block !important; 
    visibility: visible !important; } } 
/* END RESPONSIVE */ 
body { 
    padding: 0px; 
    margin: 0px; } 

.header { 
    width: 68%; 
    margin: auto; 
    background-color: aqua; } 

.brand img { 
    padding-top: 43px; 
    display: block; 
    margin: auto; } 

.brand { 
    width: 190px; 
    height: 120px; 
    float: left; } 

.brand:hover { 
    background-color: #dddddd; } 

.nav { 
    padding: 0px; 
    margin: 0px; 
    width: 70%; 
    float: right; 
    background: red; } 

.nav ul, .navmenu ul { 
    float: right; 
    padding: 0px; 
    margin: 0px; } 

.nav li, .navmenu { 
    display: inline-block; 
    padding: 0px; 
    margin: 0px; } 

.nav li:hover, .navmenu li:hover { 
    background-color: #dddddd; } 

.nav li a, .navmenu li a { 
    color: #333333; 
    line-height: 120px; 
    vertical-align: middle; 
    text-decoration: none !important; 
    font-family: "proxima-nova", sans-serif !important; } 

.navmenu { 
    display: none; 
    visibility: none; } 

h1 { 
    font-family: "proxima-nova", sans-serif !important; 
    -webkit-font-smoothing: antialiased; } 

div a, div ul li a, p, .btn { 
    font-family: "proxima-nova", sans-serif !important; 
    -webkit-font-smoothing: antialiased; } 

.box { 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -ms-border-radius: 10px; 
    border-radius: 10px; }

JAVASCRIPT:

<!-- JAVASCRIPT --> 
<script type="text/javascript"> 
/* $('.brand').hide(); */ 
$('.menu').click(function(){ 
    $('.nav').toggle(); 
}); 
</script> 
<!-- /JAVASCRIPT -->

HTML:

<!doctype html> 
<html lang="en"> 
<head> 

<!-- INFO --> 
<title># | Web Test</title> 

<link rel="icon" href="images/icons/favicon.ico" type="image/png"/> 

<meta name="description" content="Web Test for Sputnik"> 
<!-- /INFO --> 


<meta charset="utf-8"> 

<!-- STYLE --> 
<link rel="stylesheet" href="css/style.css"> 
<!-- /STYLE --> 

<!-- STYLE ON PAGE --> 

<style> 


</style> 

<!--/ STYLE op --> 

<!-- JQuery --><script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- /JQuery --> 

<!-- JAVASCRIPT --> 
<script type="text/javascript"> 
/* $('.brand').hide(); */ 
$('.menu').click(function(){ 
    $('.nav').toggle(); 
}); 
</script> 
<!-- /JAVASCRIPT --> 



</head> 

<body> 

<div class="header"> 

<!-- NAVIGATION --> 
<div class="brand"> 

    <img src="images/img.png" height="34" width="190"> 

</div> 
<div class="navmenu"> 
<ul> 
    <li><a href="#" class="menu">&nbsp;MENU&nbsp;</a></li> 
</ul> 
</div> 
<div class="nav"> 
<ul> 
    <li><a href="#">&nbsp;About Us&nbsp;</a></li> 
    <li><a href="#">&nbsp;Our Work&nbsp;</a></li> 
    <li><a href="#">&nbsp;News&nbsp;</a></li> 
    <li><a href="#">&nbsp;Career&nbsp;</a></li> 
    <li><a href="#">&nbsp;Contact Us&nbsp;&nbsp;</a></li> 
</ul> 
</div> 


</div> <!-- /Header --> 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<!-- Latest compiled and minified JavaScript --> 

</body> 
</html>

Большое спасибо любые помощники! Джейсон.

источник

2016-11-07 doopsdesigns

Дождитесь документа, чтобы быть готовым. –

Ошибки CSS Я бы предположил, просмотрите весь файл CSS, слово за словом, и вы его найдете. – Tinsten

Удалить важное свойство здесь:

@media screen and (max-width: 720px) 
.nav { 
    display: none !important; 
    /*...*/ 
}

источник

2016-11-07 20:46:40 tugce

Я делаю это изменение, но теперь он начинается с показа .nav перед тем, как пользователь нажимает, чтобы открыть навигацию. как я могу начать с него, чтобы он отображался: ни один из них не меньше 720 без этого! важно? Спасибо, @Spykee – doopsdesigns

Я нашел его, в почти нижней части страницы. 17 строк снизу. Там вы делаете .navmenu как visibility:none; (недопустимое значение, правильное значение hidden) и display: none. Также удалите !important:

.nav { 
    display: none !important; 
}

. Надеюсь, это даст вам результат, который вы хотите.

источник

2016-11-07 20:47:15 Tinsten

РЕШЕННЫЙ!

Я обернул ul меню в другом теге и ввел его в соответствие.

Не стесняйтесь, чтобы попасть на мой новый код для простого отзывчивого меню, я уверен, что есть лучший способ, но он послужил для меня своей целью.

https://jsfiddle.net/ut1d28c4/3/

HTML:

<!doctype html> 
<html lang="en"> 
<head> 

<!-- INFO --> 
<title># | Web Test</title> 

<link rel="icon" href="images/icons/favicon.ico" type="image/png"/> 

<meta name="description" content="Web Test for Sputnik"> 
<!-- /INFO --> 


<meta charset="utf-8"> 

<!-- STYLE --> 
<link rel="stylesheet" href="css/style.css"> 
<!-- /STYLE --> 

<!-- STYLE ON PAGE --> 

<style> 


</style> 

<!--/ STYLE op --> 

<!-- JQuery --><script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- /JQuery --> 

<!-- JAVASCRIPT --> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.menu').click(function(){ 
    $('nav').slideToggle(); 
});}) 
</script> 
<!-- /JAVASCRIPT --> 



</head> 

<body> 

<div class="header"> 

<!-- NAVIGATION --> 
<div class="brand"> 

    <img src="images/Sputnik.png" height="34" width="190"> 

</div> 
<div class="navmenu"> 
<ul> 
    <li><a href="#" class="menu">&nbsp;MENU&nbsp;</a></li> 
</ul> 
</div> 
<div class="nav"> 
<nav> 
<ul> 
    <li><a href="#">&nbsp;About Us&nbsp;</a></li> 
    <li><a href="#">&nbsp;Our Work&nbsp;</a></li> 
    <li><a href="#">&nbsp;News&nbsp;</a></li> 
    <li><a href="#">&nbsp;Career&nbsp;</a></li> 
    <li><a href="#">&nbsp;Contact Us&nbsp;&nbsp;</a></li> 
</ul> 
</nav> 
</div> 


</div> <!-- /Header --> 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<!-- Latest compiled and minified JavaScript --> 

</body> 
</html>

CSS:

@media screen and (max-width: 1024px) { 
    body { 
    background-color: black; } 

    .header { 
    width: 90% !important; } 

    .brand { 
    width: 30% !important; } 

    .brand img { 
    display: block !important; 
    margin: auto !important; 
    max-width: 190px !important; 
    width: auto !important; 
    height: auto !important; } } 
/* Responsive -720 */ 
@media screen and (max-width: 720px) { 
    body { 
    background-color: pink; } 

    .header { 
    width: 100% !important; } 

    .brand img { 
    display: block !important; 
    margin: auto !important; 
    max-width: 190px !important; 
    width: auto !important; 
    height: auto !important; } 

    .brand { 
    width: 100% !important; 
    float: none !important; } 

    nav { 
    display: none; } 

    .nav { 
    display: block !important; 
    float: none !important; 
    width: 100% !important; } 

    .nav ul, .navmenu ul { 
    width: 100% !important; } 

    .nav li, .navmenu ul { 
    display: block !important; 
    padding: 5px 0 !important; 
    height: auto !important; 
    text-align: center; } 

    .nav li a, .navmenu ul a { 
    line-height: 34px !important; } 

    .navmenu { 
    display: block !important; 
    visibility: visible !important; } } 
/* END RESPONSIVE */ 
body { 
    padding: 0px; 
    margin: 0px; } 

.header { 
    width: 68%; 
    margin: auto; 
    background-color: aqua; } 

.brand img { 
    padding-top: 43px; 
    display: block; 
    margin: auto; } 

.brand { 
    width: 190px; 
    height: 120px; 
    float: left; } 

.brand:hover { 
    background-color: #dddddd; } 

.nav { 
    display: block; } 

.nav { 
    display: block; 
    padding: 0px; 
    margin: 0px; 
    width: 70%; 
    float: right; 
    background: red; } 

.nav ul, .navmenu ul { 
    float: right; 
    padding: 0px; 
    margin: 0px; } 

.nav li, .navmenu { 
    display: inline-block; 
    padding: 0px; 
    margin: 0px; } 

.nav li:hover, .navmenu li:hover { 
    background-color: #dddddd; } 

.nav li a, .navmenu li a { 
    color: #333333; 
    line-height: 120px; 
    vertical-align: middle; 
    text-decoration: none !important; 
    font-family: "proxima-nova", sans-serif !important; } 

.navmenu { 
    display: none; } 

h1 { 
    font-family: "proxima-nova", sans-serif !important; 
    -webkit-font-smoothing: antialiased; } 

div a, div ul li a, p, .btn { 
    font-family: "proxima-nova", sans-serif !important; 
    -webkit-font-smoothing: antialiased; }

Спасибо за помощь X

источник

2016-11-07 22:58:10 doopsdesigns

Javascript показать/скрыть функцию

ответ

Смежные вопросы