質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3602閲覧

横幅サイズによって、ドロップダウンメニュー・アコーディオンメニューを使い分けしたい

hanahana

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2016/10/21 11:16

Webサイトのグローバルナビゲーション制作に関する質問です。

横幅が981px以上の時(PCを想定)
・メニューを横並びにし、サブメニューは親メニューにカーソルを当てた時に表示される
※これはなんとか、自力で制作することができました

横幅が980px以下の時(タブレット・スマホを想定)
・横並びメニューは消え、ハンバーガーメニューが表示される。ハンバーガーメニューをクリックすると
メニューが縦並びで表示され、サブメニューは親メニューをクリックした時に表示される
また、サブメニューがあることを表示するために、サブメニューがある親メニューには→を添え、
サブメニューが開いている時には→が↓になるようにしたい。
※現在は親メニューにカーソルを当てた時に表示される状態となっています。
※→(矢印アイコン)はfontawesomeを使用?

サンプル
http://slicknav.com/
ページ下部の「Advance Demo」のParent2のようにしたいです。

どなたか、実現する方法を教えていただけたら嬉しいです。
よろしくお願いします。

htmlとCSSは以下の通りです。

html

1<html lang="ja"> 2<head> 3<meta charset="UTF-8"> 4<title>サイトタイトル</title> 5<meta name="viewport" content="width=device-width"> 6<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"> 7<link rel="stylesheet" href="style.css"> 8<script type="text/javascript" src="ga.js"></script> 9<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 10</head> 11<script type="text/javascript"> 12 $(function(){ 13 $("#menu li").hover(function(){ 14 $("ul",this).show(); 15 }, 16 function(){ 17 $("ul",this).hide(); 18 }); 19 }); 20 </script> 21 <script> 22 $(function(){ 23 24 $("#menubtn").click(function(){ 25 $("#menu").slideToggle(); 26 }); 27 }); 28</script> 29</head> 30<body> 31<div class="boxA"> 32<div class="boxA-inner"> 33<div class="box1"> 34 <div class="site"> 35 <h1><a href="/"><img src="img/logoimg.png" alt="サイトタイトル" width="" height=""></a></h1> 36 </div> 37</div> 38<div class="box2"> 39 <button type="button" id="menubtn"> 40 <i class="fa fa-bars"></i><span>MENU</span> 41 </button> 42 <nav class="menu" id="menu"> 43 <ul id="menubar"> 44 <li><a href="/">トップ</a></li> 45 <li><a href="menu1/">メニュー1</a></li> 46 <li><a href="menu2/">メニュー2</a></li> 47 <li><a href="menu3/">メニュー3</a></li> 48 <li><a>メニュー4</a> 49 <ul class="sub"> 50 <li><a href="menu4/sub1">サブメニュー1</a></li> 51 <li><a href="menu4/sub2">サブメニュー2</a></li> 52 </ul> 53 </li> 54 <li><a href="menu5/">メニュー5</a></li> 55 <li><a href="menu6/">メニュー6</a></li> 56 <li><a href="menu7/">メニュー7</a></li> 57 </ul> 58 </nav> 59</div> 60</div> 61</div> 62</body> 63</html>

css

