- ベストアンサー
CSSplayとは？フリーなDrop and scroll menuを紹介しているサイト
- CSSplayというサイトは、フリーなDrop and scroll menuの紹介を行っています。
- サイトに掲載されているメニューはCSSのみで作成されており、JavaScriptやFlashは使用されていません。
- 初心者でも簡単に使えるメニュー作成方法が紹介されており、ドロップダウンメニューのサブメニューをスクロールさせることも可能です。
- nandedousite
- お礼率11% (1/9)
- CSS
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞１．上下のスクロールだけでなく、左右のスクロールも出てしまう（こちらは常時出ています）ので、左右のスクロールをなくしたいのですがどうしたらよいのでしょうか？ scroll:autoをつかう。CSS3のscroll-yでもよい。 ＞２．高さを固定すると、上下のスクロールが常時出てしまうのですが、メインメニューへのオンマウス時のみ出現させるためにはどうしたらよいのでしょうか？ 動的擬似クラスの:hoverをつかいます。 ごく簡単なサンプル ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み HTML4.01 + CSS2.1 border-radiusはCSS3 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} /* ここから */ div.header div.nav{/* header内のナビゲーションブロックについて */ ＿width:50%; ＿margin:0 auto; ＿text-align:center; } div.header div.nav ul,div.header div.nav ul li{/* ulとli */ ＿margin:0; ＿padding:0; ＿line-height:30px;/* 一行の高さを指定 */ ＿list-style:none; ＿position:relative;/* 以下のサイズや位置の基準にする */ } div.header div.nav ul li{ ＿display:inline-block; ＿width:40%; } div.header div.nav ul li ul{ ＿position:absolute; ＿top:30px; ＿width:100%;/* position:relativeな親liに対して */ ＿height:90px;/* 見せる範囲 */ ＿overflow:auto;/* またはoverflow-y:scroll; */ ＿display:none;/* 隠しておく */ } div.header div.nav ul li ul li{ ＿display:block; ＿width:100%;/* position:relativeな親liに対して */ } div.header div.nav ul li:hover ul{ ＿display:block;/* liにhoverするとblock、詳細度が大きいので上書きされる *. } div.header div.nav ul li{ ＿background-color:black; ＿color:white; ＿background:linear-gradient(gray,black); ＿border-radius:20px 20px 0 0; } div.header div.nav ul li ul li{ ＿background: linear-gradient(gray,gray); ＿border-radius:0px; } div.header div.nav ul li ul{ ＿background-color:rgb(40,40,40); ＿border-radius:0 0 20px 20px; } div.header div.nav ul li ul li:hover{ ＿background: linear-gradient(black,black); } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li>あ行 ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>あ</li> ＿＿＿＿＿＿<li>い</li> ＿＿＿＿＿＿<li>う</li> ＿＿＿＿＿＿<li>え</li> ＿＿＿＿＿＿<li>お</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li>か行 ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>か</li> ＿＿＿＿＿＿<li>き</li> ＿＿＿＿＿＿<li>く</li> ＿＿＿＿＿＿<li>け</li> ＿＿＿＿＿＿<li>こ</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
決して難しい技術が使われているわけではありません。どちらかと言うと初歩的なものです。border-radiusとというCSS3のプロパティ以外はCSS2.1で可能でしょう。 ウェブサイトを作られているのでしたら、アドオン、特に開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxをお使いだと思いますが、それに Firebug( https://addons.mozilla.jp/firefox/details/1843 )というアドオンがあります。それで仕組みはすべてわかるはずです。 <ul> <li> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </li> <li> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </li> </ul> と、シンプルにHTMLで文書構造だけ記述してあれば ul liをdisplay:inline-block;で横並びにする。 ul li ulをoverflow:scrollでスクロールするようにする。 ul li ul liをdisplay:block; その上で、 ul li ulをdisplay:none; ul li:hover ulをdisplay:block;にする。 ★肝心な事は、 ナビゲーションをデザインしてみる。( http://ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) のように、HTMLには文書構造以外は書かないようにしておくと、スタイルシートで好きなようにできる。逆に ＞私が今使っているドロップダウンメニュー の時点で、それようにHTMLが書かれていると厄介です。 上記「ナビゲーションをデザインしてみる。」のページでブラウザの[表示}メニューから[スタイル(シート)]に進みスタイルを色々と変えたり、ウィンドウサイズを変えたり、印刷プレビューで印刷時のデザインを見てください。そして、HTMLソースをご覧になると極めてシンプルでデザイン要素がまったくないことが理解できるでしょう。 このスタイルシートの横並びプルダウンのulを高さを固定してscrollにすれば完成です。
補足
回答ありがとうございます。 追加で何点か質問させてください。 １．上下のスクロールだけでなく、左右のスクロールも出てしまう（こちらは常時出ています）ので、左右のスクロールをなくしたいのですがどうしたらよいのでしょうか？ ２．高さを固定すると、上下のスクロールが常時出てしまうのですが、メインメニューへのオンマウス時のみ出現させるためにはどうしたらよいのでしょうか？
お礼
大変参考になりました。 無知な私に、懇切丁寧にご教授いただき本当にうれしい限りです。 今後もアホな質問をするかと思いますがこれに懲りずまたよろしくお願いいたします。