0

指定された機能を備えた DHTML メニューを作成する必要がありますが、その方法がわかりません。必要なものは次のとおりです。

すべての項目が水平に配置されます。画面よりも幅が広い場合は、メニューの右側にスクロールできる 2 つの小さな矢印が表示されます。このようなもの：

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

メニュー項目は、セル内のどこでもクリックできる必要があります。それらはコンテンツに対して垂直方向と水平方向の両方に伸びる必要があります。アイテム内のテキストは、垂直方向と水平方向の両方で中央揃えにする必要があります。メニューは IE7/Opera/FF/Safari で動作するはずです。

スクロールは簡単な部分です。すべてをコンテナー (たとえば a <div>) に配置し、コンテナーを に設定してから、とoverflow: hiddenを使用して Javascript で遊んでいます。私が理解し、すでに試したこと。clientWidthscrollWidthscrollLeft

しかし、メニュー項目を伸縮性があり、どこでもクリック可能で、テキストを中央に配置するにはどうすればよいでしょうか?

4

3 に答える 3

2

以下の CSS を試してください。

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

次に、メニューを次のようにフォーマットします。

<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>

これにより、垂直方向の配置が強制され、リンクが折り返されなくなります。それがどのように機能するか教えてください。

于 2008-12-09T14:18:15.400 に答える
1

OK、上司と話し合ったところ、メニュー項目を右クリックして [新しいウィンドウで開く] を選択できなくても大丈夫かもしれないという結論に達しました。<a>この要件が取り除かれると、リンクの要素に縛られなくなります。JavaScript を使えば、何でもリンクに変えることができます。だからピカチュウ君に決めた <table>！

ええ、それは異端ですが、うまくいきます。より具体的には、次のすべてを同時に実行できる、私が考えることができる唯一の構成要素です。

  • テキストを水平方向および垂直方向の中央に配置します。
  • コンテンツを水平方向および垂直方向に引き伸ばします。
  • 項目がオーバーフローし始めたときに次の行に折り返されません。

同じことができる他のものは、おそらくもっと混乱するでしょう。そして、誰かがアイデアを思い付く前に - いいえ、検索エンジンのサポートは必要ありません。これは内部 Web アプリケーションです。Googleがそれをインデックスに登録できたら、かなり悪いでしょう...

于 2008-12-09T15:12:30.830 に答える
-2

どこでもクリック可能にするのは簡単です。onclick イベント トリガー (およびできればカーソル スタイル) をアトミック セル要素にバインドするか、アトミック セル要素を <a> タグ (または <li> でラップする可能性が高い) にすることができます。リンクとスタイルを適切に設定します (パディング、マージン、foo)。

例 1:

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

(明らかに、インライン スタイルやスクリプト ハンドラーはあまりお勧めしませんが、アイデアはわかります)

パディングを適用すると、テキストが効果的に中央に配置され、幅が割り当てられていないため、コンテンツに合わせて自然に伸びます。

于 2008-12-09T14:21:26.940 に答える