Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag20.02.2012 um 17:54 (UTC)    
Titel: CSS Design - Aktuelle Seite im Menü hervorheben

Hallo Community!

Ich suche ein Script, mit dem im Menü die aktuelle Seite hervorgehoben wird. Eine CSS Klasse namens "active" existiert schon.

Mein Menü in vereinfachten Version:
Code:
<ul class="hmenu">
<li><a href="Seite1.htm">Hauptseite 1</a>
   <ul>
      <li><a href="Seite2.htm">Unterseite 1</a></li>
      <li><a href="Seite3.htm">Unterseite 2</a></li>
   </ul>
</li>
<li><a href="Seite4.htm">Hauptseite 2</a></li>
</ul>


Wenn ich nun im a-Tag einer Hauptseite die Klasse "active" setze, wird dieser Menüpunkt hervorgehoben.

Was ich möchte:
Wenn ich auf Seite1.htm bin, soll im a-Tag des Menüs die Klasse active gesetzt werden, Sprich: Die Seite ist hervorgehoben.
Wenn ich auf einer Unterseite wie zB Seite2.htm oder Seite3.htm bin, soll active im a-Tag der Hauptseite Seite1.htm gesetzt werden.

Hat jemand so ein Script?
Ich selber kann sowas leider nicht machen, da ich nicht besonders viel Ahnung von Javascript habe.

MfG Dennis14e

PS: Nicht wundern das meine Internetseite gerade solange zum Laden braucht.
Da Free Award gerade eine kleine Downtime hat, können die Banner nicht gefunden werden Smile
______________

Meine Seiten sind aktuell aufgrund von zeitlichen Gründen pausiert.
Beitrag20.02.2012 um 18:30 (UTC)    
Titel:

Mit jQuery könnte man das machen!
--> .removeClass();
--> .addClass();

Versuche einmal:
Code:

<script src="http://code.jquery.com/jquery-latest.js"></script>


 <!-- NAVIGATION hier einfügen -->


<script>


   $(".NAVBUTTONCLASS").click(function(){
       $("li.NAVBUTTONCLASS").removeClass(".ACTIVE");
       $(this).addClass(".ACTIVE");
   });
</script>


.NAVBUTTONCLASS = Class des Buttons einfügen!
.ACTIVE = Class von Active


(Habs nicht ausprobiert, aber vielleicht funktionierst ja!) --> einen Versuch ist es Wert
Beitrag20.02.2012 um 18:34 (UTC)    
Titel:

Hallo,

Warum verwendest du nicht einfach die standard Navigation? Dort erhält der entsprechende Menüpunkt automatisch die Klasse checked_menu.

dennis14e hat Folgendes geschrieben:
Ich suche ein Script

Für Suchanfragen gibt es den Forenbereich Ich suche. Dort verschiebe ich den Thread dann mal hin.

Du kannst dir das aber ganz einfach selbst machen. Hole einfach alle Menüpunkte, vergleiche die aktuelle URL mit der URL, auf welche der Menüpunkt verlinkt und bei Übereinstimmung weist du dann die gewünschte Klasse zu.
Für das Design red habe ich es hier schon mal gemacht. Das Prinzip ist das gleiche. Falls dir der Ansatz fehlt wirst du das Script mit Hilfe der Sufu finden.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag20.02.2012 um 23:07 (UTC)    
Titel:

Okay. Hab es soweit hinbekommen, siehe hier.

Der Code lautet:
Code:
<script type="text/javascript">
var welcomePage = 'Startseite.htm';
var nameOfPage = 'http://www.dennis14e-test.de.tl/';

//Ab hier nichts mehr ändern
var i;
var nrOfWP;
var found = false;
var container = document.getElementById('nav-link');
var links = container.getElementsByTagName('a');

for(i = 0; (i < links.length) && (!found); i++)
{
if((links[i].className == 'nav-button') && (window.location.href.toLowerCase().indexOf(links[i].href.toLowerCase()) != -1))
{
links[i].className = links[i].className + ' active';

found = true;
}
else
{
if((links[i].className == 'nav-button') && (links[i].href.toLowerCase().indexOf(welcomePage.toLowerCase()) != -1) && (links[i].href.toLowerCase().indexOf(nameOfPage.toLowerCase() + '.') != -1))
nrOfWP = i;
}
}

if(!found)
links[nrOfWP].className = links[nrOfWP].className + ' active';
</script>


Soweit so gut. Doch wie kann ich machen, dass zB Die Hauptseite Startseite.htm markiert ist, wenn man auf der Unterseite Kontakt.htm ist?

MfG Dennis14e
______________

Meine Seiten sind aktuell aufgrund von zeitlichen Gründen pausiert.
Beitrag20.02.2012 um 23:49 (UTC)    
Titel:

Schön, dass einer die Sufu bedienen kann und sich bemüht. Very Happy

Um die Elternseite auszuwählen, müsstest bevor du die Klasse zuweist prüfen, ob die Seite eine Unterseite ist. Dafür gibt es mehrere Möglichkeiten.

Du kannst prüfen ob Das entsprechende Elternelement existiert und wenn ja diesem die Klasse zuweisen.
Das einfachste wäre aber, dass du den Unterseiten einfach eine Klasse gibst z.B. subpage und bevor du die Klasse active zuweist prüfst, ob das Element zu dieser Klasse gehört. Wenn ja wählst du wieder das entsprechende Elternelement aus, ansonsten bist du ja bereits richtig.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag21.02.2012 um 12:50 (UTC)    
Titel:

