• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Aktiver Menupunkt dauerhaft farbig hinterlegen?

S

SimplyFred

Neues Mitglied
Hallo,

ich habe ein Menu, in dem der Besucher sehen soll, wo er sich gerade befindet. Der Menu-Punkt soll dauerhaft in einer anderen Farbe unterlegt sein. So ähnlich wie mit "linksmenu a:active".
Dies wiederum funktioniert aber nur so lange, wie man die Maustaste drückt.

Hat jemand eine Idee? Ich tappe auf der Stelle ...


menu.css
Code: 
/* CSS Document */

/*PAGE LAYOUT*/


#linksmenu a{
    float: right;
    width: 183px;
    height: 20px;
    background-color: #FFFFFF;
    border-left: solid 0px #CCCCCC;
    border-bottom: solid 1px #CCCCCC;
    font: arial;
    font-size: 12px;
    font-weight: ;
    color: #000000;
    text-decoration: none;
    padding-top: 5px;
    white-space: normal;
    text-indent: 5px;
}
#linksmenu a:hover{
    background-color:#CCCCCC;
    color: #000000;


}
#linksmenu a:active{
    background-color:#000000;
    color: #FFFFFF;
}


index.html
Code: 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=180 NOF=LY>                    <TR VALIGN=TOP ALIGN=LEFT>
                        <TD HEIGHT=50></TD>
                    </TR>
                    <TR VALIGN=TOP ALIGN=LEFT>
                   
                        <TD HEIGHT=240 WIDTH=180>
                            
                            <div id="menu" align="right">
                <div align="right" style="width:180px; height:10px;"></div>
                <div id="linksmenu" align="left">
                    <a href="index.html" title="Home">Home</a>
                    <a href="./html/linkl.html" title="linkl.html">linkl.html</a>
                    <a href="./html/link2.html" title="link2.html">link2.html</a>
                    <a href="./html/link3.html" title="link3.html">link3.html</a>
                    <a href="./html/link4.html" title="link4.html">link4.html</a>
                        


        </div>
            </div>

Gruß
SimplyFred
 
Hallo,

tut mir Leid aber mit Tabellen erstellt man kein Design. Bring das erst mal in Ordnung.
Alle zur Darstellung gehörenden Attribute kommen ins CSS.

sowas ist grundfalsch:

<TR VALIGN=TOP ALIGN=LEFT>
 
Geht (meines Wissens) nicht ausschließlich mit CSS. Genutzt werden könnte beispielsweise PHP zur Abfrage, welche Seite aktuell aufgerufen ist.
 
Hallo Degers,

Doch geht. In dem man dem Element, welches gerade im Menü repräsentativ für meine Seite steht eine Klasse gibt und diese im CSS formatiert.
Das muss man dann natürlich zu Fuss für jede Seite einzeln vornehmen. Aber bei kleinen Webseiten ist dieses Vorgehen angebracht. Bei grösseren Projekten ist die Lösung mit PHP natürlich schon aus Effizienzgründen vorzuziehen.
 
Das geht recht einfach mit PHP, wenn man an den Link noch einen Parameter anhängt und über $_GET dynamisch die CSS-Klasse zuweist.

PHP: 
.selected {
   background-color = red;
}

<a href="/html/linkl.html?id=1" class="<?php if($_GET['id'] == '1') echo 'selected'; ?>">Link 1</a>
 
Aktiver Menupunkt dauerhaft farbig hinterlegen? 2.Versuch

Hallo,


ich versuche es nun zum 2. Mal mit beiliegendem Code.
Ergebnis ist nun, sobald ich im HTML anfange, echte Links zu setzen, ist der aktive Menupunkt nicht mehr hinterlegt.
Beim Klick auf Link2-10 klappt es, aber bei Klick auf Home ist Home nicht hinterlegt. Wie bekomme ich das jetzt noch hin?


menu.css
Code: 
<style type="text/css">


#vertmenu {
font: arial;
font-size: 12px;
width: 180px;
padding: 0px;
margin: 0px;
}


