Navigation will nicht aktiv bleiben.

Grotesque · 26.09.2012

Hallo,

ich habe ein kleines Problem und zwar bekomme ich es einfach nicht hin, dass meine Navigation aktiv bleibt, wenn ich auf den jeweiligen Menüpunkt klicke. Habe es moment mit a:active probiert, aber es funktioniert nicht..

Hier ist mein Code:

Code:

 <div id="navigation">
    <ul>
      <li id="nav-home"><a href="http://www.geld-und-welt.de">Home</a></li>
      <li id="nav-geldundwelt"><a href="http://www.geld-und-welt.de/category/allgemein/">Geld & Welt</a></li>
      <li id="nav-artoflife"><a href="http://www.geld-und-welt.de/category/artoflife/">Art of Life</a></li>
      <li id="nav-netzgefluester"><a href="http://www.geld-und-welt.de/category/netzgefluester/">Netzgeflüster</a></li>
      <li id="nav-technik"><a href="http://www.geld-und-welt.de/category/technik/">Technik</a></li>
      <li id="nav-sparfoeg"><a href="http://www.geld-und-welt.de/category/sparfoeg/">SPARföG</a></li>
      <li id="nav-marketing"><a href="http://www.geld-und-welt.de/category/marketing/">Marketing</a></li>
      <li id="nav-spielundspass"><a href="http://www.geld-und-welt.de/category/spielundspass/">Spiel & Spaß</a></li>
    </ul>
  </div>

und css:

Code:

 #navigation {
width: 980px;
height: 50px;
overflow: hidden;
}
 
#navigation ul {
list-style: none;
}
 
#navigation li {
display: inline;
float: left;
}
 
#navigation a {
display: block;
width: 122.5px;
height: 50px;
background-image: url(images/nav-bar.png);
text-indent: -5000px;
}


 
#nav-home a {background-position: 0 0;}
#nav-home a:hover {background-position: 0 -50px;}
#nav-home a:active {background-position: 0 -100px;}

#navigation #nav-geldundwelt a {background-position: -122.5px 0;}
#navigation #nav-geldundwelt a:hover {background-position: -122.5px -50px;}
#navigation #nav-geldundwelt a:active {background-position: -122.5px -100px;}

#nav-artoflife a {background-position: -245px 0;}
#nav-artoflife a:hover {background-position: -245px -50px;}
#nav-artoflife a:active {background-position: -245px -100px;}

#nav-netzgefluester a {background-position: -367.5px 0;}
#nav-netzgefluester a:hover {background-position: -367.5px -50px;}
#nav-netzgefluester a:active {background-position: -367.5px -50px;}

#nav-technik a {background-position: -490px 0;}
#nav-technik a:hover {background-position: -490px -50px;}
#nav-technik a:active {background-position: -490px -100px;}

#nav-sparfoeg a {background-position: -612.5px 0;}
#nav-sparfoeg a:hover {background-position: -612.5px -50px;}
#nav-sparfoeg a:active {background-position: -612.5px -100px;}

#nav-marketing a {background-position: -735px 0;}
#nav-marketing a:hover {background-position: -735px -50px;}
#nav-marketing a:active {background-position: -735px -100px;}

#nav-spielundspass a {background-position: -857.5px 0;}
#nav-spielundspass a:hover {background-position: -857.5px -50px;}
#nav-spielundspass a:active {background-position: -857.5px -100px;}

Ich habe leider auch nach langer Suche keine richtige Lösung gefunden. Vielleicht könnt ihr mir helfen?

cebito · 26.09.2012

AW: Navigation will nicht aktiv bleiben.

a:active wirkt auch nur im Moment des Klickens. Danach landest du ja auf einer anderen Seite. Gib auf jeder Seite dem entsprechenden Menüpunkt eine Klasse und style diese.

simonpicos · 26.09.2012

AW: Navigation will nicht aktiv bleiben.

Der Status :active beschreibt nur den Zustand während die Maustaste runtergedrückt ist. Sobald du sie loslässt schaltet sich wieder der normalzustand ein.

