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

Navigationsproblem:-)

A

alias.

Neues Mitglied
Hi, viell. könnt ihr mir ja helfen. Also, ich hab eine Navigation in CSS/HTML gebaut, die besteht aus Bildern die in CSS hinterlegt sind. Mein HTML Code ist nun wie folgt:

<div class="person"><a href="person.html"></a> </div>
<div class="kontakt"><a href="kontakt.html"></a> </div>

soweit so gut. hab dann hover effekte ect. Meine Frage ist wie ich der HTML Seite sowas wie id=current zuweise.

Danke im Vorraus
 
Willkommen im Forum!

Ich nehme an, du möchtest den aktiven Menüpunkt mit einer zusätzlichen CSS-Klasse/ID versehen? Wenn du das nicht für jede Seite von Hand machen möchtest, bietet sich die Generierung der Navigation durch eine serverseitige Scriptsprache (wie zum Beispiel PHP an).

Je nach URL kann so dynamisch das passende Element hervorgehoben werden.

Ein Beispiel:

PHP: 
<?php

$menuData = array(
    ''         => 'Home',
    'projects' => 'Projekte',
    'about'    => 'Über',
    'contact'  => 'Kontakt'
);

$_GET['path'] = (isset($_GET['path'])) ? $_GET['path'] : '';

if (!in_array($_GET['path'], array_keys($menuData))) {
    $_GET['path'] = 'error';
}

?><!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Demo</title>
        <style type="text/css">

li.active {
    background: #fcc;
}

        </style>
    </head>

    <body>
        <ul>
        <?php foreach ($menuData as $path => $title): ?>
            <?php
            $classes = '';
            if ($_GET['path'] == $path) {
                $classes .= ' active';
            }
            ?>
            <li class="<?php echo htmlspecialchars($classes); ?>">
                <a class="<?php echo htmlspecialchars($classes); ?>"
                   href="<?php
                        if ($path === '') {
                            echo './';
                        } else {
                            echo '?' . http_build_query(array('path' => $path));
                        }
                   ?>">
                    <?php echo htmlspecialchars($title); ?>
                </a>
            </li>
        <?php endforeach; ?>
        </ul>
    </body>

</html>
 
also, hier nochmal das gesamte problem.
Wenn ich auf der seite kontakt bin soll in der navi auch der zustand zusehen sein. bisher hab ich einen hover effekt der funktioniert...leider wird active oder so nicht erkannt un genau das ist das problem.
HTML:
Code: 
 <div class="kontakt"><a href="kontakt.html"></a> </div>
CSS:
Code: 
div.kontakt {
    height: 35px;
    width: 154px;
    margin-left:0px;
    margin-top:-35px;
} 
div.kontakt a{background-image:url(grafiken/kontakt.png); height: 35px;width: 154px;display:block; } 
div.kontakt a:hover {background-image:url(kontakt_hover.png);} 
div.kontakt a:active {background-image:url(kontakt_active.png);}
 
Hallo.

Bist du sicher das active nicht erkannt wird?
Active ist nur solange active solange die Maustaste gedrückt wird. Sobald du die Maustaste los lässt wird active nicht mehr angezeigt
Diese Funktion ist also nicht dazu da die Seite anzuzeigen auf der du dich gerade befindest..

Gruss
Elroy
 
Hallo.

mermshaus hat dir in Beitrag 2 bereits einen Hinweis gegeben.
Eine andere Art der Umsetzung ist mir leider auch nicht bekannt.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben