Frage von gedies, 98

Hat jemand Erfahrung mit folgendem Navigationsmenü: flexiblenavigation?

http://jasonweaver.name/lab/flexiblenavigation/

Ist es möglich, das ich als Fast-Laie die Navi einbauen kann? Wenn es beim Einbau Probleme gibt, kann mir von Euch jemand weiter helfen?

Noch ein paar Infos: Die Navigation auf meiner Webseite deinemein.de ist fürn Eimer. Mag sein, das Ihr es vlt mit ein paar Code-Veränderung für brauchbar halten würdet.

Seit Monat plage ich mich jetzt mit dem Teil herum und nun mag ich nicht mehr, und ich möchte eine fertige Navi, die ich farblich nur meiner Site anpassen muss. Allerdings habe ich doch bammel davor, sollte etwas schief laufen.

Kenntnisse in CSS sind vorhanden, jedoch bezeichne ich mein Wissensstand als den eines 4. Klässlers Die Site habe ich mit Dreamweaver erstellt.

Vielen Dank für die kommende Hilfe und Beistand

Gruß

Antwort
von threadi, 55

Auf deiner Webseite ist Google Analytics eingebaut - leider so wie es für deutsche Webseiten nicht gemacht werden darf: die IP-Anonymisierung fehlt. Das solltest Du dringend ändern bevor es eine Abmahnung hagelt.

Ich finde das Menü auf deiner Seite rein visuell völlig in Ordnung. Ich weiß nicht was Du genau daran ändern willst? Vlt. den Effekt des Aufklappens? Was erwartest Du hier von einer Antwort nun genau? Soll das jemand für dich programmieren?

Kommentar von gedies ,

Oh Danke!

Für das Desktop ist es ok, aber nicht für mobil.

Hast du es dir mal  mobil angeschaut?

Ich mag die Schritte gar nicht alle aufzählen die es braucht um an´s Ziel zu kommen. Weil das Menü jedesmal wieder zuklappt.

Sobald ein Menüpunkt ein Untermenü hat musst du 2x anklicken und auf die Seite selbst, mit diesen Untermenüs, kommt man garnicht.

Und ja, ich brauche hier definitiv Hilfe.

Kommentar von gedies ,

Die IP-Anonymisierung befindet sich doch auf jeder Seite. Hast Du eine Seite ohne Code gesehen?

Kommentar von threadi ,

Ich sehe keine IP-Anonymisierung im Google Analytics-Quellcode auf keiner Seite deiner Webseite.

Kommentar von gedies ,

Dieses Script, welches hier als IP Anonymisierung beschrieben wird hab ich auf jeder Seite.

https://support.google.com/analytics/answer/2763052?hl=de

Was meinst Du denn? Wie soll das aussehen?

Danke

Kommentar von threadi ,

Dort wird es nur beschrieben, wie man es tatsächlich macht ist dort verlinkt: https://developers.google.com/analytics/devguides/collection/analyticsjs/field-r... und das finde ich auf keiner deiner Seiten.

Kommentar von gedies ,

So, jetzt müsste alles ok sein.

Vielen Dank für die Aufmerksamkeit, das hätte böse enden können.

Gruß

Antwort
von perhp, 36

Wenn man ein responsives Menü macht, dann listet man alle Punkte untereinander auf und nicht, wie auf deiner Seite, alles verschachtelt bei der mobilen Variante. Richte dir eine Testseite ein, die nur du siehst, und dort kannst du dann dein Zeug testen, ohne dass es die normalen Benutzer sehen.

Kommentar von gedies ,

So war aber die Vorgabe des Skripts, um in die 3. Ebene zukommen. (siehe Codebeispiel)

Deswegen hatte ich es doch ausgewählt. Verändert habe ich nur die Farben. Ich kann auch keinen weiteren Menüpunkt einfügen, dann kommt es zu einem Umbruch. Die Breite kann ich nicht verändern, obwohl der Platz bis zum äußeren Rand vorhanden ist.

<div class="rmm style">
<ul>
<li>
<a href="Books.html">Books</a>
<ul>
<li>
<a href="Audiobooks.html">Audiobooks</a>
</li>
<li>
<a href="Cookbooks.html">Cookbooks</a>
</li>
<li>
<a href="Catalogs.html">Catalogs</a>
</li>
<li>
<a href="Other.html">Other</a>
<ul>
<li><a href="Other.html">Other 1</a></li>
<li><a href="Other.html">Other 2</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="Dvds.html">Dvds</a>
</li>
<li>
Kommentar von perhp ,

Du musst dich ja nicht 1 zu 1 an das Beispiel halten. Was meinst du mit "die Breite kann ich nicht verändern" ??? Laut meiner Ansicht ist das ganze in der responsiven Ansicht ja auf 100% des Bildschirms. Du hast relativ viele Menüpunkte (überhaupt mit diesen ganzen Farben), ich würde die von den Menüpunkten entfernen und erst wenn man auf die jeweilige Seite ist, verlinkst du einfach diese Farben im Body-Text.

