|
|||
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> 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*/ 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> Vielen Dank im Voraus Mit freundlichen Grüßen Kamil |
Sponsored Links |
|
||||
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? |
Sponsored Links |
|
|||
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. |
|
|||
@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> Vielen Dank für eure Hilfe und euren Zeit! Geändert von Upior (24.03.2016 um 13:06 Uhr) |
Stichwörter |
jquery, responsive menu |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |