zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Responsive Menu öffnet nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.07.2015, 10:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2010
Beiträge: 19
leverkusenerjung befindet sich auf einem aufstrebenden Ast
Standard 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');
		
	});
	
	
});
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.07.2015, 10:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.07.2015, 22:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2010
Beiträge: 19
leverkusenerjung befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Antwort, cloned.

Werde da mal in mich gehen und schauen, ob sie mir weiterhilft.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:07 Uhr.