3 kreative Möglichkeiten, Ihre vertikale Untermenü-Navigation zu gestalten

Veröffentlicht: 2017-08-17

Im heutigen Beitrag werden wir Ihnen drei verschiedene Möglichkeiten bieten, das Untermenü Ihrer vertikalen Navigation zu gestalten. In einem der vorherigen Beiträge haben wir Ihnen bereits gezeigt, wie Sie eine transparente vertikale Navigation erstellen, die Ihre Website überlappt, wenn Sie sie von einem Desktop aus betrachten.

Die Beispiele, die wir teilen werden, werden zusätzlich zu dieser transparenten vertikalen Navigation erstellt. Auf diese Weise haben Sie sofort die Möglichkeit, Ihre vertikale transparente Navigation von A bis Z zu erstellen. In diesem Beitrag erfahren Sie verschiedene Stileinstellungen, die Ihr vertikales Untermenü zum Leben erwecken können.

Bevor Sie die Beispiele zeigen, könnte es interessant sein, das Untermenü ohne Änderungen zu sehen. Das vertikale Untermenü übernimmt wie gewohnt die Einstellungen der Hauptmenüpunkte. Ohne weitere Modifikationen sieht das Untermenü so aus:

Schauen wir uns nun die drei Beispiele an, die wir Ihnen zeigen, wie Sie sie neu erstellen können.

Erstes Beispiel:

Zweites Beispiel:

Drittes Beispiel:

Allgemeine Schritte zum Erreichen des vertikalen Untermenüs

Abonnieren Sie unseren Youtube-Kanal

Bevor wir in die verschiedenen Beispiele eintauchen, die wir bereitgestellt haben, werden wir zwei allgemeine Schritte behandeln, die vor dem Start erforderlich sind. Bevor Sie die Untermenüpunkte nach Ihren Bedürfnissen gestalten, müssen Sie zwei Dinge tun: Fügen Sie die Untermenüpunkte zu Ihrem Menü hinzu und suchen Sie nach den unterschiedlichen CSS-IDs unserer Untermenüpunkte. Nachdem wir diese Schritte ausgeführt haben, geben wir den CSS-Code frei, den Sie benötigen, um die Beispielergebnisse zu erzielen.

Da es drei Möglichkeiten gibt, CSS-Code zu Ihrer Divi-Website hinzuzufügen, behandeln wir jede Methode einzeln. Sie können jedoch Ihre bevorzugte Methode verwenden, um den CSS-Code für jedes der Beispiele hinzuzufügen.

Untermenüpunkte hinzufügen

Als erstes fügen wir die Untermenüpunkte hinzu, falls Sie dies noch nicht getan haben. In unserem Beispiel haben wir dem Menüpunkt „unsere Modelle“ nur einige Untermenüpunkte hinzugefügt, um Ihnen zu zeigen, wie es geht. Sie können die Änderungen jedoch auch auf andere Menüpunkte anwenden.

Wenn Sie sich in Ihrem WordPress-Dashboard befinden, gehen Sie zu Darstellung > Menüs . Wenn Sie bereits ein Menü erstellt haben, verwenden Sie dieses. Wenn nicht, beginnen Sie mit der Erstellung eines neuen Menüs. Fügen Sie dann die Hauptmenüpunkte zu Ihrem Menü hinzu. Sobald Sie dies getan haben, können Sie die Untermenüpunkte hinzufügen. Fügen Sie einen Untermenüpunkt hinzu und platzieren Sie ihn einfach direkt unter dem Hauptmenüpunkt. Tun Sie dies für alle Untermenüelemente, die Sie zu Ihrer vertikalen Navigation hinzufügen möchten.

Suchen Sie nach den einzelnen CSS-IDs Ihrer Untermenüpunkte

In unseren Beispielen müssen wir an jedem Untermenüpunkt einzeln einige CSS-Änderungen vornehmen. Deshalb müssen wir die CSS-IDs im Quellcode nachschlagen. Jeder Artikel hat eine andere ID. Sie müssen den CSS-Code entsprechend den CSS-IDs ändern, die speziell auf Ihrer Website verwendet werden. Diese können sich von denen unterscheiden, die in diesen Beispielen verwendet werden. Deshalb zeigen wir Ihnen kurz, wo Sie die IDs bekommen, damit Sie die Anpassungen speziell für Ihre Artikel vornehmen können.

Gehen Sie auf Ihre Homepage, bewegen Sie die Maus auf das Menü und beginnen Sie mit der Überprüfung des Codes. Die CSS-ID wird im ausgewählten Menüelement angezeigt. Kopieren Sie jede der CSS-IDs in der Untermenüliste und speichern Sie sie für später.

Nachdem Sie die beiden Schritte ausgeführt haben, können Sie mit der Erstellung der von uns erstellten Beispiele fortfahren.

Erstellen Sie das erste Beispiel

In diesem Teil des Beitrags zeigen wir Ihnen genau, wie Sie das erste Beispiel des vertikalen Untermenüs nachbilden. Wie Sie sehen, ist die Struktur wirklich einfach, fügt Ihrer Website jedoch zusätzliche Farbe hinzu. Die primären Menüpunkte sind einfach und verwenden eine transparente Hintergrundfarbe. Diese Einfachheit können Sie natürlich auch in Ihrem Untermenü beibehalten. Oder Sie können ein wenig mehr Aufmerksamkeit darauf lenken.

