Warum funktioniert mein Dropdown-Menü in der Navigationsleiste nicht? ⇐ CSS

[Anonymous]

Ich versuche, ein responsives Top-Navigationsmenü zu entwickeln, und habe ein paar Probleme mit dem Hamburger-Menü. Wenn ich die Größe meines Browsers ändere und auf das Hamburger-Symbol klicke, passiert nichts. Ich habe die JQuery in meinem HTML-Code, aber ich kann das Menü aus irgendeinem Grund nicht herunterfahren, wenn die Größe des Browsers geändert wird. Für jede Hilfe wäre ich dankbar.
Hier ist mein Code:

Code: Select all

$('.nav-toggle').click(function() {
if ($('.top-nav-links').css('margin-top') == '-225px') {
$('.top-nav-links').css('margin-top', '0');
} else {
$('.top-nav-links').css('margin-top', '-255px');
}
});

$(window).resize(function() {
if ($(window).width() > 730) {
$('.top-nav-links').css('margin-top', '0');
} else {
$('.top-nav-links').css('margin-top', '-255px');
}
});

$(document).ready(function() {
if ($(window).width() > 730) {
$('.top-nav-links').css('margin-top', '0');
} else {
$('.top-nav-links').css('margin-top', '-255px');
}
});

Code: Select all

body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
color: #333;
background-color: #f8f8f8;
}

.clearfix:after {
content: "";
display: table;
clear: both;
}

/* TOP NAVIGATION CSS */

.top-nav {
position: relative;
width: 100%;
height: auto;
background-color: #fff;
padding: 0 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

.logo:link {
color: red;
text-decoration: none;
font-size: 26pt;
margin: 10.5px 0;
display: inline-block;
float: left;
font-weight: bold;
}

.logo:visited {
color: red;
text-decoration: none;
}

.top-nav-links {
display: inline-block;
margin: 0;
float: right;
}

.top-nav-links li {
display: inline-block;
margin: 0 10px;
padding: 15px 0;
}

.top-nav-links li:first-of-type {
margin-left: 0;
}

.top-nav-links li:last-of-type {
margin-right: 0;
}

.top-nav-links li a:link {
color: red;
text-decoration: none;
font-size: 18px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

.top-nav-links li a:visited {
color: red;
text-decoration: none;
font-size: 18px;
}

.top-nav-links li a:hover {
color: red;
}

.nav-toggle {
float: right;
font-size: 30px;
margin: 8.2px 0;
color: red;
cursor: pointer;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
display: none;
}

.nav-toggle:hover {
color: red;
}

@media all and (max-width: 730px) {
.top-nav-links {
position: relative;
display: block;
width: 100%;
height: auto;
margin: 0 auto;
margin-top: -255px;
display: none;
}
.top-nav-links li {
display: block;
margin: 0;
text-align: center;
}
.nav-toggle {
display: inline-block;
}
}

Code: Select all

TopNav


[*]











[url=index.html]TopNav[/url]

[i][/i]

[list]

[url=#]Home[/url]

[*]
[url=#]Shop[/url]

[*]
[url=#]About Us[/url]

[*]
[url=#]Contact Us[/url]

[/list]