Pyramid – Menüstruktur

Umbau

  • weil die Menü-Einträge nicht nebeneinander, sondern untereinander angeordnet werden sollen, ersetzen wir das li-Element mit dem p-Element

  • das ul-Element wird entfernt

  • die Icons vor dem Link werden auch nicht mehr benötigt

Das umgebaute Menü sieht dann wie folgt aus:

<div class="links">
    <p><a href="/blog">Mein Blog</a></p>
    <p><a href="/empfehlungen">Empfehlungen</a></p>
    <p><a href="/qualli">Quallifikationen</a></p>
</div>

Eingebunden in die Datei layout-neu.jinja2 sieht es dann wie folgt aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
          <div class="w3-container">
	    <div class="links">
	      <p><a href="/blog">Mein Blog</a></p>
	      <p><a href="/empfehlungen">Empfehlungen</a></p>
	      <p><a href="/qualli">Quallifikationen</a></p>
	    </div>
	    <!--div class="bg-gold">
		<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Designer</p>
                <p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>London, UK</p>
                <p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>ex@mail.com</p>
                <p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>1224435534</p>

Unter dem Bild sind die drei Menüpunkte zu finden:

../../_images/result2.png