Aktuelle Seite: Tutorials / Übersicht / Header mit Hintergrundbild Teil 2

Teil 2: Erstellung der Leiste mit Logo, Titel und Navigation

Die Elemente sollen horizontal zentriert angeordnet werden.

Der Toggle Button befindet sich auf der rechten Seite und schaltet ab 64em Breite um zur Navbar.

Am Ende des zweiten Teils gibt es noch Infos zur Einbindung eines Submenüs.

 

Ansichten vom fertigen Header

 

  

Voraussetzungen:

Der erste Teil des Tutorials wurde umgesetzt.

Die Infoleiste mit den Fontawesome Icons ist fertig gestellt.

Das Hintergrundbild ist noch nicht sichtbar weil das Modul Header-Content noch fehlt.

4
Das Modul für die Navigation erstellen

Vorher legen wir einige Beiträge an, damit wir die Navigation testen können.

Zum testen eignen sich die Lorem Ipsum Texte.

Hier geht es zum Lorem Ipsum Generator:

https://loremipsum.de/

Dann wird das Menü mit den Menüeinträgen und das Modul angelegt.

Erläuterungen:

Moduleinstellungen

Unter Reiter Modul:

Die Position header-navbar für das Bootstrap Template wählen.

 

Unter Reiter Erweitert:

Als Menüklassensuffix navbar-nav mit Leerzeichen vorweg angeben.

Das sorgt für die Horizontale Darstellung der Navbar.

 

5
HTML Code der index.php
<header class="navbar navbar-expand-lg navbar-light bg-faded">
    <div class="navbar-inner-left">
	<a class="navbar-brand" href="/<?php echo JURI::base(); ?>"><img src="/images/logo.png" class="img-responsive" alt="Ihr Logo">	
	</a>
    </div>
    <div class="navbar-inner-right">
	<p>Seitentitel</p>
    </div>
												
    <button class="navbar-toggler navbar-toggler-right custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
    </button>								
						
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
	<jdoc:include type="modules" name="header-navbar" style="none" />               
    </div>
</header>		
		

Erläuterungen:

navbar

Wird über Bootstrap als Flex-Container dargestellt.

 

navbar-expand-lg

Sorgt für die Spaltendarstellung ab 992px (Bootstrap Vorgabe)

 

navbar-inner-left

Beinhaltet das Logo

 

navbar-inner-right

Beinhaltet den Seitentitel

 

button Codeblock

Dient für das Toggle-Icon.

 

navbar-collapse

Richtet die Navbar-Items aus.

6
Der CSS Code für die Navbar, das Logo und den Titel
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.navbar {
    width: 100%;
    padding: 0.5rem !important;
}

.navbar-inner-right {
    margin-left: 0.6em;
}

.navbar-brand {
    margin-right: 0 !important;
}

.navbar-inner-right p { /* Titelformatierung */
    font-family: 'Ubuntu', sans-serif;
    font-weight: 200;
    color: #282205;
    letter-spacing: 0.2em;
    margin-bottom: 0 !important;
}

@media screen and (max-width:63.98em) { /* max 1024px */
    .navbar img {
	width: 40px;
	height: auto;
    }
	
    .navbar-inner-left { /* Logo */
	width: 45px !important;
    }

    .navbar-inner-right { /* Titel */
	flex: 1 10%;
    }	
}


@media screen and (min-width: 64em)  {	
    .navbar img {
	width: 50px;
	height: auto;
    }
	
    .navbar-inner-right p { /* Schriftformatierung Titel */
	font-size: 1.2em;
    }
}

Erläuterungen:

img-responsive

Dient zur responsiven Darstellung aller Bilder

 

navbar

Bekommt eine Breite von 100% und umlaufend 0.5rem Innenabstand.

Mit !important überschreiben wir die Einstellung der bootstrap-min.css.

Die anderen header Klassen werden von Bootstrap eingefügt.

 

navbar-inner-left

Bis 63.98em setzen wir die Breite der Box auf 45px und sorgen mit !important dafür das sich das nicht ändert.

 

navbar-brand

Da setzen wir den Außenabstand zum Titel auf 0

 

navbar img

Das Logo wird bis 63.98em auf 40px und ab 64em auf 50px Breite gesetzt.

 

navbar-inner-right