Kommentar von gedies ,

Nach was soll ich mich dann richten, wenn ein solches Skript nicht dem entspricht was es vorgibt? Deswegen "doch " die Wahl.

Ja bei 768px nutzt es die gesamte Breite, aber weshalb nicht bei mehr Pixel wie für Desktops? Das sind Dinge die ich nicht verstehe und weiß nicht ob es eine Stellschraube gibt :-)

7 Menüpunkte sind meiner Ansicht nach nicht viel, aber egal... es waren mal 6 und trotzdem reagiert es in der mobilen Version nicht korrekt.

Sorry, aber mein eigentliches Problem ist die mobile Version die nicht funktioniert wie sie soll und nicht die Anzahl der Menüpunkte, oder wie viele Farben in der Tiefe sind.

Wie oft habe ich schon in anderen Foren dieses Problem erläutert und nie kommt eine befriedigende Antwort. Alle sind schlau und keiner kann/will mir helfen. Das macht mich mürbe, tut mir leid, aber ich wollt jetzt mal Luft ablassen. 

So, alles wieder gut.....

Ich bin jetzt fast 60J. und habe vor ein paar Jahren damit angefangen, ging auch alles prima bis das Wort "Responsiv" auftauchte. Habe ich für die Page auch hinbekommen, aber beim Menü versage ich einfach und bitte noch mal um Hilfe...

Danke!

Kommentar von perhp ,

Der Grund wieso deine Webseite nur um die 900px breit ist, liegt daran, dass auf der Klasse .gridContainer eine Breite vergeben wurde. Ändere diese auf width:1250px, dann hast du deine Seite größer.

Wenn die Seite richtig gemacht wurde, dann müsste die Seite vom Layout her noch immer richtig darstellen. Bis auf dem Header und Footer sollte man die Webseite nicht 100% aufspannen, da es bei der Darstellung eines Textes einfach nicht schön aussieht.

Responsiv ist eigentlich nichts anderes als die Darstellung auf mobilen Geräten. Vom CSS ändert sich dort eigentlich so gut wie nichts, bis auf die media queries.

zB:

Ab 1250 px soll einfach der CSS-Code ziehen, der sich innerhalb dieser Schleife befindet.

@media only screen and (max-width: 1250px){
....
}

Nun zu deinem Problem:

Ohne dein Menü umzuprogrammieren wird das Ganze nicht möglich sein, da zum Öffnen des Untermenüs ein Klick auf dem Container (wo sich eben auch das Hauptmenü befindet) notwendig ist. Du könntest höchstens den Bereich in zwei Teile aufteilen. Links wird sich dann das Hauptmenü öffnen und rechts das Untermenü. Einfacher wäre es allerdings einfach alle Unterpunkte in einer Liste anzuzeigen lassen, ohne dass man dort 3xmal klicken muss um dort hinzugelangen.

Kommentar von perhp ,

Hier ein Beispiel, wie ich das gemeint habe, beim Aufteilen des Menüs: http://cssmenumaker.com/menu/responsive-flat-menu#

Rechts ist ein eigener Container, wo man zum Submenü kommt.

Dort kannst du es auch anpassen und downloaden.

Kommentar von gedies ,

hab ich doch schon... weil nicht alle Menüpunkte in der Leiste Platz haben.

Aber das ändert doch nichts daran, dass das menü auf dem Handy nicht funktioniert.

Konntest Du dir das per Handy mal anschauen? Vllt verstehst Du dann was ich meine....es sei denn du wärst damit zufrieden.

Danke

Kommentar von perhp ,

Was willst du denn nun machen bei deinem Menü, kann dein Problem nicht wirklich nachvollziehen was genau du meinst?

Willst du alle Punkte bei responsiv untereinander haben, also ohne aufklappen? Wenn das der Fall ist, dann wirst du wohl oder übel das Menü neu machen müssen, da ich vermute, dass dort auch JavaScript im Spiel ist und dort kommt man zu einem Hauptmenü-Punkt erst beim zweiten Klick.

Genaueres kann ich dir nicht dabei sagen, da ich deinen Code nicht wirklich kenne und nicht wissen kann, was das Ganze nun genau beeinflusst.

Wenn das nicht der Fall sein sollte und du das Ganze beibehalten willst, wie bisher, dann musst du (so wie ich es verstanden habe, ist ja dein Problem, dass man die Hauptmenüpunkte nicht anklicken kann, wenn ein Untermenü davon existiert), den Container innerhalb teilen, so wie hier der Fall ist: http://cssmenumaker.com/menu/responsive-flat-menu#

