締切済み

ホームページ制作について

2016/02/20 10:51

メニューの項目にカーソルを合わせると2階層名の項目(画像）で表示させるのはどのような仕組みになっているのでしょうか？また、HTMLが多少わかるレベルでも制作できるようなテンプレートが売っているのでしょうか？ご存知の方、ご教示ください。参考URL↓ http://www.urban-funes.com/ （こんな感じのメニューです）

degrr
お礼率64% (11/17)

CSS
回答数5
ありがとう数1

みんなの回答 （5）
専門家の回答

みんなの回答

t_ohta
ベストアンサー率38% (5320/13881)

2016/02/22 17:48 回答No.5

＞　cssでメニュー項目の下にテキストを表示させる　というのはわかるのですが、それが、画像のような？（または別ページ？）を表示される仕組みが、今一つ理解できず、こちらに問い合わせさせていただいた次第です。参考に上げられたページには「トップ」を含め6種類のメニューが存在します。それぞれに、メニュー下部に表示する部分のHTMLを用意します。（同じ大きさで表示されるように作る）初期状態ではトップ以外の文は非表示にしておき、メニュー部分にマウスオーバーのイベントを設定して、マウスで示されたメニューに該当するHTMLを表示に設定し、それ以外を非表示にするという手法で実現できます。こんな感じで簡単なものは実現できます。 ========== <html> <head> <meta charset='UTF-8'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script language="JavaScript"> $(function(){ $(".menubt").hover( function() { var ids = $(this).attr("id").match(/^menu_(\d+)$/); $(".banner").hide(); $("#banner_"+ids[1]).show(); },function(){} ); }); </script> <style> #menu {width:400px; margin:0 auto;} .menubt {display:inline-block;width:100px;text-align:center;} .banner {width:400px; height:100; margin:0 auto;} #menu_1, #banner_1 {background-color:#fcc;} #menu_2, #banner_2 {background-color:#cfc;} #menu_3, #banner_3 {background-color:#ccf;} #menu_4, #banner_4 {background-color:#cff;} #banner_2 {#cfc;display:none;} #banner_3 {#ccf;display:none;} #banner_4 {#cff;display:none;} #footer {width:400px; margin:0 auto; background-color:silver;} </style> </head> <body> <div id="menu"><div class="menubt" id="menu_1">１</div><div class="menubt" id="menu_2">２</div><div class="menubt" id="menu_3">３</div><div class="menubt" id="menu_4">４</div></div> <div class="banner" id="banner_1">バナー１</div> <div class="banner" id="banner_2">バナー２</div> <div class="banner" id="banner_3">バナー３</div> <div class="banner" id="banner_4">バナー４</div> <div id="footer">あれこれ</div> </body> </html>

ログインすると、全ての回答が全文表示されます。

0wl
ベストアンサー率43% (10/23)

2016/02/20 11:57 回答No.4

htmlだけでは無理です。参考URLはｃｓｓでされています。 cssには「hover」というカーソルを合わせた時用の疑似セレクタがあります。それを利用しています。それのみのテンプレートは売っていても、買われない程度のとても簡単な仕組みです。 hoverでロールオーバー（マウスが乗った時に切り替わる表現）、リンクボタンの色がちょっと変わるということで使われる事が多いのですが、もっと広範囲での指定も可能です。 hover していない時はdisplay:noneなどで表示しないさせないようにしておき、hoverした時の子要素を表示させるdisplay:block等で表現できます。メニューでしたら、「ドロップダウン　メニュー」で検索すれば、ソースが山のように出て来ます。cssが分からなければ、アウトです。htmlだけではどうにもなりません。

ログインすると、全ての回答が全文表示されます。

t_ohta
ベストアンサー率38% (5320/13881)

2016/02/20 11:49 回答No.3

JavaScript と CSS で実現していますね。（非同期通信は使っていないので Ajax ではありません） JavaScriptでマウスオーバーイベント発生時にスタイルを書き換える動作をさせています。厳密には jQuery をベースに smartRollover.js とかを組み合わせて実現しているようですね。ソースを見る限り、フリーで出回っているライブラリを組み合わせて作ってます。

質問者

補足 2016/02/22 16:45

cssでメニュー項目の下にテキストを表示させる　というのはわかるのですが、それが、画像のような？（または別ページ？）を表示される仕組みが、今一つ理解できず、こちらに問い合わせさせていただいた次第です。説明が上手く伝わらず、申し訳ありませんが、判り易くご教示いただけましたら幸いです。

ログインすると、全ての回答が全文表示されます。

smailsmail
ベストアンサー率25% (66/256)

2016/02/20 11:12 回答No.2

Ajax（JavaScript）でやっていると思います。本屋に行って、Ajaxの本を立ち読みして、良さそうなものを買ってみては？ Ajaxの書籍の中には仕組みの説明ばかりで全く役に立たないものがありますので立ち読みは必須です。

質問者

お礼 2016/02/22 16:34

ご回答いただき、ありがとうございます。書籍ですか~。サンプルを購入して簡単にできれば・・と考えていました。

ログインすると、全ての回答が全文表示されます。

weavaest
ベストアンサー率15% (157/1020)

2016/02/20 11:08 回答No.1

リンク先のどこのことを指してるのか、よく分からなかったです。そもそも、こういったサイトのテンプレートなんて必要なくて、サイトをそのままダウンロードでもして解析すれば分かると思います。解析するのは知識は必要です。”多少分かるレベル”ってのがどの程度か分かりませんが、多少の中にCSSやJavaScriptまで含まれるなら、恐らく何とか成ると思います。

ログインすると、全ての回答が全文表示されます。