HTML5, CSS3, JQuery SAMPLES

The Sample Source code of the HTML5, CSS3, JQuery and more!

̃Gg[͂ĂȃubN}[Nɒlj

#03 CSS3 ラウンドドロップダウンメニューバー

#03 CSS3 ラウンドドロップダウンメニューバー
RED TEAM DESIGN で紹介されていたテクニックです。

li 要素(タグ)を使用したドロップダウンメニューバーです。ul, li 要素をメニューバー表示にします。ul 要素を入れ後にすることによってサブメニューを表示する事ができます。

このドロップダウンメニューバーは画像を使わずに CSS3 のみで表示します。

Demo を見る

ソースコード(CSS)

#menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; } #menu li { float: left; padding: 0 0 10px 0; position: relative; line-height: 0; } #menu a { float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover /* IE6 */ { color: #fafafa; } #menu li:hover > ul { display: block; } /* Sub-menu */ #menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(255,255,255,.5); -moz-border-radius: 5px; border-radius: 5px; } #menu ul ul { top: 0; left: 150px; } #menu ul li { float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; height: 10px; width: 130px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a /* IE6 */ { height: 10px; } *:first-child+html #menu ul a /* IE7 */ { height: 10px; } #menu ul a:hover { background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul ul li:first-child a:after { left: -8px; top: 12px; width: 0; height: 0; border-left: 0; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-right: 8px solid #444; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #04acec; border-bottom-color: transparent; } #menu ul li:last-child > a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */

サンプルソース(HTML)

メニューの数だけ li 要素(タグ)を追加(削除)します。メニューのリンク先を a 要素の href 属性に指定します。また、ul 要素を入れ後にすることによってサブメニューを表示します。

<ul id="menu"> <li><a href="http://www.red-team-design.com/">Home</a></li> <li> <a href="#">Categories</a> <ul> <li> <a href="#">CSS</a> <ul> <li><a href="#">Item 11</a></li> <li><a href="#">Item 12</a></li> <li><a href="#">Item 13</a></li> <li><a href="#">Item 14</a></li> </ul> </li> <li> <a href="#">Graphic design</a> <ul> <li><a href="#">Item 21</a></li> <li><a href="#">Item 22</a></li> <li><a href="#">Item 23</a></li> <li><a href="#">Item 24</a></li> </ul> </li> <li> <a href="#">Development tools</a> <ul> <li><a href="#">Item 31</a></li> <li><a href="#">Item 32</a></li> <li><a href="#">Item 33</a></li> <li><a href="#">Item 34</a></li> </ul> </li> <li> <a href="#">Web design</a> <ul> <li><a href="#">Item 41</a></li> <li><a href="#">Item 42</a></li> <li><a href="#">Item 43</a></li> <li><a href="#">Item 44</a></li> </ul> </li> </ul> </li> <li> <a href="#">Work</a> <ul> <li> <a href="#">Work 1</a> <ul> <li> <a href="#">Work 11</a> <ul> <li> <a href="#">Work 111</a> </li> <li> <a href="#">Work 112</a> </li> <li> <a href="#">Work 113</a> </li> </ul> </li> <li> <a href="#">Work 12</a> <ul> <li> <a href="#">Work 121</a> </li> <li> <a href="#">Work 122</a> </li> <li> <a href="#">Work 123</a> </li> </ul> </li> <li> <a href="#">Work 13</a> <ul> <li> <a href="#">Work 131</a> </li> <li> <a href="#">Work 132</a> </li> <li> <a href="#">Work 133</a> </li> </ul> </li> </ul> </li> <li> <a href="#">Work 2</a> <ul> <li> <a href="#">Work 21</a> <ul> <li> <a href="#">Work 211</a> </li> <li> <a href="#">Work 212</a> </li> <li> <a href="#">Work 213</a> </li> </ul> </li> <li> <a href="#">Work 22</a> <ul> <li> <a href="#">Work 221</a> </li> <li> <a href="#">Work 222</a> </li> <li> <a href="#">Work 223</a> </li> </ul> </li> <li> <a href="#">Work 23</a> <ul> <li> <a href="#">Work 231</a> </li> <li> <a href="#">Work 232</a> </li> <li> <a href="#">Work 233</a> </li> </ul> </li> </ul> </li> <li> <a href="#">Work 3</a> <ul> <li> <a href="#">Work 31</a> <ul> <li> <a href="#">Work 311</a> </li> <li> <a href="#">Work 312</a> </li> <li> <a href="#">Work 313</a> </li> </ul> </li> <li> <a href="#">Work 32</a> <ul> <li> <a href="#">Work 321</a> </li> <li> <a href="#">Work 322</a> </li> <li> <a href="#">Work 323</a> </li> </ul> </li> <li> <a href="#">Work 33</a> <ul> <li> <a href="#">Work 331</a> </li> <li> <a href="#">Work 332</a> </li> <li> <a href="#">Work 333</a> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Contact</a> </li> </ul>

Demo を見る

RED TEAM DESIGN で紹介されていたテクニックです。

Last updated on Mar 21th, 2021
このエントリーをはてなブックマークに追加

コメント