Navigation Spielereien verstehen

$mysql=

Ich habe mir endlich die navigation semantisch korrekt als Liste umgesetzt, nun möchte ich das nur wenn man klickt der border unten 2px breit/hoch ist, wenn man dann wieder woanders hinklickt soll der border beim letzten Link wegegehn und beim nächsten Link bleiben, kein hover sondern bei KLICK.
Ich kenne

a:link, a:visited, a:hover, a:active

Die Reihenfolge ist glaub auch wichtig, bitte sagt mal wie das geht?

Die Navi wird via <?php include('html_inc/steuerung.html'); ?>
in das element <ul id="steuerung"></ul> eingebunden..

HTML

<li><a title="Zur Startseite" href="index.php">lorem ipsum</a></li>
<li><a title="lorem ipsum" href="site.php">lorem ipsum</a></li>
<li><a title="lorem ipsum" href="site1.php">lorem ipsum</a></li>
<li><a title="lorem ipsum" href="site2.php">lorem ipsum</a></li>
<li><a title="lorem ipsum" href="site3.php">lorem ipsum</a></li>

Die Css sieht dabei wie folgt aus:

Code

ul#steuerung {
font-size: 13px;
font-family: serif;
letter-spacing: 2px;
color: #414141;
text-align: center;
padding: 5px 0;
}
ul#steuerung li {
display: inline;
margin-left: -4px;
}
ul#steuerung li a {
padding: 3px 25px;
color: #414141;
text-decoration: none;
border-bottom: 1px solid #60a5c4;
}
ul#steuerung li a:hover {
color: #414141;
border-bottom: 2px groove #414141;
}
ul#steuerung li a:active {
color: #414141;
border-bottom: 2px groove #414141;
}

Alles anzeigen

Grevas

Die Pseudeklasse :visited wird aus Sicherheitsgründen nicht mehr verwendet.

