Arbeiten an einer Navigationsleiste und Probleme mit der CSS-Dateiintegration

Momentan arbeite ich an einer einfachen Navigationsleiste, die die Farbe des Textes ändert, wenn Sie auf eine neue Seite klicken (Text auf einer Seite ist also anders Farbe als Text auf einem anderen). Ich habe das Projekt mit mehreren CSS-Dateien gestartet, um das Ergebnis zu erhalten, das ich suche, aber es ist horrend ineffizient. Offensichtlich gibt es keine "if" -Anweisungen in CSS, aber es gibt eine Möglichkeit, eine Aktion aufzurufen, wenn eine bestimmte Seite geladen wird.Arbeiten an einer Navigationsleiste und Probleme mit der CSS-Dateiintegration

HTML-Code

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>First Project</title> 
    <link href="css/main.css" type="text/css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet"> 
</head> 
<body> 
    <div class="header"> 
     <div class="navigation"> 
      <ul> 
       <li class="login"><a href="#">Login</a></li> 
       <li class="shop"><a href="#">Shop</a></li> 
       <li class="wname"><a href="index.html">Website Name</a></li> 
       <li class="contact"><a href="#">Contact</a></li> 
       <li class="about"><a href="#">About</a></li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

CSS-Code

* { 
    box-sizing: border-box; 
} 

.header { 
    text-align: center; 
    width: 100%; 
} 

li { 
    color: rgba(102, 102, 102, .5); 
    padding: 20px; 
    margin: 20px; 
    font-size: 16px; 
    font-family: "Open Sans Condensed", sans-serif ; 
    text-transform: uppercase; 
    display: inline-block; 
} 

.wname { 
    font-size: 32px; 
    color: #F68404; 
    font-weight: 200; 
    border-bottom: solid 1px; 
    border-bottom-color: #F68404; 
} 

li:active { 
    color: #F68404; 
    border-bottom: solid 1px; 
    border-bottom-color: #F68404; 
} 

li:hover { 
    color: #F68404; 
    font-weight: 300; 
} 

/*.jumbotron { 
    background: url("https://newevolutiondesigns.com/images/freebies/city-wallpaper-11.jpg") no-repeat top center; 
    background-size: cover; 
    height: 800px; 
} 

.main { 
    color: rgb(102, 102, 102); 
    font-family: "Open Sans Condensed", sans-serif; 
    text-align: center; 
} 

.btn-main { 
    font-size: 32px; 
    padding: 10px; 
    border: solid 1px #000; 
    background-color: aliceblue; 
    color: #000; 
    border-radius: 10%; 
} 

.btn-main:hover { 
    color: aliceblue; 
    background-color: #000; 
    border: solid 1px aliceblue; 
}*/ 

/*Class Rules for all anchors/hyperlinks*/ 
a { 
    text-decoration: none; 
    color: inherit; 
}

ich Hilfe schätzen würde, Jordan

Quelle

2016-12-18 JordanMorris

Hallo JordanMorris. Willkommen bei Stack Overflow. Sie können auf den Kommentar klicken und einige Kommentare hinterlassen. Sobald Sie eine Antwort erhalten, und es sieht gut aus oder nützlich, sollten Sie es nach 15 Minuten der Veröffentlichung der Frage akzeptieren, als Dank des Dankes. Lass mich in den Kommentaren wissen, ob du die Antwort bekommen hast. –

Wenn ich Sie richtig verstehe, sollten alle Navigationselemente die Farbe auf verschiedenen Seiten ändern? Wenn dies der Fall ist, können Sie dem Navigationselement einfach mehrere (in diesem Fall 2) Klassen hinzufügen. Eine Klasse wird alle gemeinsamen Merkmale für die Navigation (auf allen Seiten) enthalten, und eine andere wird die Farbe für verschiedene Seiten definieren ... Etwas wie dieses: https://jsfiddle.net/rptrhpoo/1/ So können alle definiert werden in einer CSS-Datei werden Sie nur kleine Änderungen in HTML haben ... – sinisake

@sinisake Was zum? –

Ändern Sie diese Regel auch eine aktive Klasse hinzuzufügen:

li.active, 
li:hover { 
    color: #F68404; 
    font-weight: 300; 
}

Und in Ihren einzelnen Seiten verwenden Sie die Klasse für die <li>. Lassen Sie uns sagen, in der Shop-Seite, diesen Code verwenden:

<li class="shop active"><a href="#">Shop</a></li>

Dies liegt daran, Sie sind nicht etwas verwenden, die die Lage überprüft und solche Sachen tut. Außerdem verwenden Sie keine Back-End-Anwendungen, die basierend auf der URL dynamische Header generieren.

Quelle

2016-12-18 20:00:53

Arbeiten an einer Navigationsleiste und Probleme mit der CSS-Dateiintegration

Antwort

Verwandte Themen