benutzerdefiniertes Menü – Menüpunkt anpassen / hervorheben mit CSS

Die mit WordPress 3.0 eingeführten benutzerdefinierten Menüs werden wie alle anderen Elemente auch mit Hilfe von CSS dargestellt. Im Standard themes TwentyTen ist z.B. das horizontale Menü unter der Headergrafik so ein benutzerdefiniertes Menü und die zugehörigen CSS Einträge in der style.css sind folgende.

#access {
	background: #000;
	margin: 0 auto;
	width: 940px;
	display:block;
	float:left;
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float:left;
	position: relative;
}
#access a {
	display:block;
	text-decoration:none;
	color:#aaa;
	padding:0 10px;
	line-height:38px;
}
#access ul ul {
	display:none;
	position:absolute;
	top:38px;
	left:0;
	float:left;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	width: 180px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left:100%;
	top:0;
}
#access ul ul a {
	background:#333;
	height:auto;
	line-height:1em;
	padding:10px;
	width: 160px;
}
#access li:hover > a,
#access ul ul :hover > a {
	color:#fff;
	background:#333;
}
#access ul li:hover > ul {
	display:block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color:#fff;
}

Ganz schön viel für so ein Menü, doch wie kann ein einzelner Menüpunkt hervorgehoben werden, wie z.B. die Punkte “Lexikon” und “Umfragen” hier bei mir.
Dazu ruft man in seinem Browser den Quelltext der Seite auf und sucht den entsprechenden Abschnitt. Bei mir sieht der so aus:

  • Umfragen
  • Lexikon
  • Jetzt kommt es auf die IDs menu-item-4501 und menu-item-4465 an. Bei dir werden diese IDs andere Ziffern am Ende haben. Deswegen auch der Weg über den Quelltext um die Ziffern heraus zu finden. Diese IDs definieren wir über die style.css extra. Bei mir habe ich den Code

    #menu-item-4501 {
    	float:right !important;
    	margin-right:13px;
    	background:#ff0000;
    	font-weight:bold;
    	border-bottom:1px solid #000;
    	}
    
    #menu-item-4465 {
    	float:right !important;
    	margin-right:1px;
    	background:#ff0000;
    	font-weight:bold;
    	border-bottom:1px solid #000;
    	}
    
    #menu-item-4465 a, #menu-item-4501 a {
    	color:#000;
    	}
    

    in der style.css eingefügt. Bei der Gestaltung bzw. Hervorhebung einzelner Menüpunkte sind keine Grenzen gesetzt. Eine sehr gute Hilfe im Umgang mit CSS bietet übrigens die Seite selfhtml.org/css.

    Nachteil dieser Methode: Entfernt man einen Link aus dem Menü und fügt ihn später wieder ein ändert sich die ID, so dass der Eintrag in der style.css angepasst werden muss.

    Hinterlasse eine Antwort

    Pflichtfelder sind mit * markiert. Deine E-Mail Adresse wird nicht veröffentlicht.
    Mit dem Absenden eines Kommentars erklärst du dich mit meinen Datenschutzbestimmungen einverstanden. Bitte beachte auch das Regelwerk - CoC für Blogger. Wie dein Profilbild bei deinen Kommentaren angezeigt wird erkläre ich in dem Artikel Wie geht das - Avatar bei Kommentaren?.