Die Klasse für den Seitentitel bekommt einen linken Außenabstand von 0.6em und über .navbar-inner-right p die Textformatierung.

Bis 63.98em bekommt sie als Flex-Item eine Breite von 10%.

 

7
Der CSS Code für den Toggler-Button und die Navigation
.navbar-toggler {
    background-color: #322e1a;
	font-size: 1.0rem;	
}

.custom-toggler .navbar-toggler {
    border-color: rgb(251,251,251);
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(251,251,251, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar ul {
    list-style: none;
    background-color: #6E6E6E;
}

.nav-link {	
color: rgba(255,255,255,.9) !important; } @media screen and (max-width:63.98em) { .navbar li { border-bottom: 1px solid #fff; padding-left: 0.5em; color: #fff; } } @media screen and (min-width: 64em) { .navbar-collapse { margin-left: 0.5em; } .navbar ul { background-color: transparent; } .navbar li { margin: 0 0.1em; background-color: transparent; } .active .nav-link { border-bottom: 1px solid #fe8b08; } .nav-link { border-bottom: 1px solid #2E2E2E; margin: 0; } }

Erläuterungen:

custom-toggler

Damit werden die Farb- und Rahmeneinstellungen vorgenommen.

 

navbar-toggler-icon

Dient u.a. für die Farbeinstellungen der Linien im Button.

 

navbarSupportedContent

Wird von Bootstrap vorgegeben

 

navbar-collapse

Der linke Abstand wird ab 64em verändert.

 

navbar ul

Wir entfernen die Auszeichnungspunkte und stellen die Hintergrundfarbe ein.

Ab 64 em soll dann die Hintergrundfarbe transparent sein.

 

navbar li

Wir stellen die Linien, Abstand und Farbe bis 63.98em ein.

Ab 64em wird der Hintergrund Transparent und über Margin die Abstände der Menüpunkte eingestellt.

 

nav-link

Den Menüpunkten werden die Hintergrundfarbe und die Linie zugeteilt.

 

active .nav-link

Der aktive Menüpunkt bekommt eine orangene Linie.

8
Override Navbar
.linker { /* Fontawesomeicon einblenden*/
    font-family: 'Open Sans', sans-serif; /* Google Webfont */
    padding-left: 0.5em;
    color: rgba(252,252,252,.9) !important;
}

 @media screen and (min-width: 64em)  {	
	 
    .linker { /* Fontawesomeicon einblenden*/
	color: rgba(48,48,48,.9) !important;
    }
} 
		

Erläuterungen:

Um für ein das Menü die Schriftformatierungen zu ändern benötigen wir ein Override.

Im Templateordner befindet sich im Unterordner html das Override mod_menu.

Zuerst die Datei default_component.php mit einen Texteditor öffnen.

Dort befindet sich im unteren Bereich der Ausgabecode für die Navigation.

Über die Klasse span class='linker' kann die Schriftformatierung für die nav-items vorgenommen werden.

Diese Klasse müssen wir in der custom.css erstellen.

 

Dazu ersetzen wir die Zeile:
echo JHtml::_('link', JFilterOutput::ampReplace(htmlspecialchars($item->flink, ENT_COMPAT, 'UTF-8', false)), $linktype, $attributes);

durch folgenden Code:

echo JHtml::_('link', JFilterOutput::ampReplace(htmlspecialchars($item->flink, ENT_COMPAT, 'UTF-8', false)), '<span class="linker">' . $linktype . '</span>', $attributes);
		

Erläuterungen:

Sollen auch Submenüeinträge in der Navigation vorhanden sein, muss noch eine Codezeile in der default_url.php geändert werden.

Dort muss auch die Klasse span class='linker' eingebunden werden, damit auch hier die Schriftformatierung funktioniert.

Das war der zweite Teil des Tutorials.

  • Die index.php ist fertig gestellt.
  • Das Modul für die obere Infoleiste ist erstellt.
  • Die CSS Formatierungen für den äußeren Container sind erstellt.
  • Die CSS Formatierungen für das Modul Kontakt sind erstellt.
  • Die Leiste mit Logo, Titel und Navigation ist fertig gestellt.
  • Das Modul für die Navigation ist erstellt.
  • Die CSS Formatierungen für die Leiste und die Navigation sind erstellt.
  • Das Override für die Schriftformatierungen der Navigation ist fertig.