✔ Navigation mit horizontalem Submenu

[DexXxtrin]

Hallo zusammen

Ich arbeite an einer Homepage und würde da gerne bei der (horizontalen) Navigation ein Untermenu bei hover, welches ebenfalls horizontal dargestellt wird.
Damit alle wissen was ich meine:
http://www.bootply.com/Axbt2Y0LIQ
Einfach sollten die "sub x" nicht erst bei einem Klick angezeigt werden, sondern bereits beim Hovern.
Ist das möglich ohne JavaScript, sondern rein mit HTML5 und CSS3?

Gruss DexXxtrin

 

[MrMurphy]

Hallo

zunächst sollte geklärt werden wie sinnvoll dein Wunsch überhaupt ist.

Offensichtlich handelt es sich um ein Bootstrap-Layout. Die haben sich natürlich Gedanken gemacht warum sie auf das Hovern verzichten.

Nämlich weil Touchscreen-Geräte den hover-Effekt nicht können. Bevor du auf den eigentlich bereits veralteten hover-Effekt zurückgreifen willst solltest du klären, wie die Navigation (in diesem Fall das Einblenden der Texte) ohne hover-Effekt funktionieren soll?

Wenn Texte ausgetauscht werden ragen die endgültigen, in der Regel längeren Texte, zudem über den unteren Bildschirmrand hinaus. Wie soll der nicht sichtbare Teil erreicht werden, wenn er verschwindet sobald der Mauszeiger den hover-Bereich verläßt?

Ja, was du willst ist möglich, erscheint mir aber nicht sinnvoll.

Gruss

MrMurphy

 

[DexXxtrin]

Hallo MrMurphy

Die Navigation für die Unterseite soll zusätzlich noch dauerhaft angezeigt werden, wenn in die entsprechende Seite angezeigt wird.
Wenn ich also über "One" hovere, werden die Unterseiten "One 1", "One 2", usw. angezeigt. Das gleiche ergebnis wird erzielt, idem auf "One" geklickt wird, mit dem Unterschied, dass zusätzlich noch der Inhalt von "One" dargestellt wird.

Hoffe ist verständlich wie ich das meine.

Die Seite muss nicht zwingend für Mobile oder Touch optimiert sein und die länge der Texten wird begrenzt, so dass nicht über den Rand hinausschaut.

 

[MrMurphy]

Hallo

auf "One" geklickt

Also nicht nur hovern, was ich zunächst verstanden habe.

Das wird schwierig.

hover-Effekte waren jahrelang auf Webseiten üblich und lassen sich meist recht einfach realisieren.

Anklicken ist nur mit HTML und CSS eigentlich nicht vorgesehen.

Als (Not)Lösung wurde der sogenannte Checkbox-Hack erdacht. Der funktioniert sehr stabil und kann problemlos verwendet werden.

Allerdings benötigt der eine fest vorgegebene HTML-Konstruktion, die mit Listen nicht funktioniert (ich habe jedenfalls noch kein Beispiel des Checkbox-Hacks mit Listen gesehen). Bei dir kommt zusätzlich hinzu, dass die Lösung weder von Bootstrap gestört werden darf noch ihrerseits die Funktionen von Bootstrap beinträchten darf.

Das heißt, das gesamte Konstrukt müsste ohne HTML-Liste erstellt und dann abgekapselt in Bootstrap eingefügt werden. Das erfordert einiges an Aufwand, ist aber grundsätzlich möglich.

Infos zum Checkbox-Hack findest du zum Beispiel unter

http://www.olivergast.de/blog/2013/04/16/css3-der-checkbox-hack/

oder mit der Suchmaschine deiner Wahl. Du hast jetzt ja einen Begriff nach dem du suchen kannst.

Gruss

MrMurphy

 

[SpiceLab]

Einfach sollten die "sub x" nicht erst bei einem Klick angezeigt werden, sondern bereits beim Hovern.
Ist das möglich ohne JavaScript, sondern rein mit HTML5 und CSS3?

Grundsätzlich ja, und nennt sich Dropline-Menu: http://www.cssplay.co.uk/menus/#m10

Gab's aber schon lange vor HTML5 + CSS3

Im Falle des Bootstrap-Menüs funktioniert das ohne JS aber nicht, da hier das Plugin collapse.js (siehe englische Fassung | deutsche Fassung) für die Funktionalität sorgt.

Um den .click()-Event erfolgreich durch .hover(), oder .mouseenter()/.mouseleave(), oder .mouseover()/.mouseout() zu ersetzen, wird er per .trigger('click') angestoßen: http://api.jquery.com/trigger/

