Oberpunkte in CSS-Menu hervorheben

bastain

Hallo, ich nutze ein Tenplate mit einem "normalen" CSS-Pulldown-Menu. Es gibt nur zwei Ebenen: -Oberpunkte --Unterpunkt Es verzweigt also nicht tiefer. Wenn ich jetzt "Oberpunkt" auswähle, wird dieser auch hervorgehoben, sowohl beim Hover mit der Maus als auch, wenn man drückt (bleibt also hervorgehoben). Jetzt wäre es mir aber ganz recht, dass der Oberpunkt auch hervorgehoben bliebe, wenn ich mich auf der Seite "Unterpunkt" befinde. Kann mir da jemand verraten wie ich das bewerkstellige? Bastian

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

Zitat von bastain

Hallo, ich nutze ein Tenplate mit einem "normalen" CSS-Pulldown-Menu. Es gibt nur zwei Ebenen: -Oberpunkte --Unterpunkt Es verzweigt also nicht tiefer. Wenn ich jetzt "Oberpunkt" auswähle, wird dieser auch hervorgehoben, sowohl beim Hover mit der Maus als auch, wenn man drückt (bleibt also hervorgehoben). Jetzt wäre es mir aber ganz recht, dass der Oberpunkt auch hervorgehoben bliebe, wenn ich mich auf der Seite "Unterpunkt" befinde. Kann mir da jemand verraten wie ich das bewerkstellige? Bastian

Samstags waren meine Glaskugeln auf der Saturday Night Party,
dann haben die sich sonntags ausgeschlafen und heute am Montag machen die einfach Blau.... :-?

klar kann ich es Dir eventuell verraten, es gibt ca >3.456.723.456.789 Möglichkeiten so ein Menü zu machen,

:mrgreen: Sollt ich dir all diese Möglichkeiten aufzählen, oder verräts Du den Link zum Geschehen

SuMu

Zitat von Monika

klar kann ich es Dir eventuell verraten, es gibt ca >3.456.723.456.789 Möglichkeiten so ein Menü zu machen,
:mrgreen: Sollt ich dir all diese Möglichkeiten aufzählen

bitte mache das doch mal für mich :mrgreen:

isslie

Zitat von Monika

Samstags waren meine Glaskugeln auf der Saturday Night Party,
dann haben die sich sonntags ausgeschlafen und heute am Montag machen die einfach Blau.... :-?
klar kann ich es Dir eventuell verraten, es gibt ca >3.456.723.456.789 Möglichkeiten so ein Menü zu machen,

Pöse Glaskugeln... :twisted:
Gab es früher nicht mehr Möglichkeiten? Ich erinner mich da dunkel dran... :-D

bastain

Jaja schon gut, Ihr habt ja Recht. ;) Link kann ich keinen geben, da das ganze noch lokal bei mir hier rumdümpelt. Was soll ich posten? Eher Header.php oder styles.css. Bin im Codesuchen nicht so bewandert...

Monika

Zitat von bastain

Jaja schon gut, Ihr habt ja Recht. ;) Link kann ich keinen geben, da das ganze noch lokal bei mir hier rumdümpelt. Was soll ich posten? Eher Header.php oder styles.css. Bin im Codesuchen nicht so bewandert...

Du mußt Deiner Weseite unterm Rock schauen ...:oops:

klickst auf eine Unterseite,
dann oben im Browser auf Ansicht==>Quellcode,
das kopierst Du....

und dann die style.css

(code tags bitte verwenden)

lg

bastain

Ich musste alles etwas kürzen, sonst hätte ich es nicht posten können. Ich hoffe es ist alles drin...

CSS

