Lotus Notes Web Accessibility-konform Drop Down Menus
Zunächst werde ich mich an die Zugänglichkeit Seite des Menüs. Um das Menü zur Verfügung Screenreader, bestellt das Menü Optionen sind in Standard-HTML-gelegt und ungeordnete Listen. Jedes Listenelement hat anklickbaren Text, der Sie auf die entsprechende Stelle. Ich werde weglassen die tatsächlichen Werte HREF (Sie können den Quelltext und sehen sie für sich selbst), aber hier ist der HTML verwendet, um das Menü zu erzeugen:
<div id="allcategories">
<ul id="allcategoriesnav">
<li> <a> Über uns </ a> </ li>
<li> <a> Web Hosting </ a> </ li>
<li> <a> Entwicklung </ a> </ li>
<li> <b> Hinweise / Tipps </ b>
<ol>
<li> <a> LotusScript </ a> </ li>
<li> <a> JavaScript </ a> </ li>
<li> <a> Web Design </ a> </ li>
<li> <a> Notes Client </ a> </ li>
<li> <a> Formula Language </ a> </ li>
<li> <a> API (Notes / Windows) </ a> </ li>
<li> <a> Reguläre Ausdrücke </ a> </ li>
</ Ol>
</ Li>
<li> <a> Links </ a> </ li>
<li> <a> Mail-Scheduler Application </ a> </ li>
<li> <a> Hinweis / Tip Mailing List </ a> </ li>
<li> <a> Hinweis / Tip RSS Feed </ a> </ li>
</ Ul>
</ Div>
Da die Elemente alle in Standard-HTML aufgeführt sind, wird Screenreader keine Probleme haben, mit ihnen. So, wie, wenn Sie einen Standard-Browser wie IE oder Firefox haben, wird das Menü erzeugt?
Style Sheets werden verwendet, um den Großteil der Arbeit zu tun. Beachten Sie, wie alles in einem <DIV> gelegt wurde? Das ermöglicht die vollständige Kontrolle über CSS - wir können Regeln, die nur auf die Teilung gelten soll, so wird es keine Auswirkungen auf andere Listen auf Ihrer Webseite ein. Da die "id" in der Abteilung eingesetzt wurde, haben alle CSS-Elemente zu beginnen mit der Raute (#). So arbeiten Sie mit einer bestimmten HTML-Element in dieser Abteilung (anstelle von Anwendung auf alle HTML-Elemente des gleichen Typs) Sie sind die ID der Teilung, dann ein Leerzeichen, dann den Namen des HTML-Elements. Hier ein Beispiel:
# Allcategories ul {padding: 0px; margin: 0px; list-style: none;}
Diese besagt, dass alle <UL> tags innerhalb der allcategories Division keinen Spielraum, keine Polsterung, und keine Liste Stil haben. Aber das gilt nur innerhalb dieser Abteilung - wenn Sie andere Listen in anderen Divisionen (oder nicht in jeder Sparte) haben, werden sie nicht diese Style-Definition. Das erlaubt die Isolierung dieser Technik nur, um das Menü.
Ebenso, wenn wir einen Stil auf einen <LI> Tag gelten innerhalb der Liste innerhalb des Geschäftsbereichs wollen, können wir dieses Stylesheet-Eintrag:
# Allcategories ul li {background: # C0C0C0; border-right: 1px solid # FFFFFF; float: left; position: relative; text-align: center; Breite: 12,49%;}
Dies gilt den grauen Hintergrund, um alle Listenelemente. Es gibt einen kleinen weißen Rand, so dass Sie es nicht wie eine durchgezogene Linie zu suchen. Sie sind nebeneinander, so dass sie auf einer Linie scheinen alle schwebten. Die Breite sorgt dafür, dass alles "passt" auf der Linie (ohne zu viel Leerraum herum). Und jeden Eintrag in seinem Block zentriert.
Wir haben zu nisten ein wenig weiter in die geordnete Liste eingetragen (das Drop-Down) zu bekommen. Anfangs dieses ganze Drop-Down-sollte versteckt werden, aber (wenn sie angezeigt wird) es braucht, um direkt unterhalb der "Eltern"-Eintrag angezeigt. Also hier ist die CSS in diesem Sinne zu erreichen:
# Allcategories ul li ol {display: none; position: absolute; top: 14px; links: 0px; width: 300px; padding: 0px; margin: 0px; border-bottom: 1px solid # 483D8B; list-style: none; Hintergrund : # FFFFFF; z-index: 3;}
Beachten Sie, dass die Positionierung absolut auf dem Container-Element basiert. So "left: 0px" Positionen mit der gleichen äußersten linken Rand, wie es die Container-Element, nicht das am weitesten links stehenden Rand des Browser-Fensters.
Für Firefox, können wir einfach festlegen, dass, wenn Sie über einen <LI> Tag, das eine <OL> Tag unterhalb hat schweben, um jetzt die Sachen, die vorher verborgen. Für IE, haben wir ein wenig JavaScript anzuwenden, wenn die Seite geladen wird, um es alles zu erkennen. So haben wir zwei CSS Einträge - die erste ist für Firefox und die zweite ist für IE:
# Allcategories ul li: hover ol {display: block;}
# Allcategories ul li.over ol {display: block;}
Schließlich haben wir die CSS für jede der Liste Elemente in das Drop-down angewendet. Das ist also noch weiter verschachtelt:
# Allcategories ul li ol li {border: 1px solid # 483D8B; border-bottom: none; clear: left; width: 300px; background: # FFFFFF; color: # 483D8B; text-align: left;}
Die "clear: left"-Eintrag bedeutet, dass diese Elemente untereinander statt mit den ererbten "float: left" erscheinen Eintrag.
Beachten Sie, dass wenn man sich den CSS für das Brechen Par Webseite anschauen, werden Sie noch ein paar Einträge unter dem allcategories Überschrift zu sehen. Diese sind nicht in Bezug auf die Funktionalität des Drop-Down-Menü, so dass sie hier nicht beschrieben.
Die obige Beschreibung funktioniert in Firefox gut. Aber für IE, müssen wir das Problem, dass es nicht richtig erkennen schweben an der <LI> Tag zu beheben. Also, beim Laden der Seite ist die "Startliste" JavaScript-Funktion aufgerufen. Hier ist die Funktion:
Funktion Startliste () {
if (document.all & & document.getElementById) {
navRoot = document.getElementById ("allcategoriesnav");
for (i = 0; i <navRoot.childNodes.length; i + +) {
node = navRoot.childNodes [i];
if (node.nodeName == "LI") {
node.onmouseover = function () {this.className + = "over";}
node.onmouseout = function () {this.className = this.className.replace ("over", "");}
}
}
}
}
Grundsätzlich diesen Code einfach gilt der Name einer Klasse von "over" zu den <LI> tags in das Menü, wenn Sie die Maus über sie, und entfernt den Namen der Klasse, wenn Sie mit der Maus aus. So das Stylesheet Definition von "li.over" wird wirksam, was bedeutet, den Block unten (im Untermenü) gezeigt werden. Technisch, ich denke, dies gilt DHTML mit JavaScript. Aber wenn Sie Ihren Kunden alle Firefox sind, ist dies nicht notwendig, JavaScript und das Drop-Down-Menü erfolgt über nur CSS.
Betrachtet 9010 mal von 2367 Zuschauern
