|
|||
Responsive Menu öffnet nicht
Guten Tag zusammen,
habe nach einem Tutorial ein responsives Menu mit Javascript gebaut. Stylingtechnisch alles 1:1 wie im tutorial. Allerdings scheint das js irgendwie nicht zu funktionieren. Im <1024px viewport öffnet das Menu nicht. Lt. Dreamweaver liegt kein Syntaxfehler vor. Kann mir von Euch jemand sagen, wo der Fehler liegt? Danke schön im Voraus. Code:
@charset "utf-8"; /* CSS Document */ * { padding:0px; margin:0px; } .show { display:block; background:aqua; } .open { background:red !important; } h1 { float:left; color:#fff; line-height:140px; margin-left:40px; font-family:sans-serif; } ul { list-style:none; width:85%; height:140px; float:right; } li { display: inline; float:left; width:auto; height:140px; background:#666; margin-right:20px; } li a{ display:block; float:left; height:140px; line-height:140px; padding:0px 20px; color:#fff; font-family:sans-serif; } a { text-decoration:none; } header { float:left; width:100%; height:140px; background:#545050; } #i-nav { width:44px; height:44px; background:aqua; display:none; position: absolute; top:38px; right:20px; } @media (min-width: 1024px) { #i-nav {display:none;} } @media (max-width: 1024px) { h1 {width:100%; text-align:center; margin:0px;} ul {width:100%; display:none;} ul li {width:100%;} ul li a{width:100%; text-align:center; outline: solid #ccc 1px; padding:0;} ul li a:hover {background:aqua;} header {height:280px;} #i-nav {display:block;} } HTML-Code:
<!doctype html> <!--[if lt IE 7]> <html class="no js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no js lt-ie9" ><![endif]--> <!--[if gt IE 8]><!--> <html class="no js"><!--<![endif]--> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Unbenanntes Dokument</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>Logo</h1> <nav> <ul> <li><a href="#">Link Button</a></li> <li><a href="#">Link Button</a></li> <li><a href="#">Link Button</a></li> <li><a href="#">Link Button</a></li> <li><a href="#">Link Button</a></li> <li><a href="#">Link Button</a></li> </ul> </nav> <a id="i-nav" href="#"></a> </header> <script type="text/javascript" src="custom.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </body> </html> Code:
// JavaScript Document $(document).ready(function(){ $('#i-nav').click(function(){ $(this).toggleClass('open'); $('nav').toggleClass('show'); //alert('hello'); }); }); |
Sponsored Links |
|
|||
Die show-Klasse gibst du dem nav-Element, das wird, wenn du dir die Seite mit den Webdeveloper-Tools ansiehst, auch korrekt gewechselt und das nav-Element mit display:block versehen. in den Mediaqueries definierst du für ul (ein Unterelement von nav) ein display: none. Das heißt, das nav-Element ist zu sehen, aber jeglicher Inhalt nicht.
Du hast ein basis-css für <1024, aber das berücksichtigt in keinster Weise eine open oder show Klasse. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit PullDown Menu auf ipad/iphone | smisonline2 | CSS | 1 | 13.05.2013 18:13 |
Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 20:51 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |
Drop Down Menu Positionsproblem | Schky | CSS | 4 | 21.04.2008 14:09 |
Problem mit vertikaler Navigation | Krissie | CSS | 0 | 15.08.2007 13:51 |