/* 


#navbar {
    background: #333333;
    width: 920px;
    height: 26px;
    color: #FFFFFF;
    margin: 0px auto 0px;
    padding: 0px 0px 0px 0px;
}


    


#navbarleft {
    width: 850px;
    height: 26px;
    float: left;
    margin: 0px;
    padding: 0px 0px 0px 0px;
}


    


#navbarright {
    width: 30px;
    height: 26px;
    float: right;
    margin: 0px;
    padding: 0px 10px 0px 0px;
    text-align: right;
}


    


#navbarright a img {
    border: none;
    margin: 5px 0px 0px 0px;
    padding: 0px;
}






#nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
}


    


#nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}






#nav a {
    background: #333333;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    margin: 0px 20px 0px 0px;
    padding: 6px 10px 5px 10px;
}


    


#nav a:hover {
    background: #555555;
    color: #FFFFFF;
    display: block;
    text-decoration: none;
    margin: 0px 20px 0px 0px;
    padding: 6px 10px 5px 10px;
}






#nav li {
    float: left;
    margin: 0px;
    padding: 0px;
}


    


#nav li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 160px;
}


    


#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #333333;
    font-weight:normal;
    width: 160px;
    float: none;
    margin: 0px;
    padding: 6px 10px 5px 10px;
}


    


#nav li li a:hover, #nav li li a:active {
    background: #555555;
}






#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
}




#nav li:hover ul {
    left: auto;
    display: block;
}


    


#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}


.current_page_item a {
    background: #555555 !important;
    color: #FFFFFF !important;
    display: block;
}


.current_page_item a:hover {
    background: #333333 !important;
    color: #FFFFFF !important;
    display: block;
}


/************************************************


*    Navbar                                      *


************************************************/






#subnavbar {
    background: #EEEEEE;
    width: 920px;
    height: 26px;
    color: #FFFFFF;
    margin: 0px auto 0px;
    padding: 0px 0px 0px 0px;
}


    


#subnav {
    margin: 0px;
    padding: 0px;
    list-style: none;
}


    


#subnav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}






#subnav a {
    background: #EEEEEE;
    color: #333333;
    display: block;
    font-weight: bold;
    margin: 0px 20px 0px 0px;
    padding: 6px 10px 5px 10px;
}


    


#subnav a:hover {
    background: #DDDDDD;
    color: #333333;
    display: block;
    text-decoration: none;
    margin: 0px 20px 0px 0px;
    padding: 6px 10px 5px 10px;
}






#subnav li {
    float: left;
    margin: 0px;
    padding: 0px;
}


    


#subnav li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 160px;
}


    


#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
    background: #EEEEEE;
    width: 160px;
    float: none;
    margin: 0px;
    padding: 6px 10px 5px 10px;
}


    


#subnav li li a:hover, #subnav li li a:active {
    background: #DDDDDD;
}






#subnav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
}






#subnav li:hover ul {
    left: auto;
    display: block;
}


    


#subnav li:hover ul, #subnav li.sfhover1 ul {
    left: auto;
}


/************************************************


*    Breadcrump                                     *


************************************************/


.breadcrumb {
    padding:10px 0px 0px 5px;
}


.breadcrumb a {
    margin-right:20px;
}
    




/************************************************


*    Widgets                                     *


************************************************/






#recent-posts ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}






#recent-posts ul li {
    background: #FFFFFF url(images/icon_recent.gif) no-repeat top left;
    padding: 0px 0px 5px 18px;
    margin: 0px 0px 0px 0px;
}


    


#recent-comments ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}






#recent-comments ul li {
    background: #FFFFFF url(images/icon_links.gif) no-repeat top left;
    padding: 0px 0px 5px 18px;
    margin: 0px 0px 0px 0px;
}


    


#categories-1 ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}






#categories-1 ul li {
    background: #FFFFFF url(images/icon_categories.gif) no-repeat top left;
    padding: 0px 0px 5px 18px;
    margin: 0px 0px 0px 0px;
}


    


#archives ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0x 0px 0px 0px;
}






#archives ul li {
    background: #FFFFFF url(images/icon_archives.gif) no-repeat top left;
    padding: 0px 0px 5px 18px;
    margin: 0px 0px 0px 0px;
}


    


#pages ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}






#pages ul li {
    background: #FFFFFF url(images/icon_meta.gif) no-repeat top left;
    padding: 0px 0px 5px 18px;
    margin: 0px 0px 0px 0px;
}


    


#links ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}






