JavaScript jQuery Menu Widget für ein solches Menu? (Beispiel im Thread)

zlep

Banned
Registriert
Feb. 2016
Beiträge
126
Hallo,

da ich gerade überhaupt keinen Ansatz finde, bräuchte ich mal eine Info von den Javascript / jQuery Experten unter euch:

Ist es grundsätzlich möglich, mit dem jQuery Menu Widget ein solches Menu zu bauen: Beispiel (das Dropdown Menu ("Departments" als auch das Hover-Menu "Categories", "Products", usw.).

Ich frage deshalb so explizit, weil dieses Widget in Magento 2 standardmäßig integriert ist. Den Vorteil sehe ich darin, dass ich dann kein anderes Javascript usw. laden müsste, wovon Magento 2 ja sowieso schon überfrachtet ist. Die Frage ist eben nur, ob es überhaupt möglich ist, ein solches Menu damit zu bauen.

Falls ja, wäre ich über einen ersten Ansatz (Beispiel / Tutorial) auch super glücklich 😀
Vielen Dank bereits im Voraus.
 
Ja, es ist möglich.
Aber Du musst JQuery lernen, wenn Du das Menü selber bauen willst.
Im Prinzip brauchst Du nur ein Ankerelement, einen Div oder eine Liste und etwas CSS.
Die Klicklogik oder den MouseOver-Effekt machst Du mit JQuery.

Einfach ein Tutorial suchen. Stichwort "menu jquery"

https://jqueryui.com/menu/

https://jqueryui.com/selectmenu/

https://www.tutorialspoint.com/jqueryui/jqueryui_menu.htm


Ich frage mich aber, warum Du nicht Dein vorhandenes Magento Menü benutzt?
Was willst Du erreichen?
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: zlep
Das ist sogar komplett ohne JS möglich, rein mit CSS. Beispielsweise ist das hier implementiert: https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable

Du brauchst einfach etwas in dieser richtung:
HTML:
<container>
  <button></button>
  <menu></menu>
</container>

CSS:
container > menu {
    display: none;
}

container:hover > menu {
    display: box;
}
 
  • Gefällt mir
Reaktionen: kim88 und zlep
Super, danke. Auf der Seite gibt es ja ein Beispiel für den Hover-Effekt:

Code:
<script>
$( "#menu" ).menu();
</script>

#menu ist der Anker und .menu() ist die Methode (für den Hover-Effekt), nehme ich an? Welche Methode wäre für den Dropdown-Effekt verantwortlich?

Deine Tutorials schaue ich mir morgen genauer an, danke dafür.

Das Standard-Magento Menu sieht so aus: http://demoshops.splendid-internet.de/magento/demoshop-magento2-daily/

Wenn man nun sehr viele Top-Level-Kategorien hat, passt das nicht horizontal. Daher möchte ich ein Dropdown-Manu wie in dem Beispiel oben bauen. Erst mal muss ich wohl das jQuery hinkriegen und danach erst mal schauen, ob das mit den Bordmitteln von Magento möglich ist :/

@Bagbag Danke, auch nicht schlecht. Ist schon eine Weile her, dass ich mich mit CSS Dropdowns beschäftigt habe. Damals war das noch etwas "sehr simpel". Aber dein Beispiel sieht relativ vollwertig aus.
 
Zurück
Oben