Für einen wirklich "aktiven" Zustand musst du eine extra Klasse anlegen, die per js aktiviert wird bei klick auf den Menüpunkt.

edit: bzw gebe einfach auf jeder Seite dem entsprechenden Menüpunkt die Klasse.

edit2: mann, cebito war schneller

Grotesque · 27.09.2012

AW: Navigation will nicht aktiv bleiben.

Hallo,

vielen dank für eure Antworten.
Das Problem ist jetzt, ich weiß nicht wie ich auf die einzelnen Seiten zugreifen kann um eine Klasse dafür zu hinterlassen. Ich nutze Wordpress.
Mach ich das dann mittels einer If-Anweisung im HTML Code?

Mit js kenne ich mich leider gar nicht aus.

Sorry für's zu-doof-anstellen :-/

Pixelaner · 27.09.2012

AW: Navigation will nicht aktiv bleiben.

Hey,

wenn du die Navigation mit der Funktion wp_list_pages aufrufst, fügt das System automatisch passende Klassen hinzu. In diesem Falle könntest du für aktive Links folgende Regel anwenden:

CSS:
li.current_page_item a { color:red; }

Grotesque · 29.09.2012

AW: Navigation will nicht aktiv bleiben.

Hallo,

also ich nutze nicht die Funktion wp_list_pages.
Werde es aber ausprobieren, den Seiten spezifisch dann eine Klasse zuzuweisen.
Ich weiß nur leider nicht wie ich auf die Seiten zugreife, welche eben die Kategorien entsprechen.

cebito · 30.09.2012

AW: Navigation will nicht aktiv bleiben.

Hmm, und warum benutzt du nicht die Menüs von WP? Hat das einen bestimmten Grund?

Grotesque · 01.10.2012

AW: Navigation will nicht aktiv bleiben.

Hab das Menü mit Hilfe eines Tutorials von hier gebastelt, daraus ist der Code entstanden, den ich euch geschrieben habe. Dachte es ist damit recht leicht die Grafiken zu ändern ohne immer am Code rumzubasteln. Aber anscheinend ist man nun doch nicht so frei wie ich gedacht hatte...
Werde es dann wohl auf eine andere Weise ausprobieren.

Falls doch noch jemand einen guten Vorschlag hat, gerne her damit

Pixelaner · 01.10.2012

AW: Navigation will nicht aktiv bleiben.

Ich bin im ersten Moment davon ausgegangen das du dein Menü statisch eingebunden hast, weil das Menü nicht der typischen WP Ausgabe entspricht. Es wäre hilfreich wenn du uns schon vorab mit solchen Infos versorgst und uns somit das hin und her raten ersparst.

Welches Tutorial hast du denn für deine Menüdarstellung genutzt ? Ich empfehle dir dennoch für die Ausgabe von Menüs eine der folgenden Funktionen zu verwenden. Da werden dir genug ansprechbare Klassen geliefert um das Menü nach deinen Vorstellungen darzustellen.

-> wp_list_pages
-> wp_nav_menu

Grotesque · 01.10.2012

AW: Navigation will nicht aktiv bleiben.

Oh das tut mir leid, ich dachte der entsprechende Code würde genügen.

Letztendlich habe ich mich genau an dieses Tutorial gehalten: http://www.psd-tutorials.de/tutorials/web/html-css/-/view/138--webmenues-mit-hover-effekt
Da ich die Schrift auch als Grafik eingebunden habe, hat sich das eben so angeboten.

Pixelaner · 01.10.2012

AW: Navigation will nicht aktiv bleiben.

Ich nehme an das das Menü durch Sprites realisiert wird und das entsprechende Hintergrundbild für den jeweiligen Menüpunkt per background-position in der CSS Datei geregelt ist. Ist alles problemlos mit Wordpress und den angesprochenen Menüausgaben umsetzbar.

