zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menüpunkt auf dem man sich befindet farbig hinterlegen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.05.2015, 21:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.04.2015
Beiträge: 12
Thorxel befindet sich auf einem aufstrebenden Ast
Standard Menüpunkt auf dem man sich befindet farbig hinterlegen

Hallo Community ich habe mir vor kurzem ein Code für ein Menü geholt und es für mich angepasst. Jetzt möchte ich nur noch, dass der Menüpunkt auf dem man sich befindet nicht nur wenn man mit der Maus drüber geht farbig unterlegt wird sondern auch wenn man sich auf der Seite befindet, dass der Menüpunkt dann farbig unterlegt bleibt ...

Hier mein HTML Quellcode:

HTML-Code:
<div id="navi">
                
                 <nav>
            <ul>
                <li class = "cat1">
                    <a href="index.php">Home</a>
                </li>
                <li class = "cat2">
                    <a href="über uns.php">Über uns</a>
                </li>
                <li class = "cat3">
                     <a href="forum.php">Forum</a>
                </li>
                <li class = "cat4">
                    <a href="events.php">Events</a>
                </li>
                <li class = "cat5">
                    <a href="kontakt.php">Kontakt</a>
                </li>
            </ul>
        </nav>
                
            </div>
und hier mein CSS Code:

HTML-Code:
 nav {
    width: 1000px;
}
nav ul {
    padding: 0%;
    margin: 0%;
}
nav ul:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
    nav ul,nav ul li{
    background-color: lightgrey;
}
    nav ul li {
    list-style: none;
    float:left;
}
nav ul li a {
    text-decoration: none;
    display: block;
    color: #333;
    padding: 14px 34px 14px 34px;
}
nav ul li:hover > ul {
    visibility: visible;
}
nav ul li ul{
    display: inline;
    visibility: hidden;
    position: absolute;
    padding:0px;
}
nav ul li ul li{
    float: none;
}
nav ul li ul li a:hover{
    color: #333;
}
    
    nav ul {
    padding: 0px;
    margin: 0px;
 
    box-shadow: 2px 2px 2px #dfdfdf;
    -moz-box-shadow: 2px 2px 2px #dfdfdf;
    -webkit-box-shadow: 2px 2px 2px #dfdfdf;
}
nav ul li {
list-style: none;
    float:left;
    border-right: 1px solid #dfdfdf;
}
nav ul li a {
    text-decoration: none;
    display: block;
    color: #333;
    padding: 14px 34px 14px 34px;
    
 
    -webkit-transition: background 0.3s ease-out 0s;
    -moz-transition: background 0.3s ease-out 0s;
    -o-transition: background 0.3s ease-out 0s;
    transition: background 0.3s ease-out 0s;
}
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a  {
    background-color: dimgray;
}
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a  {
    background-color: dimgray;
}
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {
    background-color: dimgray;
}
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {
    background-color: dimgray;
}
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {
    background-color: dimgray;
}

nav ul li:hover > a {
    color: #FAFAFA;
}
nav ul li ul li a {
    color: #FAFAFA;
}
nav ul li ul li a:hover {
    color: #333;
    background-color: #FAFAFA !important;
}
Ich bedanke mich jetzt schonmal für die hoffentlich nützlichen antworten und ich denke, dass man zu meinem jetzigen Quellcode nur etwas dazu schreiben muss um das zu bekommen was ich gerne hätte.

Geändert von Thorxel (29.05.2015 um 12:43 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.05.2015, 08:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.009
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Code:
<li class="active cat1"> jetzt ist cat1 aktiv </li>
Das musst du im HTML mitgeben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.05.2015, 12:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.04.2015
Beiträge: 12
Thorxel befindet sich auf einem aufstrebenden Ast
Standard

danke aber das funktioniert nicht
Mit Zitat antworten
  #4 (permalink)  
Alt 29.05.2015, 14:04
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo!

Das funktioniert sehr wohl!
Du musst es natürlich auch im CSS entsprechend stylen:

.active{background:red;}

oder

.active a{background:red;}
__________________
Gruß schatzi
Mit Zitat antworten
  #5 (permalink)  
Alt 29.05.2015, 15:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.04.2015
Beiträge: 12
Thorxel befindet sich auf einem aufstrebenden Ast
Standard

okay also es wird auf jeden Fall rot hinterlegt allerdings immer ich will ja eigentlich nur, dass es rot hinterlegt wird wenn ich mich auf der seite befinde
Mit Zitat antworten
  #6 (permalink)  
Alt 29.05.2015, 16:15
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.136
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

du musst die Klasse von Hand ins HTML der jeweiligen Seite einpflegen.
Oder wenn du mit php arbeitest: Mit PHP den aktuellen Link entfernen. Der sog. Deppenlink
Mit Zitat antworten
Antwort

Stichwörter
css, html, menü, menüpunkt

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
IE zeigt Scollbar mit overflow:auto nicht an cat@home CSS 1 12.02.2007 17:26
Browserneurose SimonWpt CSS 39 15.07.2005 11:51
Anker - Problem willi CSS 7 03.03.2005 13:01
Scrollbares Textfeld mit purem CSS Dancer CSS 6 24.01.2005 16:58
xhtml validator error doni (X)HTML 40 17.09.2004 06:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:29 Uhr.