| Autor |
Nachricht |
-
dennis14e
Premium
Wohnort: Bergneustadt
|
 20.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  ______________ 
Meine Seiten sind aktuell aufgrund von zeitlichen Gründen pausiert. |
|
|
↑
|
|
 |
-
brainice
|
20.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 |
|
|
↑
|
|
|
|
|
20.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 |
|
|
↑
|
|
|
-
dennis14e
Premium
Wohnort: Bergneustadt
|
20.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. |
|
|
↑
|
|
|
|
|
20.02.2012 um 23:49 (UTC)
Titel: |
|
|
Schön, dass einer die Sufu bedienen kann und sich bemüht. 
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 |
|
|
↑
|
|
|
-
dennis14e
Premium
Wohnort: Bergneustadt
|
21.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
MfG Dennis14e ______________
Meine Seiten sind aktuell aufgrund von zeitlichen Gründen pausiert. |
|
|
↑
|
|
|
|
|
22.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.  ______________ 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 |
|
|
↑
|
|
|
-
dennis14e
Premium
Wohnort: Bergneustadt
|
24.02.2012 um 18:43 (UTC)
Titel: |
|
|
Ich schätze mal ich bin auf dem holzfreien Holzweg..
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
MfG Dennis14e ______________
Meine Seiten sind aktuell aufgrund von zeitlichen Gründen pausiert. |
|
|
↑
|
|
|
|
|
24.02.2012 um 23:29 (UTC)
Titel: |
|
|
Naja, da hattest du das eine oder andere falsch verstanden.
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> |
|
|
↑
|
|
|
-
dennis14e
Premium
Wohnort: Bergneustadt
|
25.02.2012 um 12:28 (UTC)
Titel: |
|
|
Danke Danke Danke! Klappt super!
MfG Dennis14e ______________
Meine Seiten sind aktuell aufgrund von zeitlichen Gründen pausiert. |
|
|
↑
|
|
|
|
|
25.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
-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 |
|
|
↑
|
|
|
|
