Bin auch Contao Anfänger und versuche grad meine Navigation zu stylen mit CSS.
Habe mir dazu folgende einfache Beispielsnavigation erstellt:
MENU1
MENU2
- Submenu1
- Submenu2
- Submenu3
MENU3
Nun habe ich mir im Firebug angeschaut wie's aussieht wenn MENU1 selektiert wird und wie's aussieht wenn Submenu1 selektiert wurde und versuche nun MENU1 und Submenu1 unabhängig voneinander zu stylen.
Setze ich MENU1 auf bold, so ist automatisch auch Submenu1 bold
(ich möchte Submenu1 aber nur rot und das bold nicht von oben vererbt erhalten)
Hier das Beispiel:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
#left .mod_navigation ul.level_1 li.active.first span.active.first{
font-weight: bold;
}
#left .mod_navigation ul.level_1 li.submenu.trail ul.level_2 li.active.first span.active {
color: #ff0000;
}
</style>
</head>
<body>
Menu1 ist der aktive Menupunkt:
<div id="left" style="width:220px">
<nav id="navigation-menu" class="mod_navigation block">
<ul class="level_1">
<li class="active first">
<span class="active first">MENU1</span>
</li>
<li class="submenu sibling">
<a class="submenu sibling" title="MENU2" href="index.php/menu2.html">MENU2</a>
<ul class="level_2">
<li class="first">
<a class="first" title="Submenu1" href="index.php/submenu1.html">Submenu1</a>
</li>
<li>
<a title="Submenu2" href="index.php/submenu2.html">Submenu2</a>
</li>
<li class="last">
<a class="last" title="Submenu3" href="index.php/submenu3.html">Submenu3</a>
</li>
</ul>
</li>
<li class="sibling">
<a class="sibling" title="MENU3" href="index.php/menu3.html">MENU3</a>
</li>
</ul>
</nav>
</div>
Menu2 ist der aktive Menupunkt:
<div id="left">
<nav id="navigation-menu" class="mod_navigation block">
<ul class="level_1">
<li class="first">
<a class="first" title="MENU1" href="index.php/menu.html">MENU1</a>
</li>
<li class="submenu trail">
<a class="submenu trail" title="MENU2" href="index.php/menu2.html">MENU2</a>
<ul class="level_2">
<li class="active first">
<span class="active first">Submenu1</span>
</li>
<li class="sibling">
<a class="sibling" title="Submenu2" href="index.php/submenu2.html">Submenu2</a>
</li>
<li class="sibling last">
<a class="sibling last" title="Submenu3" href="index.php/submenu3.html">Submenu3</a>
</li>
</ul>
</li>
<li>
<a title="MENU3" href="index.php/menu3.html">MENU3</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
So wird's momentan angezeigt:
navigation.jpg
Wie kriege ich hin, das "Submenu1" nicht bold angezeigt wird?
Oder generell gefragt:
Was ist ein guter Einstiegspunkt für die Gestaltung der Navigation (Buch/Tutorial/Video).
Ich habe im Augenblick nur das Buch "Mit Contao Webseiten erfolgreich gestalten", da wird aber als Beispiel eine Navigation gezeigt welche nur Level1 hat (keine Submenus). Später möchte ich das Level2 als "Accordion" angezeigt haben (was mir zur Zeit auch noch nicht klar ist wie das später gemacht werden kann - aber offensichtlich ist es machbar).
Im Augenblick reicht es mir jedoch aus, wenn ich MENU1 und Submenu1 unabhängig voneinander stylen könnte...
Navigation stylen (CSS)
Zitieren
Zitat von Supertramp
Lesezeichen