Das einzige was du ändern müsstest, ist der jetzt bei dir vorhandene CSS Block. Da werden die id`s "nav-xy" durch die Wordpress Klassen ersetzt.

Grotesque · 01.10.2012

AW: Navigation will nicht aktiv bleiben.

Leider kann ich dir nicht ganz folgen, da ich mich mit der Menüfunktion rein gar nicht auskenne.

Habe das Ganze jetzt ersteinmal so geschrieben:

Code:

  <div id="navigation">
    <ul>
      <li id="nav-home"><a href="http://www.geld-und-welt.de#">Home</a></li>

	<?php  if (is_category(465)) { ?>
	<li id="nav-geldundwelt2"><a href="http://www.geld-und-welt.de/category/allgemein/">Geld & Welt</a></li>
	<?php  } else { ?>
	<li id="nav-geldundwelt"><a href="http://www.geld-und-welt.de/category/allgemein/">Geld & Welt</a></li>
	<?php } ?>

	<?php  if (is_category(463)) { ?>
	<li id="nav-artoflife2"><a href="http://www.geld-und-welt.de/category/artoflife/">Art of Life</a></li>
	<?php  } else { ?>
	<li id="nav-artoflife"><a href="http://www.geld-und-welt.de/category/artoflife/">Art of Life</a></li>
	<?php } ?>

	<?php  if (is_category(459)) { ?>
	<li id="nav-netzgefluester2"><a href="http://www.geld-und-welt.de/category/netzgefluester/">Netzgeflüster</a></li>
	<?php  } else { ?>
	<li id="nav-netzgefluester"><a href="http://www.geld-und-welt.de/category/netzgefluester/">Netzgeflüster</a></li>
	<?php } ?>

	<?php  if (is_category(460)) { ?>
	<li id="nav-technik2"><a href="http://www.geld-und-welt.de/category/technik/">Technik</a></li>
	<?php  } else { ?>
	<li id="nav-technik"><a href="http://www.geld-und-welt.de/category/technik/">Technik</a></li>
	<?php } ?>

	<?php  if (is_category(462)) { ?>
	<li id="nav-sparfoeg2"><a href="http://www.geld-und-welt.de/category/sparfoeg/">SPARföG</a></li>
	<?php  } else { ?>
	<li id="nav-sparfoeg"><a href="http://www.geld-und-welt.de/category/sparfoeg/">SPARföG</a></li>
	<?php } ?>

	<?php  if (is_category(461)) { ?>
	<li id="nav-marketing2"><a href="http://www.geld-und-welt.de/category/marketing/">Marketing</a></li>
	<?php  } else { ?>
	<li id="nav-marketing"><a href="http://www.geld-und-welt.de/category/marketing/">Marketing</a></li>
	<?php } ?>

	<?php  if (is_category(464)) { ?>
	<li id="nav-spielundspass2"><a href="http://www.geld-und-welt.de/category/spielundspass/">Spiel & Spaß</a></li>
	<?php  } else { ?>
	<li id="nav-spielundspass"><a href="http://www.geld-und-welt.de/category/spielundspass/">Spiel & Spaß</a></li>
	<?php } ?>
    </ul>
  </div>

Allerdings denke ich, dass das eher ein umständlicher Weg ist, welcher zu viele Resourcen nimmt, oder kann ich den Code bedenkenlos so lassen? Klappen tut es zumindest.

EDIT:

Habe gerade bemerkt, dass es so auch lange nicht optimal ist. Jetzt bleibt der Effekt zwar an, solange ich in der jeweiligen Kategorie stecke, nur eben nicht, wenn man einen Artikel liest. Ich denke ich werde dann doch auf die WP Funktion zurückgreifen müssen und mir das mal beibringen.

Pixelaner · 01.10.2012

AW: Navigation will nicht aktiv bleiben.

Ja deine Lösung ist wirklich nicht optimal. Schau dir die Navigations Funktionen von WP mal an. Da wirste deine Freude dran haben und mit dem Kopf schütteln dass du sie nicht schon früher genutzt hast