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

Probleme mit Semantic-Ui Navigation

M

mapex

Neues Mitglied
Hallo Leute,

ich bin neu hier und ich hoffe, dass ich mit meinem Thema in der richtigen Kategorie gelandet bin.. Ich bin - was die Website-Programmierung betrifft - noch ein ziemlicher Anfänger und hoffe, dass ihr mir mit meinem Problem weiterhelfen könnt.

Ich habe in meine Website ein Navigations-Menü aus der Semantic-Ui library eingebaut. Dies schaut nun so aus:

<div class="ui secondary pointing menu">
<a class="active item">Home</a>
<a class="item"> Messages</a>
<a class="item">Friends</a>
</div>

Eigentlich eine relativ einfach Geschichte, ich habe allerdings nun keine Ahnung, wie ich es hinbekomme, dass je nach aufgerufener Unterseite, das dazugehörige Element in der Navigationsleiste hervorgehoben wird (was ja über class="active item" funktioniert). Theoretisch müsste man ja auf der jeweilig aufgerufenen Seite irgendeinen Befehl vermerken, der das jeweilige item auf acitve schaltet.. Oder bin ich da völlig auf dem Holzweg?

Ich hoffe ihr könnt mir helfen und bin über jeden Rat sehr dankbar!
 
Werbung:
Erstmal ist das semantisch falsch. Eine Navigation baut man mit unsortierten Listen und nicht mit Divs.

Was deine Frage betrifft: Das lässt sich z.B. dadurch erreichen, dass man mit PHP die URL extrahiert und dem korrespondieren Link eine Klasse .active zuweist.
 
Zuletzt bearbeitet:
Alles klar vielen herzlichen Dank erstmal. Da ich mit PHP noch zirka nichts gemacht habe, kann ich damit leider noch nicht wirklich viel anfangen.. Ist das denn kompliziert? Würde mich sehr freuen, wenn du mir da nochmal weiterhelfen könntest wie so etwas konkret aussieht (falls es nicht zu aufwändig ist).
 
Werbung:
Link markieren mit css
Code: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aktiven Link hervorheben mit CSS </title>
<style type="text/css">
* {
margin:0;
padding:0;
}


#navi ul , #navi li {
list-style:none;
width:200px;
position:relative;
}

#navi a {
text-decoration:none;
color:#000;
display:block; position:relative;
}

/* Nachfahrselektoren deklarieren */

#home #navi-home a ,
#kontakt #navi-kontakt a ,
#impressum #navi-impressum a{
color:#f00;
}


</style>
</head>

<body id="home">
<h2>Startseite</h2>
<div id="navi"> 
<ul>
  <li id="navi-home" ><a href="index.htm">Startseite</a></li>
  <li id="navi-kontakt"><a href="kontakt.htm">Kontakt</a></li>
  <li id="navi-impressum"><a href="impressum.htm">Impressum</a></li>
</ul>
</div>


</body>
</html>

<body id="home"> Eintrag für index.html
<body id="kontakt"> Eintrag für kontakt.html
<body id="impressum"> Eintrag für impressum.html

Beispiel
http://www.gipspferd.de/forumhilfe/aktuellen-link-makieren-mit-css/

Mit PHP Anleitung
http://www.gipspferd.de/css/anleitung/a4/a4.php
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben