Hierarchische Navigation mit webEdition, Bootstrap und Smartmenues

Fragen zum Erstellen von Templates für webEdition.
Benutzeravatar
christobal
Senior Member
Beiträge: 313
Registriert: Do 4. Nov 2010, 13:03
Wohnort: Reith bei Seefeld, Tirol - Österreich
Kontaktdaten:

Hierarchische Navigation mit webEdition, Bootstrap und Smartmenues

Beitragvon christobal » Mo 5. Nov 2018, 14:00

Grüß Euch aus Tirol!

Ich hab wieder eine Nuss zu knacken. Und zwar will ich eine Multi-Level-Navigation realisieren. Dazu muss ich den webEdition Navigationscode an Bootstrap 4 bzw. für die Hierarchien, an Smartmenues anpassen. Ich komm mit den Levels und den Link- und Listenklassen nicht klar.

Ausschauen sollte es dann so:

Code: Alles auswählen

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
<div class="container">
<a class="navbar-brand" href="#">Website</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="nav navbar-nav mr-auto">

<li class="nav-item"><a class="nav-link" href="#">Link</a></li>

<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>

<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Link 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>

<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item 1</a></li>
<li><a class="dropdown-item" href="#">Menu item 2</a></li>
<li><a class="dropdown-item" href="#">Menu item 3</a></li>
<li><a class="dropdown-item" href="#">Menu item 4</a></li>
</ul>
</li>

</ul>
</li>
</ul>
</li>

</ul>
</div>
</div>
</nav>
Hat vielleicht einer von Euch draußen das einmal realisiert? Wenn ja, darf ich um Codeschnippsel bitten?

Christoph
BIG Detail, Kaspar & Sigl OG
Riedgasse 8b
A-6020 Innsbruck
Tel. +43 512 346070-40
Fax +43 512 346070-20
Mobil: +43 676 3438011

christoph.kaspar@bigdetail.com
http://www.bigdetail.com

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: Hierarchische Navigation mit webEdition, Bootstrap und Smartmenues

Beitragvon WBTMagnum » Mo 5. Nov 2018, 21:33

Hallo Christobal,

Schau mal hier: Mein Tipp: Fang mit einer einfachen Ausgabe der Strutur an. Den für deine Bootstrap4 Implementierung benötigten Code kannst du dann noch immer drum rum bauen.

HTH,
Sascha

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: Hierarchische Navigation mit webEdition, Bootstrap und Smartmenues

Beitragvon WBTMagnum » Mo 5. Nov 2018, 23:15

Hallo Christobal,

Aus gegebenem Anlass, habe ich jetzt die Dokumentation um ein paar einfache Codebeispiele für die Navigation erweitert:
http://documentation.webedition.org/wik ... tion/start

Vielleicht hilft dir das ja weiter.

Liebe Grüße,
Sascha

Benutzeravatar
christobal
Senior Member
Beiträge: 313
Registriert: Do 4. Nov 2010, 13:03
Wohnort: Reith bei Seefeld, Tirol - Österreich
Kontaktdaten:

Re: Hierarchische Navigation mit webEdition, Bootstrap und Smartmenues

Beitragvon christobal » Di 6. Nov 2018, 13:00

Grüß Dich Sascha und vielen Dank für Deine Hilfe!

Die Anregung war sehr hilfreich! Trotzdem musste ichs anders denken, weil in der Kombo Bootstrap und Smartmenues die Listen in den verschiedenen Ebenen anders per CSS formatiert werden.

So funktionierts jetzt für mich:

Code: Alles auswählen

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">

<a class="navbar-brand" href="#">Website</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNavDropdown">

<we:navigation navigationname="hauptnavi" parentid="2" />

<we:navigationEntry type="folder" navigationname="hauptnavi" level="1">
<we:ifHasEntries>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="<we:navigationField name="href" />" id="navbarDropdown" role="button" data-toggle="dropdown"><we:navigationField name="name" /></a>
<ul class="dropdown-menu"><we:navigationEntries /></ul>
</li>
</we:ifHasEntries>
</we:navigationEntry>

<we:navigationEntry type="folder" navigationname="hauptnavi" level="2">
<we:ifHasEntries>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="<we:navigationField name="href" />" id="navbarDropdown" role="button" data-toggle="dropdown"><we:navigationField name="name" /></a>
<ul class="dropdown-menu"><we:navigationEntries /></ul>
</li>
</we:ifHasEntries>
</we:navigationEntry>

<we:navigationEntry type="folder" navigationname="hauptnavi" level="3">
<we:ifHasEntries>
<li>
<a class="dropdown-item" href="<we:navigationField name="href" />" id="navbarDropdown" role="button" data-toggle="dropdown"><we:navigationField name="name" /></a>
<ul class="dropdown-menu"><we:navigationEntries /></ul>
</li>
</we:ifHasEntries>
</we:navigationEntry>

<we:navigationEntry type="item" navigationname="hauptnavi"><li class="nav-item"><a class="nav-link" href="<we:navigationField name="href" />"><we:navigationField name="name" /></a></li></we:navigationEntry>
<we:navigationEntry type="item" level="2" navigationname="hauptnavi"><li><a class="dropdown-item" href="<we:navigationField name="href" />"><we:navigationField name="text" /></a></li></we:navigationEntry>
<we:navigationEntry type="item" level="3" navigationname="hauptnavi"><li><a class="dropdown-item" href="<we:navigationField name="href" />"><we:navigationField name="text" /></a></li></we:navigationEntry>

<ul class="nav navbar-nav mr-auto"><we:navigationWrite navigationname="hauptnavi" /></ul>

</div>
</div>
</nav>
BIG Detail, Kaspar & Sigl OG
Riedgasse 8b
A-6020 Innsbruck
Tel. +43 512 346070-40
Fax +43 512 346070-20
Mobil: +43 676 3438011

christoph.kaspar@bigdetail.com
http://www.bigdetail.com


Zurück zu „webEdition Templates erstellen (we:Tags)“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 16 Gäste