Ich weiß zwar wie du das meinst, doch wie ich im ersten Post schon geschrieben habe, habe ich nicht viel Ahnung von Javascript.
Könntest du mir vielleicht bitte das Script wenn möglich mit Erklärung was gemacht wird (damit ichs verstehe) erweitern? Wäre sehr nett von dir Smile

MfG Dennis14e
______________

Meine Seiten sind aktuell aufgrund von zeitlichen Gründen pausiert.
Beitrag22.02.2012 um 00:31 (UTC)    
Titel:

Ich glaube, das bekommst du auch selbst hin.

Wie gesagt, am einfachsten ist es, wenn du den Unterpunkten eine eigene Klasse gibst z.b. subpage:
Zitat:
<a href="http://www.dennis14e.de.tl/Kontakt.htm" class="subpage">


Hier wird geprüft, um welchen Menüpunkt es sich handelt und ob es der aktuell ausgewählte ist:
Zitat:
if((links[i].className == 'nav-button') && (window.location.href.toLowerCase().indexOf(links[i].href.toLowerCase()) != -1))
{
links[i].className = links[i].className + ' active';

found = true;
}

Mit dem blauen gibst du dem aktuellen Menüpunkt die Klasse active. Bevor du das machst, prüfst du ob der Menüpunkt zu Klasse subpage gehört. Sollte dies der Fall sein, gibst du nicht ihm die Klasse active sondern dem ersten Kind seines dritten Elternelementes.

Das Elternelement kannst du über:
Zitat:
links[i].parentNode

ansteuern. Fügst du ein weiteres .parentNode an, bekommst du das Elternelemet des Elternelementes usw.
Das erste Kind kannst du mit:
Zitat:
element.firstChild ansteuern


Versuch es mal, so schwer ist das nicht. Wink
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag24.02.2012 um 18:43 (UTC)    
Titel:

Ich schätze mal ich bin auf dem holzfreien Holzweg.. Very Happy
Bekomme es nicht ganz hin..

Der Code:
Code:
<script type="text/javascript">
var welcomePage = 'Startseite.htm';
var nameOfPage = 'http://www.dennis14e-test.de.tl/';

//Ab hier nichts mehr ändern
var i;
var nrOfWP;
var found = false;
var container = document.getElementById('nav-link');
var links = container.getElementsByTagName('a');

for(i = 0; (i < links.length) && (!found); i++)
{
if((links[i].className == 'subpage') && (window.location.href.toLowerCase().indexOf(links[i].href.toLowerCase()) != -1))
{
links[i].className = links[i].element.firstChild.parentNode.parentNode.parentNode + ' active';

found = true;
}
else
{
if((links[i].className == 'subpage') && (links[i].href.toLowerCase().indexOf(welcomePage.toLowerCase()) != -1) && (links[i].href.toLowerCase().indexOf(nameOfPage.toLowerCase() + '.') != -1))
nrOfWP = i;
}

if((links[i].className == 'page') && (window.location.href.toLowerCase().indexOf(links[i].href.toLowerCase()) != -1))
{
links[i].className = links[i].className + ' active';

found = true;
}
else
{
if((links[i].className == 'page') && (links[i].href.toLowerCase().indexOf(welcomePage.toLowerCase()) != -1) && (links[i].href.toLowerCase().indexOf(nameOfPage.toLowerCase() + '.') != -1))
nrOfWP = i;
}
}

if(!found)
links[nrOfWP].className = links[nrOfWP].className + ' active';
</script>


Habe nav-button in page umbenannt damits besser passt - Nicht wundern Wink

MfG Dennis14e
______________

Meine Seiten sind aktuell aufgrund von zeitlichen Gründen pausiert.
Beitrag24.02.2012 um 23:29 (UTC)    
Titel:

Naja, da hattest du das eine oder andere falsch verstanden. Wink

Code:
<script type="text/javascript">
var welcomePage = 'Startseite';
var nameOfPage = 'dennis14e-test';

//Ab hier nichts mehr ändern
var i;
var nrOfWP;
var found = false;
var container = document.getElementById('nav-link');
var links = container.getElementsByTagName('a');

for(i = 0; (i < links.length) && (!found); i++)
{
if((links[i].className.indexOf('page') != -1) && (window.location.href.toLowerCase().indexOf(links[i].href.toLowerCase()) != -1) && (links[i].href.toLowerCase().indexOf(nameOfPage.toLowerCase() + '.') != -1))
{
if(links[i].className.indexOf('subpage') != -1)
links[i].parentNode.parentNode.parentNode.getElementsByTagName('a')[0].className += ' active';
else
links[i].className += ' active';

found = true;
}
else
{
if((links[i].className.indexOf('page') != -1) && (links[i].href.toLowerCase().indexOf(welcomePage.toLowerCase()) != -1) && (links[i].href.toLowerCase().indexOf(nameOfPage.toLowerCase() + '.') != -1))
nrOfWP = i;
}
}

if(!found){
links[nrOfWP].className += ' active';
}
</script>

______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag25.02.2012 um 12:28 (UTC)    
Titel:

Danke Danke Danke! Klappt super!

MfG Dennis14e
______________

Meine Seiten sind aktuell aufgrund von zeitlichen Gründen pausiert.
Beitrag25.02.2012 um 12:59 (UTC)    
Titel:

dennis14e hat Folgendes geschrieben:
Danke Danke Danke! Klappt super!

Na dann - Danke an o-4-n und danke für die Rückmeldung Smile

-CLOSED-

Gruß,

TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de