Mit HTML /CSS geht das nur, wenn du die Inhalte per JS / Ajax lädst. Normal wird die Seite aber neugeladen woraus folgt, damit geht es nicht...
Du musst mit PHP den "aktiven" (also derzeit verwendeten) Link hervorheben (mit z.B. einer extra CSS Klasse oder ID. Außer du arbeitest ohne PHP, musst du es per Hand in jeder Seite einfügen.

Wenn du Firebug hast, schau dir die Navi auf der Seite an (die Startseite selbst wird nicht markiert, erst wenn man die Seite tatsächlich wechselt): http://werderwichtel.com/

Wenn du kein Firebug hast: besorg dir Firebug

/P.S.:

Hier meine Navi Funktion die ich derzeit verwende (für eine Navigation mit 3 Ebenen)

PHP

function create_navi($site) {
    global $abs_path;
    include "settings/navi.php";

    $content = "<div id=\"navi\">
    <ul>";
    $i = 0;
    foreach($main_menu as $href => $text) {
        if($site == $href)
            $selected = true;
        if(isset($sub_menu[$href])) {
            $subs = "<ul>";
            foreach($sub_menu[$href] as $sub_href => $sub_text) {
                if($site == $sub_href) $selected = true;

                if(isset($subsub_menu[$sub_href])) {
                    $subsubs .= "<ul>";
                    foreach($subsub_menu[$sub_href] as $subsub_href => $subsub_text) {
                        if($site == $subsub_href) $selected = true;
                        $subsubs .= "<li><a href=\"$abs_path$subsub_href\">$subsub_text</a></li>";
                    }
                    $subsubs .= "</ul>";
                }
                if(isset($subsubs)) $add = ' class="sub_exists"';
                $subs .= "<li><a href=\"$abs_path$sub_href\"$add>$sub_text</a>$subsubs</li>";
                unset($subsubs);
                unset($add);
            }
            $subs .= "</ul>";
        }
        if($selected) $link_add = ' id="link_selected"';
        if(isset($subs)) $link_add .= ' class="sub_exists"';
        if(0 == $i) $link_add .= ' style="border-left: none;"';
        if($href == "Home") $href = "$abs_path";
        $content .= "<li><a href=\"$href\"$link_add>$text</a>$subs</li>" ;
        unset($subs);
        unset($selected);
        unset($link_add);
        $i++;
    }
    $content .= "    </ul>
</div>
<div style='clear: both;'></div>";
    return $content;

Alles anzeigen

$site ist die aktuelle Seite (deren Parameter).

In der includierten navi.php wird ein Array gebaut (derzeit per Hand, da die Seite ohne eine Datenbank auskommen muss):

PHP

main_menu = array(
"Home" => "Startseite",
"Href1" => "Href 1",
"Href4" => "Href 4",
"Href5" => "Href 5",
"Href9" => "Href 9"
);
/*
 * SUB MENU
 */
$sub_menu['Href1'] = 
    array(
        "SubHref1" => "Sub Link 1");
/*
 * SUB-SUB MENU
 */
$subsub_menu['SubHref1'] =
    array(
    "SubSubHref 1" => "SubSub Link 1",
    "SubSubHref 2" => "SubSub Link 2");

Alles anzeigen

sejuma

Link der aktiven Seite hervorheben

$mysql=

Auf der Seite ist es aber viel leichter beschrieben als im Codeschnipsel von Grevas, werde aber beide Lösungen testen..

Hier stehts ja auch, das wusste ich gar nicht?!

Zitat

Hierzu muss man wissen, dass a:active lediglich den Linkzustand im Moment des Anklickens mit der Maus beschreibt, und zwar nur so lange, wie mit der Maus auf den Link "gedrückt" wird.

auf ohne-css.gehts-gar.net .. gibts-ja-fast-alles.net (nedde?):D

Grevas

Das was dir Sejuma gepostet ist aber eben nur der CSS Teil o_O bei mir gehts auch darum, wie man rausfindet welche Seite nun aktiv ist - bei einer dynamischen Seite!... Da brauchste dich nicht wundern, wenn meins komplizierter ist.

koslowski

Hi,

wenn man bei einer Site die navi per include einbindet um sich Schreibarbeit zu sparen, wäre es natürlich schön wenn bei der aktuellen Seite a gegen strong automatisch ausgetauscht wird, um den Deppenlink (Link der auf sich selber zeigt) zu vermeiden.

Das dafür notwendige PHP-Script ist ausgesprochen einfach und wirkungsvoll.

$mysql=

ich wollt ja eigentlich auch nur per css die seite hervorheben, für was ein php script wenns auch mit css geht?

Auf http://werderwichtel.com/ ist es aber genauso wie ich es mir vorgestellt habe, danke:D

[EDIT] Kann ich das http://www.ohne-css.gehts-gar.net/0016.php bei includeter navigation gar nicht verwenden??

$mysql=

Zitat von Grevas

Die Pseudeklasse :visited wird aus Sicherheitsgründen nicht mehr verwendet.

Mit HTML /CSS geht das nur, wenn du die Inhalte per JS / Ajax lädst. Normal wird die Seite aber neugeladen woraus folgt, damit geht es nicht...
Du musst mit PHP den "aktiven" (also derzeit verwendeten) Link hervorheben (mit z.B. einer extra CSS Klasse oder ID. Außer du arbeitest ohne PHP, musst du es per Hand in jeder Seite einfügen.

Wenn du Firebug hast, schau dir die Navi auf der Seite an (die Startseite selbst wird nicht markiert, erst wenn man die Seite tatsächlich wechselt): http://werderwichtel.com/

Wenn du kein Firebug hast: besorg dir Firebug

/P.S.:

Hier meine Navi Funktion die ich derzeit verwende (für eine Navigation mit 3 Ebenen)

PHP

function create_navi($site) {
    global $abs_path;
    include "settings/navi.php";
 
    $content = "<div id=\"navi\">
    <ul>";
    $i = 0;
    foreach($main_menu as $href => $text) {
        if($site == $href)
            $selected = true;
        if(isset($sub_menu[$href])) {
            $subs = "<ul>";
            foreach($sub_menu[$href] as $sub_href => $sub_text) {
                if($site == $sub_href) $selected = true;
 
                if(isset($subsub_menu[$sub_href])) {
                    $subsubs .= "<ul>";
                    foreach($subsub_menu[$sub_href] as $subsub_href => $subsub_text) {
                        if($site == $subsub_href) $selected = true;
                        $subsubs .= "<li><a href=\"$abs_path$subsub_href\">$subsub_text</a></li>";
                    }
                    $subsubs .= "</ul>";
                }
                if(isset($subsubs)) $add = ' class="sub_exists"';
                $subs .= "<li><a href=\"$abs_path$sub_href\"$add>$sub_text</a>$subsubs</li>";
                unset($subsubs);
                unset($add);
            }
            $subs .= "</ul>";
        }
        if($selected) $link_add = ' id="link_selected"';
        if(isset($subs)) $link_add .= ' class="sub_exists"';
        if(0 == $i) $link_add .= ' style="border-left: none;"';
        if($href == "Home") $href = "$abs_path";
        $content .= "<li><a href=\"$href\"$link_add>$text</a>$subs</li>" ;
        unset($subs);
        unset($selected);
        unset($link_add);
        $i++;
    }
    $content .= "    </ul>
</div>
<div style='clear: both;'></div>";
    return $content;

Alles anzeigen

$site ist die aktuelle Seite (deren Parameter).

In der includierten navi.php wird ein Array gebaut (derzeit per Hand, da die Seite ohne eine Datenbank auskommen muss):

PHP

main_menu = array(
"Home" => "Startseite",
"Href1" => "Href 1",
"Href4" => "Href 4",
"Href5" => "Href 5",
"Href9" => "Href 9"
);
/*
 * SUB MENU
 */
$sub_menu['Href1'] = 
    array(
        "SubHref1" => "Sub Link 1");
/*
 * SUB-SUB MENU
 */
$subsub_menu['SubHref1'] =
    array(
    "SubSubHref 1" => "SubSub Link 1",
    "SubSubHref 2" => "SubSub Link 2");

Alles anzeigen

Kann ich die Untermenüs auch weglassen, so etwas habe ich nicht?

5:51Uhr: Nach langen versuchen die ganze nacht hindurch muss ich nun gleich übermüdet zur Arbeit, ich habe aber ein ganz simplem Trick vverwendet um das hinzubekommen. Einfach den A-Tag auf den entsprechenden Seiten entfernen, dann sieht man auch auf welcher seite man gerade ist. Allerdings habe ich includete Navigation(testweise entcludet:?), funktioniert, auch das Beispiel von ohne css geht gar net klappt das aber beide Methoden nicht bei includeteter Navigation:x

$mysql=

dankeschön für die nichthilfe, einfach code hinklatschen und dann nicht mehr reinschauen.

unregistriert ging es immer schneller

Grevas

Ja, das ganze funktioniert auch ohne ein Untermenü - wird ja überprüft ob die Variable dafür gesetzt ist oder nicht.

Bei der Funktion oben wird eine id gesetzt (id="link_selected" ), das kannst du dann so stylen wie du möchtest...

Die Funktion gibt den Inhalt auch zurück (return $content;), wird nicht direkt ausgegeben... Wenn du es sofort ausgeben willst

PHP

$site = $_GET['site'];
echo create_navi($site);

Zitat von $mysql=

dankeschön für die nichthilfe, einfach code hinklatschen und dann nicht mehr reinschauen.

unregistriert ging es immer schneller

Hilf dir halt mal selbst, ich bin nicht 24/7 im Forum! Ob du es glaubst oder nicht, auch ich hab an nem Sonntagabend was besseres zu tun.
Wenn du kein PHP kannst, machs halt mit HTML only. Mehr werd ich dir jetzt auch net erklären...

sejuma

Zitat von $mysql=

auf ohne-css.gehts-gar.net .. gibts-ja-fast-alles.net (nedde?):D

Eben:
Link bei includeter navi hervorheben

$mysql=

Zitat von sejuma

Eben:
Link bei includeter navi hervorheben

ich habe das nun mal mit kleinen documenten zum testen local erstellt. Irgendwie ist der Link zwar aktiv aber anders als man denkt

ich hab eine index.php

PHP

<?php $thisPage="startseite"; ?>
<!doctype html><html>
<head>
    <title>Titel</title>
    <meta charset="ISO-8859-1" />
    <link href="css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Startseite</h1>
<?php include('inc/menue.php'); ?>
</body>
</html>

Alles anzeigen

eine seite2.php

PHP

<?php $thisPage="seite2"; ?>
<!doctype html><html>
<head>
    <title>Titel</title>
    <meta charset="ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="css.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
<h1>Seite2</h1>
    <?php include('inc/menue.php'); ?>
</body>
</html>

Alles anzeigen

die includete menue.php

PHP

<ul>
    <li>
    <?php
        if($thisPage=="startseite") {
            echo "id=\"aktiv\"";
        }
    ?>
            <a href="index.php">Startseite</a>
    </li>
    <li>
    <?php
        if($thisPage=="seite2") {
            echo "id=\"aktiv\"";
        }
    ?>
            <a href="seite2.php">Seite2</a>
    </li>
</ul>

Alles anzeigen

und die css datei:

Code

#menue #aktiv a {
color: #fff;
background-color: #f00;
font-weight: bold;
}

So sieht der aktive Link in der webseite aus, irgendwie nicht wie gewünscht. Was läuft verkehrt???

HTML

id="aktiv" Startseite

Unregistriert

PHP

<ul id="menue">
    <li <?php if($thisPage=="startseite") { echo "id=\"aktiv\""; } ?>>
           <a href="index.php">Startseite</a>
    </li>
    <li <?php if($thisPage=="seite2") { echo "id=\"aktiv\""; } ?>>
            <a href="seite2.php">Seite2</a>
    </li>
</ul>

$mysql=

Zitat von Unregistriert

PHP

<ul id="menue">
    <li <?php if($thisPage=="startseite") { echo "id=\"aktiv\""; } ?>>
           <a href="index.php">Startseite</a>
    </li>
    <li <?php if($thisPage=="seite2") { echo "id=\"aktiv\""; } ?>>
            <a href="seite2.php">Seite2</a>
    </li>
</ul>

Herzlichen Dank lieber Unbekannter;)

Tags