#links ul li {
    background: #FFFFFF url(images/icon_links.gif) no-repeat top left;
    padding: 0px 0px 5px 18px;
    margin: 0px 0px 0px 0px;
}
    
    


#meta ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}






#meta ul li {
    background: #FFFFFF url(images/icon_meta.gif) no-repeat top left;
    padding: 0px 0px 5px 18px;
    margin: 0px 0px 0px 0px;
}


    


#text-1 ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}






#text-1 ul li {
    padding: 0px 0px 5px 0px;
    margin: 0px 0px 0px 0px;
}

Alles anzeigen

bastain

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 
 
 <head profile="http://gmpg.org/xfn/11">
 
 
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 
 
 <meta name="distribution" content="global" />
 
 
 
 <meta name="robots" content="follow, all" />
 
 
 
 <meta name="language" content="en, sv" />
 
 
 
 
 
 
 
 <title>  Vereine :  an der Mosel</title>
 
 
 
 <meta name="generator" content="WordPress 2.5.1" />
 
 
 
 <!-- leave this for stats please -->
 
 
 
 
 
 
 
 <link rel="Shortcut Icon" href="http://localhost/wordpress/wp-content/themes/revolution/images/favicon.ico" type="image/x-icon" />
 
 
 <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://localhost/wordpress/feed/" />
 
 
 
 <link rel="alternate" type="text/xml" title="RSS .92" href="http://localhost/wordpress/feed/rss/" />
 
 
 
 <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://localhost/wordpress/feed/atom/" />
 
 
 
 <link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" />
 
 
     <link rel='archives' title='Juni 2008' href='http://localhost/wordpress/2008/06/' />
     <link rel='archives' title='Mai 2008' href='http://localhost/wordpress/2008/05/' />
 
 
 
 <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
 <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" /> 
 <script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/prototype.js?ver=1.6'></script>
 <script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/scriptaculous/scriptaculous.js?ver=1.8.0'></script>
 <script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/scriptaculous/effects.js?ver=1.8.0'></script>
 <script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/lightbox-2/lightbox.js?ver=2.2'></script>
 
 <meta name="generator" content="WordPress 2.5.1" />
 
 
     <!-- Courtesy of Kimili Flash Embed - Version 1.4.2 -->
     <script src="http://localhost/wordpress/wp-content/plugins/kimili-flash-embed/js/swfobject.js" type="text/javascript"></script>
 
     <!-- begin lightbox scripts -->
     <script type="text/javascript">
     //<![CDATA[
     document.write('<link rel="stylesheet" href="http://localhost/wordpress/wp-content/plugins/lightbox-2/Themes/User/lightbox.css" type="text/css" media="screen" />');
     //]]>
     </script>
     <!-- end lightbox scripts -->
 
 <!-- Protected by WP-SpamFree v1.9.6.1 :: JS BEGIN -->
 <script type="text/javascript" src="http://localhost/wordpress/wp-content/plugins/wp-spamfree/js/wpsf-js.php"></script> 
 <!-- Protected by WP-SpamFree v1.9.6.1 :: JS END -->
 
 
 
 
