スマホ用のメニューに関して

下記サイト

http://baby-g.jp/

のスマホページのメニュー「三」の様な
動きは全てCSSで表現できるものなのでしょうか。

それともjQueryを交えて表現するものなのでしょうか。

もしこちらの件に関して、
詳しい方は是非ご教授頂けましたら幸いです。

行動規範の内容に同意します

回答2件

「ドロワーメニュー」や「ハンバーガーボタン」と呼ばれるものですね。

実装するには、下記の3パターンがあります。
個人的には、方法2または方法1がわかりやすいかと思います。

■方法1 CSSのみで実装

CSS3だとアニメーションの設定ができるので、CSSだけで実装することが可能なはずです。
参考サイトの内容を詳しく見ていませんが、下記が参考になるかと思います。

参考：CSS3：CSSだけで作るドロワーメニューver2

■方法2 CSS＋jQueryで実装

おそらくCSS＋jQueryを使った実装が一般的かと思います。
下記が参考になります。

参考：CSS3のアニメーションで動くドロワーをプラグイン無しで実装してみる

■方法3 jQueryのプラグインを使って実装

ドロワーメニューの動きが書かれたjQueryプラグインを使って実装する方法です。
参考サイトの内容を詳しく見ていませんが、下記が参考になるかと思います。

参考：横からニュルっとスルっとあいつがでてくる。jQueryドロワーメニュープラグイン【jSlideMenu】を使ってみた

投稿2015/04/20 04:15

退会済みユーザー

総合スコア0

mikio

2015/04/20 08:57

gununuさんご投稿頂き誠にありがとうございます！実際に記載頂きましたURLを参考に実装してみたいと思います。また何か分からない事があれば、こちらへコメントさせて頂きます。その際には、大変お手間をお掛け致しますが、宜しくお願い申し上げます。

行動規範の内容に同意します

こういうのは普通JavaScriptを交えて実装すると思います。トリッキーな方法を駆使するともしかするとCSS実装の道もあるのかも知れませんが… 普通はJSですね。

Twitter bootstrapでもこの手のナビゲーションは用意されてるので、一度チェックしてみると良いと思います。

投稿2015/04/17 14:16

AknEp

総合スコア200

mikio

2015/04/17 14:38

コメントありがとうございます。スマホで実際にやってみたのですが、メニューを押しても戻らないのはどのような原因が考えられるのでしょうか。。。実際のコードは、 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> です。皆さんはスマホページはどのように構築しているのでしょうか？

AknEp

2015/04/17 15:13

さぁ… もうちょっと詳しく状況を書いてもらわないと何とも… > 皆さんはスマホページはどのように構築しているのでしょうか？幾らでも方法はあります。結局はHTML、CSS、JavaScriptで目的の動きと見た目が実現できていれば何でもいいわけです。ただ、bootstrapはかなり使いやすく普及しているフレームワークなので、しばらくこれに慣れたらいいと思いますよ。

mikio

2015/04/18 00:30

AknEpさん大変失礼いたしました。実際に実装した際のコードは下記の通りです。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <title>CANVER</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>  </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">CAnver</a> </div> <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 1px;"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> </ul> </div> </div> </nav> </body> </html> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝やはり色々な方法がありますよね。。ちなみにAknEpさんは構築の際には、何か下準備（例えばベースになるようなHTMLのテンプレートを作るなど）をした後に実際に構築し始めますか？

AknEp

2015/04/18 17:03

あれっ？上記のコード、jsとcssのみ https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js と https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css に置き換えて動かしてみたんですが、僕の環境だといい感じにメニューが開閉されてて、特に問題ない感じがしてます。メニューを開くボタンをもう一回押すと閉じる、という挙動です。 …もしかして、広がって出てきたメニューの中の項目(Linkとか)を押しても閉じないのを気にしてます？これはサンプルなので、そのリンクに実際のハイパーリンクを追加すれば問題ないと思うんですが。 > 構築の際には、何か下準備（例えばベースになるようなHTMLのテンプレートを作るなど）をした後に実際に構築し始めますか？そうですね、いきなり書くのは厳しいものがあるので、ページの種類を分類し、それぞれのレイアウトを考えて、種類別のテンプレートは作るようにしています。実際には結構各手順を横断して一気にやっちゃうことが多いですが。僕の場合は最近はmiddlemanを使って共通部分は括り出すことが多いです。昔はwordpressやmovabletypeを使っていた事もありましたし、DreamWeaverも使ってみたことがあります、定着しませんでしたけど。

mikio

2015/04/20 08:11

ご返信が遅れてしまい申し訳ございません。確かに、 ▼ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー▼ jsとcssのみ https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js と https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css に置き換えて動かしてみたんですが、 ▲ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー▲ の部分へ修正すると正常に開閉しますね。。何がいけなかったのでしょうか。。。現状特にLinkなどを押して閉じない部分に関しては気にしてはおりません。私はwindowsなので、middlemanがインストールできないようです（笑）ありがとうございます。勉強になりました。

行動規範の内容に同意します

あなたの回答