zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Responsive Menue- Anfänger Drama!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.03.2016, 00:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2016
Beiträge: 2
Upior befindet sich auf einem aufstrebenden Ast
Standard Responsive Menue- Anfänger Drama!

Hallo,

dies ist mein erster Beitrag in diesem Forum! Ich stehe gerade vor einem (für profis eher lächerlichen) für mich einem ziemlich großem Problem. Seit kurzem beschäftige ich mich mit webentwicklung und versuche ein responsives Menü zu schreiben, jedoch scheitere ich an dem Script. Das Ding ist auch, dass ich nicht so ganz genau weiß, woran das Problem liegen könnte. Nun verbrachte ich heute schon ungefähr 8 Stunden daran und völlig verzweifelt komme ich bei euch an und hoffe auf hilfreiche Hinweise.

Hier ist mein body teil
HTML-Code:
<body>
	
	<section>
		<header>
			<!-- Responsive menue button --> 
			<section id="menubar">
				<ul>
					<li><a class="button" href="#menu"><img src="images/menu.png" /></a></li>
				</ul>	
			</section>
			<!-- Responsive menue button ENDE--> 
		</header>
	</section>
		
		<section id="main">
	
			<aside>
				<section>
					<img src="images/bg.jpg" />
					<!-- Kommentar: Navigationsleiste --> 
					<nav class="nav">
						<ul>
							<li><a href="index.html" class="active">Home</a></li>
							<li><a href="index.html">Ving TSUN</a></li>
							<li><a href="index.html">Ueber mich</a></li>
							<li><a href="index.html">Training</a></li>
							<li><a href="index.html">Kontakt</a></li>
							<li><a href="index.html">Impressum</a></li>
						</ul>
					</nav>
					<!-- Kommentar: Navigationsleiste ENDE--> 
				</section>
			</aside>
	
		<article>
			<h1>TEMP TEXT</h1>
			<h2>Hier kommt der jslider</h2>
		</article>
	
	</section>
	
	<footer>
		<p></p>
	</footer>
	
</body>
CSS Datei:
HTML-Code:
/*MOBILE STYLE*/
@media screen and (max-width:800px){
	body{
		font-size: 90%;
	}
}

@media screen and (max-width:600px){
	#main aside, #main article {
		width: 100%;
		display:block;
		margin: 0.625em 0em 0.625em 0em;
	}
}
@media screen and (min-width:550px){
	nav.nav{
		display:block !important;
	}
}
@media screen and (max-width:550px){
	body{
		font-size: 86%;
	}
	#menubar ul li a.button{
		display: block;
	}
	nav {
		display: none;
		height: auto;
	}
	nav ul li{
		display: block;
		margin: 0.3em 0em 0.3em 0em;
	}
}
/*MOBILE STYLE END*/
Und mein JavaScript Code
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script>
		$('menubar.button').click(function () {
			$('main.nav.nav').toggle();
		})
	</script>
Ich wäre äußerst Dankbar, wenn jemand mir sagen könnte, wo der zweite Fehler liegt, der erste ist wohl 40cm von dem Bildschirm entfernt.

Vielen Dank im Voraus

Mit freundlichen Grüßen

Kamil
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.03.2016, 00:11
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Es gibt kein "<main class="nav nav">" in deinem quellcode? Wie willst du das denn dann mit JS Tooglen?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.03.2016, 09:00
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.949
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Upior Beitrag anzeigen
Ich wäre äußerst Dankbar, wenn jemand mir sagen könnte, wo der zweite Fehler liegt, der erste ist wohl 40cm von dem Bildschirm entfernt.
Eine Fehlerbeschreibung wäre hilfreich gewesen.

Es ist aber auch seltsam, dass du im CSS Code das Element richtig selektierst, im JS Code dann aber daran scheiterst.
Mit Zitat antworten
  #4 (permalink)  
Alt 24.03.2016, 09:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.075
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Bevor du dich an so etwas komplexes wie ein responsive Menü wagst solltest du dir die Grundlagen aneignen und wissen, wie man Elemente mit CSS überhaupt selektiert. Also: Was heißt .nav und was nav, was ist der Unterschied, was ist der Unterschied zwischen main nav, main.nav und main .nav etc.... Erst, wenn du dies beherrscht, dann solltest du dich an komplexere Aufgaben machen.
Auch hilft es, in die Webdeveloper-Tools zu benutzen. Dort kannst du JS-Befehle eingeben und diese werden dann sofort umgesetzt, bzw. du kannst einfach deine Selektoren eingeben ( zB $(".nav") ) und siehst, welche Elemente überhaupt selektiert werden. Damit kannst du also überprüfen ob überhaupt die korrekten Elemente angesprochen werden.
Mit Zitat antworten
  #5 (permalink)  
Alt 24.03.2016, 13:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2016
Beiträge: 2
Upior befindet sich auf einem aufstrebenden Ast
Standard

@protonenbeschleuniger Oh, du hast natürlich Recht, das wichtigste habe ich vergessen... Man sollte keine Beiträge spät am Abend schreiben ^^

Nun ja, mein Problem ist, dass ich nicht so ganz genau weiß, wie ich den Button ansprechen sollte. Wie ich feststellen konnte, anhand euren Beiträgen, tue ich es im Moment gar nicht.

Mit JS befasse ich mich seit sehr kurzem und muss noch langsam die Logik dafür entwickeln, manchmal kommt man in dem ganzen noch durcheinander

@Cloned ja, du hast natürlich Recht, bei mir mangelt es noch da und hier am Wissen, aber danke für die Tipps. Ich werde mich damit demnächst auseinander setzen.

@Thielo Danke! Das habe ich komplett übersehen. Also, wenn ich das richtig verstanden habe... Um den Button anzusprechen, müsste ich die class nav ansprechen, das wie folgt aussehen würde:

Code:
<script>
    $('menubar.button').click(function () {
	  $('nav.nav').toggle();
    })
</script>
Wäre ich damit stück weiter gekommen?

Vielen Dank für eure Hilfe und euren Zeit!

Geändert von Upior (24.03.2016 um 13:06 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 24.03.2016, 13:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.075
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von Upior Beitrag anzeigen
Wäre ich damit stück weiter gekommen?
Probiere es aus, dann wirst du es sehen?
Mit Zitat antworten
Antwort

Stichwörter
jquery, responsive menu

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
Fullscreen Landingpage mit Inhalt darunter (Anfänger) dafigero CSS 1 14.06.2014 16:48
Kachelmuster via html - Responsive Design freundlich SamuelS (X)HTML 10 31.01.2014 09:00
Kundeninteresse an Responsive Layout heiko_rs Offtopic 18 24.05.2013 14:37
Suche Responsive CSS Imageslideshow Madmaxx89 CSS 3 29.01.2013 14:14
Anfänger erbittet ein paar Tips. Dr.Crow (X)HTML 5 20.06.2006 12:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:08 Uhr.