<style type="text/css" media="screen"><!-- @import url( http://localhost/wordpress/wp-content/themes/revolution-20/style.css ); --></style>
 
 
 
 
 
 
 
 <script type="text/javascript"><!--//--><![CDATA[//><!--
 
 
 
 sfHover = function() {
 
 
 
     if (!document.getElementsByTagName) return false;
 
 
 
     var sfEls = document.getElementById("nav").getElementsByTagName("li");
 
 
 
 
 
 
 
     // if you only have one main menu - delete the line below //
 
 
 
     var sfEls1 = document.getElementById("subnav").getElementsByTagName("li");
 
 
 
     //
 
 
 
 
 
 
 
     for (var i=0; i<sfEls.length; i++) {
 
 
 
         sfEls[i].onmouseover=function() {
 
 
 
             this.className+=" sfhover";
 
 
 
         }
 
 
 
         sfEls[i].onmouseout=function() {
 
 
 
             this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
 
 
 
         }
 
 
 
     }
 
 
 
 
 
 
 
     // if you only have one main menu - delete the "for" loop below //
 
 
 
     for (var i=0; i<sfEls1.length; i++) {
 
 
 
         sfEls1[i].onmouseover=function() {
 
 
 
             this.className+=" sfhover1";
 
 
 
         }
 
 
 
         sfEls1[i].onmouseout=function() {
 
 
 
             this.className=this.className.replace(new RegExp(" sfhover1\\b"), "");
 
 
 
         }
 
 
 
     }
 
 
 
     //
 
 
 
 
 
 
 
 }
 
 
 
 if (window.attachEvent) window.attachEvent("onload", sfHover);
 
 
 
 //--><!]]></script>
 
 
 
 
 
 
 
 </head>
 
 
 
 
 
 
 
 <body id="">
 
 
 
 
 
 
 
 <div id="wrap">
 
 
 
 
 
 
 
 <div id="header">
 
 
 
 
 
 
 
     <div id="headerleft">
         <a href="http://localhost/wordpress/"><img src="http://localhost/wordpress/wp-content/themes/revolution-20/images/logo.png" alt=" an der Mosel" /></a>
 
     <div class="cc"></div>
         <div style="padding-left:15px">
             <form id="searchform" method="get" action="/index.php">
 
             <input type="text" value="Best&auml;tigen Sie Ihre Suchbegriffe mit &lt;enter&gt;" name="s" id="searchbox" onfocus="if (this.value == 'Best&auml;tigen Sie Ihre Suchbegriffe mit &lt;enter&gt;') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Best&auml;tigen Sie Ihre Suchbegriffe mit &lt;enter&gt;';}" />
         <input type="image" src="http://localhost/wordpress/wp-content/themes/revolution-20/images/lupe.png" alt="Search" style="float:right; margin-right:55px;" /></form>
         </div>
     </div>
 
     <div id="headerright">        
     </div>
 </div>
 
 
 
 
 
 
 <div id="navbar">
 
 
 
 
 
 
 
     <div id="navbarleft">
 
 
 
         <ul id="nav">
 
 
 
             <li>
 
             <a href="http://localhost/wordpress/">Home</a></li>
 
 
 
             <li class="page_item page-item-54"><a href="http://localhost/wordpress/aktuelles/" title="Aktuelles">Aktuelles</a></li>
 <li class="page_item page-item-10 current_page_ancestor current_page_parent"><a href="http://localhost/wordpress/dorfgeschichte-und-chronik/" title="Über ">Über unser Dorf</a>
 
 <ul>
     <li class="page_item page-item-19"><a href="http://localhost/wordpress/dorfgeschichte-und-chronik/dorfchronik-und-geschichte/" title="Dorfchronik">Dorfchronik</a></li>
     <li class="page_item page-item-20"><a href="http://localhost/wordpress/dorfgeschichte-und-chronik/weinbergslagen/" title="Weinbergslagen">Weinbergslagen</a></li>
     <li class="page_item page-item-22 current_page_item"><a href="http://localhost/wordpress/dorfgeschichte-und-chronik/vereine/" title="Vereine">Vereine</a></li>
     <li class="page_item page-item-25"><a href="http://localhost/wordpress/dorfgeschichte-und-chronik/jugendclub/" title="Jugendclub">Jugendclub</a></li>
     <li class="page_item page-item-55"><a href="http://localhost/wordpress/dorfgeschichte-und-chronik/termine-2008/" title="Termine 2008">Termine 2008</a></li>
 </ul>
 
 </li>
 <li class="page_item page-item-3"><a href="http://localhost/wordpress/unterkunfte/" title="Urlaubsort">Urlaubsort</a>
 <ul>
     <li class="page_item page-item-17"><a href="http://localhost/wordpress/unterkunfte/campingplatze/" title="Unterkünfte">Unterkünfte</a></li>
     <li class="page_item page-item-24"><a href="http://localhost/wordpress/unterkunfte/punderich-und-umgebung/" title="Ort und Umgebung">Ort und Umgebung</a></li>
     <li class="page_item page-item-26"><a href="http://localhost/wordpress/unterkunfte/freizeitmoglichkeiten/" title="Freizeitmöglichkeiten">Freizeitmöglichkeiten</a></li>
     <li class="page_item page-item-27"><a href="http://localhost/wordpress/unterkunfte/touristinfo-und-service/" title="Touristinfo und Service">Touristinfo und Service</a></li>
     <li class="page_item page-item-66"><a href="http://localhost/wordpress/unterkunfte/gastronomie/" title="Gastronomie">Gastronomie</a></li>
 
 </ul>
 </li>
 <li class="page_item page-item-8"><a href="http://localhost/wordpress/gewerbe/" title="Gewerbe">Gewerbe</a></li>
 
 
 
         </ul>
 
 
 
     </div>
 
 
 
     
 
 
 
     <div id="navbarright">
 
 
 
         <a href="http://localhost/wordpress/feed/rss/"><img src="http://localhost/wordpress/wp-content/themes/revolution-20/images/rss.gif" alt="Subscribe to" /></a>
 
 
 
     </div>
 
 
 
     
 
 
 
 </div>
 
 
 
 
 
 
 
 <div id="subnavbar">
 
 
 
     <ul id="subnav">
 
 
 
             <li class="cat-item cat-item-1"><a href="http://localhost/wordpress/moselort/gemeinde_aktuell/" title="Aktuelle Nachrichten und offizielle Mitteilungen von der Gemeindeverwaltung.">Gemeindenachrichten</a>
 
 </li>
     <li class="cat-item cat-item-3"><a href="http://localhost/wordpress/moselort/klatsch/" title="Was gibts Neues in ?">Klatsch und Tratsch</a>
 </li>
     <li class="cat-item cat-item-4"><a href="http://localhost/wordpress/moselort/veranstaltungen/" title="Wo ist was los in ?">Wo ist was los?</a>
 </li>
     <li class="cat-item cat-item-5"><a href="http://localhost/wordpress/moselort/marktplatz/" title="Verschenken und Verkaufen">Marktplatz</a>
 </li>
 
 
 
     </ul>
 
 
 
 </div>
 
 </body>
 </html>

Alles anzeigen

Monika

die css class

Code

.current_page_parent{}

kannst du nutzen, um die Hauptseite einzufärben, wenn eine Unterseite angeklickt ist,

die css class

Code

.current_page_item{}

kannst du nutzen, um eine angeklickte Seite zu gestalten

da die Unterseiten nochmal in einer Liste sind,

Code

ul#nav li.current_page_item{}
 
und ul#nav li ul li.current_page_item{}

stehen somit für die Hauptseiten und das drunter für die Unterseiten zur Verfügung

hilfts weiter?

lg

bastain

Ich bekomme es nun zwar hin, dass der Oberpunkt farblich markiert bleibt, wenn ich einen Unterpunkt ausgewählt habe, allerdings ist dann der ganze Hintergrund des Menus in der farbe, wie die Markierungsfarbe des Oberpunktes.

Monika

Zitat von bastain

Ich bekomme es nun zwar hin, dass der Oberpunkt farblich markiert bleibt, wenn ich einen Unterpunkt ausgewählt habe, allerdings ist dann der ganze Hintergrund des Menus in der farbe, wie die Markierungsfarbe des Oberpunktes.

ok dann erweitere das um das a

also nur den link designen nicht die li, die alles einfärben

Code

.current_page_parent a{}

kannst auch bei den anderen so machen

lg

bastain

So funktionierts....obwohl ich mir vorstellen kann, dass das auch eleganter geht:

CSS

.current_page_parent a {
    background: #1C8000 !important;
    color: #FFFFFF !important;
    display: block;
}


.current_page_parent li a {
    background: #135700 !important;
}


.current_page_parent li a:hover {
    background: #1C8000 !important;
}


.current_page_item a:link, .current_page_item a:visited, .current_page_item a:hover {
    background: #1C8000 !important;
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Oberpunkte in CSS-Menu hervorheben

Jetzt mitmachen!