Hallo,

ich habe probleme mit folgendem css menü:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<nav id="topNav">                <ul>                    <li><a href=".www.STARTSEITE.de" class="currentpage">Home</a></li>                     <li><a href="#" title="Nav Link 1">Nav Link 2</a>                        <ul>                            <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>                             <li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>                             <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>                             <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>                             <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>                         </ul>                           </li>                   <li><a href="#" title="Nav Link 1">Nav Link 3</a></li>                   <li><a href="#" title="Nav Link 1">Nav Link 4</a></li>                   <li class="last"><a href="#" title="Nav Link 1">Nav Link 5</a></li>               </ul>             </nav>

css:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/* base nav styles */     nav { display:block; margin:0 auto 20px; border:1px solid #222; position:relative; background-color:#6a6a6a; font:16px Tahoma, Sans-serif; }     nav ul { padding:0; margin:0; }     nav li { position:relative; float:left; list-style-type:none; }     nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }     nav li a { display:block; padding:10px 20px; border-left:1px solid #999; border-right:1px solid #222; color:#eee; text-decoration:none; }     nav li a.current { color:white; }     nav li a:focus { outline:none; text-decoration:underline; }     nav li:first-child a { border-left:none; }     nav li.last a { border-right:none; }     nav a span { display:block; float:right; margin-left:5px; }     nav ul ul { display:none; width:100%; position:absolute; left:0; background:#6a6a6a; }     nav ul ul li { float:none; }     nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; }     nav ul ul a:hover { background-color:#555; }     nav ul ul  { background-color:#555; }     nav ul li a.currentpage { color:white; }

und zwar bekomm ich es einfach nicht hin, dass der menü punkt bei aktiver seite weiß wird. Wenn ich meine Startseite aufrufe ist der zugehörige Menüpunkt weiß, leider bleibt er es aber wenn ich eine andere Seite aufrufe?!

Wo liegt der Fehler?

lg

Du musst die class="currentpage" auf jeder Seite entsprechend einfügen. Von selbest ändert da sich nichts.

verstehe jetzt nicht was du damit genau meinst?

Es gibt doch verschiedene Seiten, z.B. index.html und andereSeite.html.

In der index.html steht dann:

HTML-Code:

<nav id="topNav">
<ul>
<!-- -------------------- hier current-page! -------------------- -->
<li><a href=".www.STARTSEITE.de" class="currentpage">Home</a></li>
<!-- -------------------- hier current-page! -------------------- -->
<li><a href="#" title="Nav Link 1">Nav Link 2</a>
<ul>
<li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
<li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
<li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
<li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
<li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
</ul>       
</li>
<li><a href="#" title="Nav Link 1">Nav Link 3</a></li>
<li><a href="#" title="Nav Link 1">Nav Link 4</a></li>
<li class="last"><a href="#" title="Nav Link 1">Nav Link 5</a></li>
</ul>
</nav>

In der andereSeite.html:

HTML-Code:

<nav id="topNav">
<ul>
<li><a href=".www.STARTSEITE.de">Home</a></li>
<!-- -------------------- hier current-page! -------------------- -->
<li><a href="#" title="Nav Link 1" class="currentpage">Nav Link 2</a>
<ul>
<li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
<li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
<li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
<li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
<li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
</ul>       
</li>
<!-- -------------------- hier current-page! -------------------- -->
<li><a href="#" title="Nav Link 1">Nav Link 3</a></li>
<li><a href="#" title="Nav Link 1">Nav Link 4</a></li>
<li class="last"><a href="#" title="Nav Link 1">Nav Link 5</a></li>
</ul>
</nav>

Hoffentlich ist es jetzt klar geworden. Es gäbe durchaus Wege das automatisch zu machen, die würden aber entweder einen totalen Umbau deines Projekts (unnötige Verkomplizierung) erfordern oder Javascript (abschaltbar und ebenfall umständlich)

Gruß javaDeveloper2011

Hi,

ok das ist mir klar geworden Danke! Das Problem ist nur, dass ich mit einem CMS (Drupal) arbeite und auf das Menü im Header eingebunden habe, der auf jeder Seite gleich ist... also bleibt mir doch nur java?

lg

Hallo,

tut mir leid, dass ich dir nur so kurz geantwortet habe, aber ich hatte leider nicht mehr Zeit, und habe dir von Handy geantwortet.

Bevor du es mit Java-Script versuchst, würde ich dir zu PHP raten. Einfach die URL auslesen und einen einfachen Vergleich mit echo="class="currentpage"; als Ergebnis.

PHP-Code:

<?php
$url = $_SERVER['SCRIPT_FILENAME']; ?>
<a href="link1.html" <?php if($url == "link1.html") { echo "class=\"currentpage\""; } ?>>Link 1</a>
<a href="link2.html" <?php if($url == "link2.html") { echo "class=\"currentpage\""; } ?>>Link 2</a>

Ich habe das jetzt geschwind aus dem Bauch heraus geschrieben. Es müsste aber funktionieren.

Hi,

kenne mich damit zwar nicht so aus, aber current-page-highliting müsste drupal doch selbst unterstützen!
Wahrscheinlich hilft dir dieser Thread