faLog | CSS(とJS)でシンプルなドロップダウンメニュー - 2
シンプルなドロップダウンメニューの詳細版になります。 マウスカーソルをメニューの見出しに重ねると垂れ幕のようにメニューが表示される…と言うよくあるドロップダウンメニューです。好きなように使って下さい。 ただし、このページのスクリプトはあくまでサンプルであって素材ではありません。このままでも使えなくは無いですが、以下の点に注意を払う必要があります。 標準準拠ブラウザの場合、CSSが機能していなくてもメニューとしての構造を保つように作っています。 が、CSSオン・javascriptオフのIEではメニュータイトルしか見えない状態になります。 このシチュエーションをフォローするには、IEが読めないようにCSSのpositionとdisplayにハックコード(例えば、dl[id=foo]など)を入れ、代わりにJavascriptでpositionとdisplayのスタイル指定を書
faLog | CSS(+JS)でULのドロップダウンメニュー
以前のエントリーで書いた物と考え方は同じですが、一般的にメニューリストとして使われるUL+ノードを辿ってイベントハンドラを後付けするサンプルです。IE6,IE7,Mac IE5.2, Firefox2.0, Opera8, Opera9, Safari2で動作する事を確認しています。 IE5.0,IE5.5でも多分大丈夫だと思いますが、CSSの解釈がアレゲなのでソレゲが生えてるかも。 Example 例えば、#navi liのfloat:left;を消し、#navi li.plist:hover ulにmargin-left:50px;とmargin-top:-25px;を追加する事で簡単に垂直のレイアウトに変更出来ます。 縦置きがどんな感じかはサンプルメニューのSTYLEからV MENUをクリックしてみて下さい。 但しIEで動作させると、横幅指定の関係で回り込みが効かず、こ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