Sieh dir davon die responsive Variante an, dort funktioniert das Menü.

Kommentar von gedies ,

Also wünschen würde ich mir, wenn ich das darf....

das, die Horizontale bleibt. In der mobilen Version man: den Toggled klickt, dann erscheinen alle Hauptpunkte untereinander. Wenn ich jetzt einen Hauptmenü anklicke, das zugehörige Untermenü sich darunter öffnet. Die restlichen Hauptmenüs verschieben sich nach unten. und das auch mit der 3. Ebene. Und zurück, ich den Untermenüpunkt klicke und sich das entsprechende Menü schließt usw bis nur noch die Hauptmenüpunkte bleiben, bzw zum Schluß das Toggled. So ist es bei deinem Beispiel auch, wenn wir das Gleiche meinen.

Kommentar von perhp ,

Sorry habe nicht gesehen, dass man das nur downloaden kann, wenn man zahlt.

Du kannst aber von dieser Seite die Struktur abschauen und auch das CSS (Drücke F12 und inspiziere den Quellcode). Machen wir einen Deal: du bereitest auf http://codepen.io/anon/pen/qNBwOj das Menü vor, also HTML und CSS und auch responsiv (so weit wie du halt kommst) und ich mache dir dann dort den Rest, wenn du nicht mehr weiterkommst.

Kommentar von gedies ,

Hallo,

soweit wäre ich zufrieden, wenn jetzt nicht wieder ein Problem aufgetaucht wäre.

Sobald ein Submenü in der mobile Variante ausgeklappt ist, ragt die gesamte Größer über den Display hinaus... nicht schlimm, jetzt will ich aber das Menü nach ober schieben und in dem Moment klappt es komplett zu, also nicht nur das Submenü.

http://codepen.io/gedies/pen/PzwLYG

In der .js Datei steht nur so ein bisschen Code: gedies

und hier liegt es auf dem Server:

www.deinemein.de/menumaker1/index.html

Ich würde mich sehr freuen, wenn Du Dir das mal anschaust.

vielen Danke

Kommentar von perhp ,

Hallo,

Dein Problem mit der Größe über den Display kann ich nicht nachvollziehen, da es bei mir korrekt die Breite des Displays ausfüllt. Dein anderes Problem mit dem Scrollen liegt sicherlich an das JS Plugin, das du verwendet hast.

Ich habe dir hier das Menü ohne das Plugin gemacht:

http://codepen.io/anon/pen/VjYNRd

Beim Responsiv habe ich die Menüpunkte einfach untereinander dargestellt, was glaube ich auch für den Benutzer besser ist, da er dann nicht lange suchen muss. Du kannst jetzt das ganze noch schöner stylen, da ich es nur schnell gemacht habe, aber es müsste nun funktionieren.

Kommentar von gedies ,

Hi,

ich meinte ja auch nicht die Breite, sondern die Länge des Menüs. Wenn ich doch schreibe beim Hochschieben klappt es zu....

Jetzt zu deiner Version: Habe ich nur doch,  html, style.css und skript.js  ? und wo sind die +/- Zeichen? die waren ein Grund weshalb ich mir das Script ausgesucht habe.


Kommentar von perhp ,

Die + und - Zeichen kannst du dir einfach als Symbol selbst dazustylen mit css, bei mobil würde ich die dann einfach ausblenden und die ganzen Punkte einfach untereinander darstellen. So wie ich es gerade gemacht habe, halt nur schöner stylen, dass man sieht, dass das eigene Unterpunkte sind.

Kommentar von gedies ,

Die Menüs kann ich aber nur kaufen?

Kommentar von gedies ,

Sorry, habe den oberen Teil nicht gelesen. Ich weiß das mein Layout nur 900px breit ist, habe ich ja selbst geschrieben. Wenn die Navi 100% aufweist, dann sind doch 900px die 100%, oder?

... weiter zum Menü:

Wenn ich aufs Tooglet klicke, wird es geöffnet, dann klicke ich z.B Farbgestaltung an dann schließt sich wieder das Menü und ich muss erneut klicken. Jetzt öffnet sich erst das Untermenü. Hätte ich jetzt den Punkt "Farbgestaltung nicht noch mal ins untermenü gesetzt könnte man auf diese Seite überhaupt nicht zugreifen.

Kommentar von perhp ,

100% Breite bedeutet nicht gleich 900px. 100% würde bedeuten, dass es immer die ganze Breite eines Bildschirms einnimmt.

Nun zu deinem Problem, das ist, so wie du es zur Zeit gemacht hast nicht möglich aufgrund deines Aufbaus. Wenn du das Ganze machst, so wie in dem Beispiel, das ich vorhin gepostet habe, dann funktioniert es. Du musst den Container, wo das hauptmenü ist, aufteilen.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten