Wie ein DHTML-Menü erstellen?

stimmen
0

Ich brauche ein DHTML-Menü mit den angegebenen Funktionen zu erstellen, aber ich kann nicht herausfinden, wie es zu tun. Hier ist, was ich brauche:

Alle Einzelteile sind horizontal verlegt werden. Wenn sie breiter als der Bildschirm sein würden, zwei kleine Pfeile erscheinen auf der rechten Seite des Menüs, das scrollen es zulassen. Etwas wie das:

+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+

Die Menüpunkte sollten überall in der Zelle angeklickt werden. Sie sollten sowohl vertikal dehnen und horizontal über den Inhalt. Der Text in den Artikeln sollte sowohl vertikal als auch horizontal zentriert werden. Das Menü sollte in IE7 / Oper / FF / Safari arbeiten.

Das Scrollen ist der einfache Teil - ich lege einfach alles in einem Behälter (sagen wir, ein <div>), stellen Sie den Behälter overflow: hiddenund dann um mit in Javascript spielen clientWidth, scrollWidthund scrollLeft. Dass ich habe herausgefunden und habe bereits versucht.

Aber wie die Menüpunkte zu machen, so dehnbar, anklickbare überall und zentriert Text?

Veröffentlicht am 09/12/2008 um 15:11
quelle vom benutzer
In anderen Sprachen...                            


3 antworten

stimmen
2

Versuchen Sie, die CSS unten:

#menu {
  display: table; 
}   
#menu a {
    display:table-cell; 
    vertical-align:middle;
}

Und dann formatieren Sie Ihr Menü wie:

<div id="menu">
    <a href="#">normal text</a>
    <a href="#"><big>large text</big></a>
    <a href="#"><span style="line-height:100px;">very tall text</span></a>
</div>

Dadurch wird die vertikale Ausrichtung zwingen und die Links von Verpackung zu verhindern. Lassen Sie uns wissen, wie es funktioniert.

Beantwortet am 09/12/2008 um 15:18
quelle vom benutzer

stimmen
1

OK, ich sprach mit meinen Vorgesetzten und sie beschlossen , dass es in Ordnung sein könnte , dass Sie einen Menüpunkt nicht die rechte Maustaste und wählen Sie „In neuem Fenster öffnen“. Wenn diese Forderung fallen gelassen wird, dann bin ich nicht gebunden <a>Elemente für Links. Mit JavaScript kann ich alles in einen Link machen. So ich wählen Sie, pikachoo <table> !

Yap, es ist eine Häresie, aber es funktioniert. Genauer gesagt, ist es das einzige Konstrukt, das ich daran denken kann, zugleich alle der folgenden Möglichkeiten:

  • Center Text horizontal und vertikal;
  • Dehnung Inhalt horizontal und vertikal;
  • Nicht wickelt zur nächsten Zeile, wenn Elemente zu Überlauf beginnen.

Alles andere, die das gleiche tun kann, wird wahrscheinlich sowieso mehr convulted werden. Und bevor jemand die Idee hat - nein, ich brauche keine Suchmaschine Unterstützung. Es ist eine interne Web-Anwendung. Es wäre ziemlich schlecht, wenn Google könnte Index, dass ...

Beantwortet am 09/12/2008 um 16:12
quelle vom benutzer

stimmen
-2

klickbare überall ist einfach: Sie entweder das Onclick-Ereignis-Trigger binden kann (und hoffentlich auch einige Cursor Styling) auf das Atomzellenelement, oder Sie können die Atomzellenelemente <a> Tags (oder wahrscheinlicher wickeln diese in <li>) machen und Verbindung und die Art entsprechend (padding, margin, foo).

zB Fall 1:

<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>

(Offensichtlich ich nicht wirklich Inline-Styling oder Script-Handler empfehlen, aber Sie erhalten die Idee)

Anwenden von padding den Text effektiv Zentrieren, und mit zugeordneten keine Breite natürlich werden sie strecken ihre Inhalte passen.

Beantwortet am 09/12/2008 um 15:21
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more