wie dieses Menü zu strukturieren

Ich bin auf einem Menü arbeiten (Bilder mit indesign gemacht, noch nicht html):wie dieses Menü zu strukturieren

enter image description here

Einige Menüoptionen Inhalt in einem anderen div geladen werden kann (eine Spalte daneben). jedoch für den ‚Inhalt‘ Option möchte ich eine neue Optionsliste wie folgt aus:

enter image description here

Es sollte die ‚Inhalt‘, was kollabieren.

Atm alles ist mit jquery/javascript getan, so ist es dynamisch (Laden eines anderen Buches zum Beispiel). Ich fragte mich für das Menü CONTENT, sollte ich ein Div in CONTENT platzieren, die eine Tabelle von 2 Zeilen halten? Eine Tabelle für die römischen Zahlen und 1 für den Kapitelnamen. Oder ist das schwer mit einer ungeordneten Liste zu kombinieren?

http://jsfiddle.net/cmTpR/

Quelle

2012-03-31 clankill3r

Sind Sie sicher, dass jsfiddle das hat, was Sie fragen? – Coffee

Teil davon ja. – clankill3r

soll ich ein div in CONTENT platzieren, das eine Tabelle mit 2 Zeilen enthält? Eine Tabelle für die römischen Zahlen und 1 für den Kapitelnamen.

Ich denke, du meinst 2 Spalten?
Wie können Sie sicher sein, dass 1 Kapitel genau 1 Zeile belegt? Sie sind ziemlich langwierig, was passiert, wenn einer von ihnen zwei Zeilen belegt, was ist, wenn der Benutzer nicht die Schriftart hat, die Sie in der Schriftfamilie angegeben haben, und Fallback größer ist? Was ist, wenn er um 1, 2, bis zu 6 Stufen von (Text-) Zoom gemäß W3C/WAI WCAG 2.0 Empfehlungen für Zugänglichkeit zoomt.

2 Spalten wie das würde auch bedeuten, dass (Stellen Sie sich einen Bildschirmleser Benutzer vor, der 1, 2, 3, 4 usw. hört und dann nur den Namen der Kapitel 1, 2, 3, 4 usw. Viel Glück damit ! :))

Oder ist das schwer mit einer ungeordneten Liste zu kombinieren?

Nein ist es nicht. Siehe http://jsfiddle.net/PhilippeVay/EsYZr/, wo nur Schuppenlisten verwendet werden und (Warte darauf) CSS-Tabellenlayout. Die Semantik ist immer noch die einer Unterliste, aber visuell (und nur visuell) ist sie wie eine Tabelle aus Zeilen und Zellen.

Der gute Teil ist, dass Sie keine Breite erzwingen müssen. Römische Zahlen wie XVIII sind ziemlich groß, aber der Tabellenalgorithmus in Browsern wird sich an den Inhalt anpassen (solange Sie den Tabellenalgorithmus nicht mit table-layout: fixed umschalten) wie mit einer HTML-Tabelle.

Quelle

2012-03-31 20:08:15 FelipeAls

danke für deine großartige Antwort. Ich interessiere mich nicht für Zoom oder Benutzer, die keine Schriftart atm haben. Es ist eine Schulaufgabe, daher ist es nicht notwendig, sie zu 100% perfekt zu haben, da sie nur auf meinem Handy angezeigt wird. Die jsfiddle ist wirklich volle Hilfe, wusste nicht, dass es so schön gemacht werden könnte. – clankill3r

o ja, was wäre eine einfache Möglichkeit, den Inhalt zu verstecken/einblenden? – clankill3r

Ich verwende nur jQuery ('.on()' und "click" + Fokus mit jQuery 1.7 mit .hide() /. Show() oder Hinzufügen/Entfernen einer Klasse, die auf die gleiche Weise formatiert ist), so dass meine Antwort ziemlich begrenzt ist – FelipeAls

Ich verstehe Sie die römischen Zahlen und die Kapitelnamen in einer einzigen Liste Element haben wollen und werden an den Tischen als eine Lösung suchen.

Sie können sicherlich Tabellen verwenden. Alternativ können Sie ein span-Element mit einer festen Breite verwenden.

Ich bin ein span mit den römischen Zahlen

<ul> 
    <li> <span class="num">I</span> Hello World </li> 
    <li> <span class="num">II</span> The Second string </li> 
    <li> <span class="num">III</span> 3 times, is a charm! </li> 

</ul>

zu halten, ich zuweisen dann eine feste Breite auf die Spanne

li span.num { 
    display: inline-block; 
    width: 30px; 
}

jsfiddle: http://jsfiddle.net/FJgqs/

Hope this beantwortet Ihre Frage

Quelle

2012-03-31 20:00:34

wie dieses Menü zu strukturieren

Antwort

Verwandte Themen