Aus

$('[data-toggle=collapse]').click(function (e) {
  $('[data-toggle=collapse]').parent('li').removeClass('active');
  $(this).parent('li').toggleClass('active');
});

wird

$('.navbar .dropdown').on('mouseover', function(e){
  $('[data-toggle=collapse]', this).trigger('click');
  $('[data-toggle=collapse]', this).parent('li').addClass('active');
}).on('mouseout', function(e){
  $('[data-toggle=collapse]', this).trigger('click').blur();
  $('[data-toggle=collapse]', this).parent('li').removeClass('active');
});

Fiddle-Demo: https://jsfiddle.net/spicelab/v62pyx1e/

[edit]Tipp-Ex[/edit]​

 

[DexXxtrin]

Irgendwie hat es wohl etwas ein Missverständnis gegeben, dass ich den Link gepostet habe.
Ich will nichts mit Bootstrap/JavaScript oder sonst was, nur rein CSS und HTML, machen. Der Link was nur als optisches Beispiel gedacht.

Naja egal. Ich hab nun die Lösung umgesetzt, wo das Submenu erst angezeigt wird, wenn eine Seite geöffnet wird, also ganz auf Hover verzichtet.

Trotzdem Danke für eure Hilfe.
Gruss DexXxtrin

 

[SpiceLab]

Irgendwie hat es wohl etwas ein Missverständnis gegeben, dass ich den Link gepostet habe.
Ich will nichts mit Bootstrap/JavaScript oder sonst was, nur rein CSS und HTML, machen. Der Link was nur als optisches Beispiel gedacht.

Darauf hättest Du direkt im ersten Beitrag hinweisen sollen, um solchen Missverständnissen keinen Raum zu geben

Aber doch spätestens, als MrMurphy in seiner ersten Antwort die Bootstrap-Philosophie ins Feld schickte.

Aber für den Fall, dass Du von diesem vermeintlich auserkorenen Menü wieder Abstand nehmen willst, hatte ich meinen Beitrag mit der Antwort auf Deine Frage eröffnet, ob das auch ohne JavaScript möglich ist:

Grundsätzlich ja, und nennt sich Dropline-Menu: http://www.cssplay.co.uk/menus/#m10

Bist Du dem Link nicht gefolgt, um Stus Demos zu inspizieren?

[edit]Tipp-Ex[/edit]​

 

[DexXxtrin]

Ich schrieb ja in meinem ersten Beitrag: "rein mit HTML5 und CSS3"

Doch deinem Link bin ich gefolgt und es sieht auch aus, als ob es das ist, was ich ursprünglich gesucht habe.
Habe mich jedoch trotzdem jetzt für die andere Lösung entschieden

 

[SpiceLab]

Ich schrieb ja in meinem ersten Beitrag: "rein mit HTML5 und CSS3"

Schon klar, d'rum antwortete ich darauf ja auch mit

Grundsätzlich ja, und nennt sich Dropline-Menu: http://www.cssplay.co.uk/menus/#m10

Gab's aber schon lange vor HTML5 + CSS3

Im Falle des Bootstrap-Menüs funktioniert das ohne JS aber nicht, da hier das Plugin collapse.js (siehe englische Fassung | deutsche Fassung) für die Funktionalität sorgt.

MrMurphy's ersten Worten in Post #2 bzgl. Bootstrap-Layout u. -Philosophie VS :hover hattest Du in Post #3 nämlich nicht entgegnet, dass Du mit dem CSS-Framework Bootstrap überhaupt nichts zu schaffen hast, sondern eben blos ein optisches/visuelles Beispiel darstellt, damit wir eine konkrete Vorstellung davon bekommen, wie Du Dir das Menülayout vorstellst.

Die Gelegenheit war schon da, das aufgekommene Missverständnis aufzuklären

So wäre ich auch nie und nimmer auf die Idee gekommen, das Thema vom CSS-Forum hierher (JS) zu verschieben, und meinen Post mit den bekannten Worten zu eröffnen, weil ich Dir im Endeffekt ja eine jQuery-Lösung incl. JSFiddle-Demo präsentieren will, die für dieses Bootstrap-Menü den click-Event durch hover ersetzt

Hast Du aber leider versäumt, und so gab's dem Ganzen halt seine Eigendynamik...

Doch deinem Link bin ich gefolgt und es sieht auch aus, als ob es das ist, was ich ursprünglich gesucht habe.
Habe mich jedoch trotzdem jetzt für die andere Lösung entschieden

Alles gut - meine (Link)Empfehlungen sind immer unverbindlich

[edit]Tipp-Ex[/edit]​