Die verwendeten Farben stimmen mit dem Hintergrundbild mit der Verlaufsüberlagerung überein. Es empfiehlt sich, diese Farbkonsistenz in Ihrem Untermenü beizubehalten, wenn Sie versuchen, ein einfaches und bescheidenes Ergebnis zu erzielen.

Fügen Sie den CSS-Code über die Designoptionen hinzu

Es gibt verschiedene Möglichkeiten, Ihrer Seite CSS-Code hinzuzufügen. Sie können beispielsweise den CSS-Code zu einer bestimmten Seite hinzufügen. Sie können es auch über die Theme-Optionen oder den Theme-Anpasser zur gesamten Website hinzufügen. In diesem Beispiel fügen wir einfach den Code über die Designoptionen hinzu. Wenn Sie sich in Ihrem WordPress-Dashboard befinden, gehen Sie zu Divi > Themenoptionen > Scrollen Sie auf der Registerkarte Allgemein nach unten und fügen Sie den folgenden Code in das Feld Benutzerdefiniertes CSS ein:

.nav li ul {
border: none !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(60,105,205,0.1) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(60,105,205,0.3) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(60,105,205,0.5) !important;
border-radius: 5px;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0px 1px 0 !important;
text-align: center !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 5% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\e089" !important;
}

Ersetzen Sie die folgenden CSS-IDs im Code durch diejenigen, die für Ihr Untermenü gelten. Im vorherigen Schritt dieses Beitrags haben wir Ihnen gezeigt, wo Sie diese finden können.

Erstellen Sie das zweite Beispiel

Im nächsten Beispiel zeigen wir Ihnen, wie Sie einen bestimmten Verlaufseffekt erzeugen. Die verschiedenen verwendeten Farben stimmen mit dem verwendeten Hintergrundbild überein. Wir haben dem kompletten Untermenü einen Verlaufshintergrund und jedem einzelnen Untermenüpunkt einige einzelne transparente Farben hinzugefügt.

Fügen Sie den CSS-Code insbesondere für eine Seite hinzu

Obwohl Sie diesen Code wahrscheinlich zu Ihrer vollständigen Website hinzufügen möchten, zeigen wir Ihnen, wie Sie dieses Beispiel auf eine bestimmte Seite anwenden können. Wenn Sie die CSS-Codezeilen nicht zu einer bestimmten Seite hinzufügen möchten, können Sie sie über die Theme-Optionen (wie im ersten Beispiel gezeigt) oder über den Theme-Anpasser (wie im nächsten Beispiel gezeigt) hinzufügen.

Beginnen Sie mit dem Öffnen oder Erstellen der Seite, auf der Sie das Untermenüdesign hinzufügen möchten. Klicken Sie nun auf die folgende Schaltfläche in der rechten Ecke des Divi-Builders:

Kopieren Sie im angezeigten Bildschirm die folgenden CSS-Codezeilen und fügen Sie sie in das Feld Benutzerdefiniertes CSS ein:

.nav li ul {
border: none !important;
background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
padding: 3px !important;
width: 80% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(255,255,255,0.6) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(255,255,255,0.4) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0 1px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 80% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

Ersetzen Sie die folgenden Untermenüpunkte im CSS-Code durch Ihren eigenen:

Erstellen Sie das dritte Beispiel

Das letzte Beispiel, das wir teilen werden, hat einen Hover-Effekt. Indem Sie diesen Hover-Effekt zu Ihrem Untermenü hinzufügen, werden Sie auf angenehme Weise mit Ihrem Publikum interagieren, ohne Ihr Hauptmenü zu überladen. Da das Untermenü nur erscheint, wenn man über den Hauptmenüpunkt fährt. Ihre Besucher werden daher nicht ständig mit der Wirkung konfrontiert.

Fügen Sie den CSS-Code für eine Seite über den Theme Customizer hinzu

Im letzten Beispiel zeigen wir Ihnen, wie Sie den CSS-Code über den Theme Customizer hinzufügen. Wenn Sie sich in Ihrem WordPress-Dashboard befinden, gehen Sie zu Darstellung > Anpassen > Zusätzliches CSS > und kopieren Sie die folgenden Codezeilen und fügen Sie sie ein:

.nav li ul {
border: none !important;
width: 95% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205211:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213:hover
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 5px 0 5px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 95% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

Nehmen Sie die CSS-IDs Ihrer Untermenüpunkte und ersetzen Sie die im Beispiel durch Ihre:

Das ist es! Ihr Design sollte nun wie im oben gezeigten Beispiel aussehen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen einige Möglichkeiten gezeigt, wie Sie mit Ihrer vertikalen Navigation kreativ werden können. Genauer; Wir haben Ihnen gezeigt, wie Sie Ihr vertikales Untermenü großartig aussehen lassen. Wenn Sie diesem Beitrag Schritt für Schritt folgen, sollten Sie das vertikale Untermenü perfekt nachbilden können. Wenn Sie Fragen oder Anregungen haben; lass es uns im Kommentarbereich unten wissen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!