1@charset "UTF-8"; 2 3 4body { 5 margin: 0;} 6 7/* ########### 980px以下 ########### */ 8@media (max-width: 980px) { 9 10/* トグルボタン */ 11#menubtn {padding: 6px 12px; 12 border: solid 0px; 13 background-color: #ffffff; 14 position: absolute; 15 top: 20px; 16 right: 10px; 17 cursor: pointer} 18 19#menubtn:hover {background-color: #dddddd} 20 21#menubtn:focus {outline: none} 22 23#menubtn i {color: #000000; 24 font-size: 30px} 25 26#menubtn span {display: inline-block; 27 text-indent: -9999px} 28 29/* ナビゲーションメニュー(縦並び) */ 30.menu {display: none} 31 32.menu ul {margin: 0; 33 padding: 0; 34 list-style: none} 35 36.menu li a {display: block; 37 background-color: #ffffff; 38 padding: 5px; 39 margin-left:10px; 40 margin-right:10px; 41 color: #000000; 42 font-size: 14px; 43 text-decoration: none} 44 45.menu li a:hover {background-color: #eeeeee} 46} 47 48 49/* ########### 981px以上 ########### */ 50@media (min-width: 981px) { 51 52/* トグルボタン */ 53#menubtn {display: none} 54 55/* ナビゲーション */ 56#menu {display: block !important} 57 58.menu ul {margin: 0; 59 padding: 0; 60 list-style: none} 61 62.menu li a {display: block; 63 padding: 10px 15px; 64 color: #000000; 65 font-size: 14px; 66 text-decoration: none} 67 68.menu li a:hover { 69 background-color: #eeeeee 70} 71 72.menu ul:after {content: ""; 73 display: block; 74 clear: both} 75 76.menu li {float: left; 77 width: auto} 78 79/* BOX1とBOX2を横に並べる設定 */ 80.boxA:after {content: ""; 81 display: block; 82 clear: both} 83 84.box1 {float: left; 85 width: auto} 86 87.box2 {float: right; 88 width: auto; 89} 90 91.sub{ 92 display: none; 93 position: absolute; 94 background-color: #ffffff; 95 z-index: 1 96 } 97 98.sub li{ 99 clear:both; 100} 101}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

もう少し要件が少ないシンプルなものですが、似たようなものを頑張って自力で実装したことがあります。
正直、jQueryしか使えなくて、アプリケーション開発のお作法も知らない人間(まさに私)が
この手のものをまともに動くようにつくるのは結構骨がおれます。
私がやったときのものすごくザックリとした手順は、

1.PC/SPの初期メニュー形状の切替はCSSで用意しておく
2.PCメニューの開閉動作を実装する
3.SPメニューの開閉動作を実装する
4.PC/SPのメニュー開閉がどのような状態でも、ブレイクポイントをまたいだらメニュー形状がリセットされるようにする

といった感じのものでした。<参考>
4の処理が一番面倒なんですが、これを入れないとブレイクポイントをまたいだ時に
必要な要素が非表示になっていたり、その逆になったりすることがあるので要注意です。

ぶっちゃけ細々とやることが多くて、やり方をアドバイスするというより
ほとんど全部答案作るような感じになっちゃうのでそれはさすがにパスです・・・

なので、もう一度頑張ってslicknavの実装を試みるとか、
slicknavの実装でつまづいた点を質門するとかの方が早いかも…?

投稿2016/10/21 19:31

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hanahana

2016/10/22 12:15

回答ありがとうございます。制作されたWebサイト拝見させていただきました。 独学で制作されたのでしょうか、凄いですね!!! 私もこのようなシンプルなレスポンシブ対応の企業サイトを制作したいと考えています。 slicknavは使いこなすことができずに挫折しました。。。 他のプラグイン等、やり方をもう一度見直したいと思います。 アドバイスありがとうございました。
guest

0

いわゆるレスポンシブデザインを実現したいとのことだと思うのですが、通常は、オープンソースのライブラリを使います。もっとも有名なのは booststrap ですが、例に示されている slicknav もその一つになります。
これらのライブラリをお使いになることをおすすめします。「レスポンシブデザイン」で検索してみてください。

技術的にはレスポンシブデザインのサイトでは viewport を指定します。
参考:viewportとはなにか?

今作られているコードでは viewport を指定されていないので、ページ側でデバイスの大きさを認識して動きを変えるのが難しいと思います。

投稿2016/10/21 11:40

mit0223

総合スコア3401

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mit0223

2016/10/21 11:42

あ、大変失礼しました。コードを良く読まずに回答してしまいました。viewport も指定されていますし、 bootstrap も利用されているのですね。えっと、削除申請しておきます。
hanahana

2016/10/21 12:48

mit0223さん ご回答、ありがとうございます。slicknavはうまく使いこなすことができませんでした。。 引き続き、どなたかご回答お待ちしております。よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問