#vertmenu h1 {
        display: block;
        background-color: #CCCCCC;
        margin: 0px;
        width: 180px;
}


#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li a {
        font: 12px arial;
        display: block;
        border-bottom: solid 1px #CCCCCC;
        padding: 5px 0px 2px 20px;
        text-decoration: none;
        color: #000000;
        width: 180px;
        text-align: left;
        white-space: normal;


}


#vertmenu ul li a:hover {
        color: #E20074;
        background-color: #CCCCCC;
}
#vertmenu ul li a:focus {
color: #FFFFFF;
        background-color: #000000;
        border-bottom: solid 1px #000000;


}
</style>
index.html


Code: 
                            <div id="vertmenu" align="right">
                                <div align="right" style="width:180px; height:10px;"></div>
<ul>
<li><a href="index.html" tabindex="1">Home</a></li>
<li><a href="#.html" tabindex="2">link2</a></li>
<li><a href="#.html" tabindex="3">link3</a></li>
<li><a href="#.html" tabindex="4">link4</a></li>
<li><a href="#.html" tabindex="5">link5</a></li>
<li><a href="#.html" tabindex="6">link6</a></li>
<li><a href="#.html" tabindex="7">link7</a></li>
<li><a href="#.html" tabindex="8">link8</a></li>
<li><a href="#.html" tabindex="9">link9</a></li>
<li><a href="#.html" tabindex="10">link10</a></li>




</ul>
</div>
 
Dein HTML Code ist nicht richtig.
Es gibt kein Attribut align:right.
So was muss ins CSS. Genauso deine Inlinestyles besser ins CSS um Fehler zu vermeiden und wegen der Übersichtlichkeit.
Dein Div das du wahrscheinlich als Abstandshalter eingebaut hast ist überflüssig. Im CSS gibst du die Abstände an. Margin für Abstände nach Aussen und padding für Abstände nach innen. Siehe auch Lesson 10: Außen- und Innenabstand (margin und padding) - CSS Tutorial - HTML.net

Dein Menü im HTML-Teil muss dann so aussehen:

HTML: 
<!DOCTYPE html>
<html>  
    <head>   
        <meta charset="utf-8">
        <title>Navigationsbeispiel</title>        
        <link rel="stylesheet" href="navigation.css" type="text/css" media="screen">
    </head>
    <body>
        <div id="vertmenu">
            <ul>
                <li><a                   href="index.html" tabindex="1">Home</a></li>
                <li><a class="aktiv" href="#.html"     tabindex="2">link2</a></li>
                <li><a                   href="#.html"     tabindex="3">link3</a></li>
                <li><a                   href="#.html"     tabindex="4">link4</a></li>
                <li><a                   href="#.html"     tabindex="5">link5</a></li>
                <li><a                   href="#.html"     tabindex="6">link6</a></li>
                <li><a                   href="#.html"     tabindex="7">link7</a></li>
                <li><a                   href="#.html"     tabindex="8">link8</a></li>
                <li><a                   href="#.html"     tabindex="9">link9</a></li>
                <li><a                   href="#.html"     tabindex="10">link10</a></li>
            </ul>
        </div>
    </body>
</html>

In dein CSS kommt dann zusätzlich für die gerade Aktive Seite, hier der 2. Link, den ich mal mit einer anderen Hintergrundfarbe hinterlegt habe:

HTML: 
#vertmenu ul li a.aktiv {
    background-color: rgb(204,204,102);
}
 
Also, ich mache das meist folgendermaßen:

In meiner header.php weiße ich dem body-Tag die ID via $variableX der jeweiligen Seite zu.
Diese $variableX wird auf den jeweiligen Unterseiten bspw. als index, contact, impressum, usw. definiert.
Außerdem wird der Name der ID als Klasse des jeweiligen (passenden) Menüpunkts zugewiesen.

So kann ich dann problemlos den aktiven Menüpunkt hervorheben.

Code: 
#index .index {background:#f00;}
#contact .contact {background:#f00;}

Ich bin im Erklären nicht sooo der Beste. Kann aber gerne noch ausführlicheren Code beisteuern. :)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben