CSSだけで作るamazon風な縦型メガメニュー
先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。 CSSだけですのでメニューの現れ方など若干違います。box-shadowとborder-radiusはIE8以下で、矢印を作るための擬似要素はIE7以下で非対応ですが、メニューとしての機能は果たせます。 では解説していきます。 HTML まずはHTMLから説明します。長いのでメニュー1つ分のみ載せます。コード全体はサンプルの下に載せていますのでご覧ください。 <div id="menu-tittle">メニュー</div> <ul id="sample"> <li> <a href="#">メインカテゴリー1</a> <ul> <h3>メインカテゴリー1</h3> <li><a href="#">サブ
ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス
ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 body:before { /* top shadow */ content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
