Hilfe für barrierefreiheies Java-Menü

fx001 · 15. März 2011

Hallo, ich habe mir aus verschiedenen Tutorials im Netz ein Togle Menü gebastelt.
Ich möchte dieses per "object" wie damals zu Framezeiten in alle Webseiten integrieren.

Frage 1
Was muss ich machen, sollte ein user kein Javascript anzeigen können, dass die Navigation trotzdem nutzbar ist?

Frage 2
Ich möchte die Seite statisch aufbauen (kein PHP) und wenn man sich durch die Menüs klickt, soll die angeklickte Haupt und Unterkategorie fett, bzw. schwarz gefärbt werden. (Bei hover bleibts ja nicht schwarz, wenn man irgendwoanders hinklickt.)

Vielen Dank im Voraus!

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="./style.css" />
<title>RECHTECK Design-Möbel</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$(".toggle_container").hide();

	$("div.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
	});

});


</script>
</head>

<body>



	<div class="trigger">
		<p class="navi-aktiv"><a href="#">KOLLEKTION</a></p>
	</div>
	<div class="toggle_container">
		<div class="eins">
			<div class="trigger">
				<p class="navigation-deaktiv"><a href="#">TISCHE</a></p>
			</div>
			<div class="toggle_container">
				<div class="zwei">
					<a href="http://www.rechteck.net"><p class="navigation-deaktiv">SUMMARUM</p></a>
					<p class="navigation-deaktiv">SUMMARUM .02</p>
					<p class="navigation-deaktiv">SUMMARUM .03</p>
				</div>
			</div>
				<p class="navigation-deaktiv">SESSEL</p>
				<p class="navigation-deaktiv">BETTEN</p>
				<p class="navigation-deaktiv">STÜHLE</p>
				<p class="navigation-deaktiv">HOCKER</p>
				<p class="navigation-deaktiv">TRUEN</p>
		</div>
	</div>

	
</body>
</html>

CSS

Code:

html {
}
 	 a:link {
         color:#a1a1a1; text-decoration:none;
         }

         a:visited {
         color:#a1a1a1; text-decoration:none;
         }

         a:hover {
         color:#000000; text-decoration:none;
         }

         a:active {
         color:#000000; text-decoration:none;
         }

*, * focus {
	outline: none;
	margin: 0;
	padding: 0;
}

.container {
	width: 500px;
}

.toggle_container  {
	width:300px;
	overflow:visible;
}

.toggle_container .eins{
	text-align:right;
	margin-right:150px;
}

.toggle_container .zwei{
	text-align:left;
	margin-left:160px;
}

.trigger {
}

.navi-aktiv {
	font: 30px normal Calibri, Arial, Helvetica, sans-serif;
	line-height: 1.7em;
	color:#000000;
}

.navi-deaktiv {
	font: 30px normal Calibri, Arial, Helvetica, sans-serif;
	line-height: 1.7em;
	color:#a1a1a1;
}

.navigation-aktiv {
	font: 12px normal Calibri, Arial, Helvetica, sans-serif;
	line-height: 1.7em;
	color:#000000;
}

.navigation-deaktiv {
	font: 12px normal Calibri, Arial, Helvetica, sans-serif;
	line-height: 1.7em;
	color:#a1a1a1;
}

Vielen Dank im Voraus!

Quaese · 16. März 2011

Hi,

zu 1:
Bedienbar ist das Menue, da es bei deaktiviertem JavaScript nicht eingeklappt wird.

zu 2:
Die Methode toggleClass ist ja bereits enthalten. Jetzt gilt es noch eine passende CSS-Klasse zu erstellen, z.B.:

Code:

.active a{
  color: #000;
  font-weight: bold;
}

Um die Punkte der Untermenues schwarz einzufärben, könntest du dich vom geklickten Punkt ausgehend nach unten arbeiten und die gewünschten Elemente formatieren.

Vereinfachtes Beispiel:

Code:

$(document).ready(function(){
    $(".toggle_container").hide();

    $("div.trigger").click(function(){
    	// Zunächst alle Punkte wieder entfärben
    	$(".toggle_container").find('*').css({
      	color: ''
      });

      $(this).toggleClass("active").next().slideToggle("slow").find('*').css({
      	color: '#000'
      });
    });
});

Ciao
Quaese

fx001 · 18. März 2011

Hey, danke für Deine ausführliche Antwort!

Ich habe es gerade eingebaut. Wenn man dann auf eine Kategorie klickt, wird die Ober bzw Unter-Kategorie nur jeweils für sich schwarz. Hast Du noch einen Hinweis?
Ich tüftle auchgerade daran, dass wenn man ein Projekt in der Unterkategorie anklickt, also die Seite neu lädt, dass dann die Baumstruktur geöffnet dargestellt wird.

Würd mich freuen, wenn Du mir einen Hinweis zum Einlesen, bzw. direkt weiter helfen könntest.

Viele Grüße.

Hilfe für barrierefreiheies Java-Menü

fx001

Erfahrenes Mitglied

Quaese

Moderator

fx001

Erfahrenes Mitglied

Neue Beiträge