MAYAKOです。
teratailユーザーの皆様、お世話になっております。
本日は、動きのあるグローバルナビゲーションを作成するにはどうすればよいかについて、質問させていただきます。
画像の通り、タップしたり、クリックするとメニューバーが展開され、それぞれのボタンが表示されるようにしたいのですが、どのようにCSSやJavascript(jQueryのコード)を記述すればよいのか思いつきません。
グローバルナビを固定するのはposition:fixedなどを使えばなんとかなるかな…というところまで気づいたのですが、そこから先が検討がつかず困っています。
このようなグローバルナビゲーションの作成に心当たりのあるユーザー様がいらっしゃいましたら、お知恵をお貸しいただければと思います。
それでは、よろしくお願いいたします。
![イメージ説明]WIDTH:600
追記:もうお一方以上回答を募ります。
できれば、CSSのコードも簡易に記述して画像と似たようなナビのコードを示していただけると嬉しいです。
週末まで何もなければ、最初にご回答いただいている方をベストアンサーとして回答を〆させていただきます。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

回答1件
0
ベストアンサー
そらで書ける範囲だとこれぐらいですかね。
細かい位置や動きなどは調整してみてください。
lang
1<html> 2<head> 3<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 4<script> 5var flg = false; 6$(document).ready(function() { 7 $('#menu').click(function() { 8 if (flg == false) { 9 $('#menus').css('visibility','visible'); 10 $('#menu_a').animate({marginLeft:"100px",top:"-50px"}, 1500); 11 $('#menu_b').animate({marginLeft:"200px"}, 1500); 12 $('#menu_c').animate({marginLeft:"300px",top:"100px"}, 1000) 13 .animate({marginLeft:"200px",top:"150px"}, 500); 14 flg = true; 15 } 16 else { 17 18 $('#menu_a').animate({marginLeft:"0px",top:"0px"}, 0); 19 $('#menu_b').animate({marginLeft:"0px"}, 0); 20 $('#menu_c').animate({marginLeft:"0px",top:"0px"}, 0); 21 $('#menus').css('visibility','hidden'); 22 flg = false; 23 24 } 25 }); 26}); 27</script> 28</head> 29<body> 30 <div id="menu_box" style="position:fixed;top:100px;"> 31 <a id="menu">Menu</a> 32 <div id="menus" style="visibility:hidden;position:relative;"> 33 <a href="#aa" id="menu_a" style="position:absolute;"> 34 aa 35 </a> 36 <a href="#bb" id="menu_b" style="position:absolute;"> 37 vv 38 </a> 39 <a href="#cc" id="menu_c" style="position:absolute;"> 40 cc 41 </a> 42 </div> 43 </div> 44 <div style="height:1000px; width:100%;"> 45 <div style="margin: 0 auto; text-align:center;"> 46 </div> 47 </div> 48</body> 49</html>
追記します。先ほど操作をあやまって空の回答をしてしまいました、すみません。
var num がメニューの数を表しており、円周上になるように調整してみました。あとの細かい調整はしてみてください。
lang
1<html> 2<head> 3<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 4<script> 5var flg = false; 6var num = 5; 7$(document).ready(function() { 8 $('#menu').click(function() { 9 if (flg == false) { 10 $('#menus').css('visibility','visible'); 11 var obj_rad = Math.ceil(180 / num); 12 var left = 0; 13 var top = 0; 14 var origin = -80; 15 for (var i = 0; i < num; i++) { 16 left = Math.cos((origin + (obj_rad * i)) * (Math.PI / 180)) * 100; 17 if (left < 0) left = 10; 18 19 top = Math.sin((origin + (obj_rad * i)) * (Math.PI / 180)) * 100; 20 $('#menu_'+i).animate({marginLeft:left+"px",top:top+"px"}, 1500); 21 } 22 23 flg = true; 24 } 25 else { 26 for (var i = 0; i < num; i++) { 27 $('#menu_'+i).animate({marginLeft:"0px",top:"0px"}, 0); 28 } 29 $('#menus').css('visibility','hidden'); 30 flg = false; 31 32 } 33 }); 34}); 35</script> 36</head> 37<body> 38 <div id="menu_box" style="position:fixed;top:100px;"> 39 <a id="menu">Menu</a> 40 <div id="menus" style="visibility:hidden;position:relative;"> 41 <a href="#aa" id="menu_0" style="position:absolute;"> 42 aa 43 </a> 44 <a href="#bb" id="menu_1" style="position:absolute;"> 45 bb 46 </a> 47 <a href="#cc" id="menu_2" style="position:absolute;"> 48 cc 49 </a> 50 <a href="#dd" id="menu_3" style="position:absolute;"> 51 dd 52 </a> 53 <a href="#ee" id="menu_4" style="position:absolute;"> 54 ee 55 </a> 56 </div> 57 </div> 58 <div style="height:1000px; width:100%;"> 59 <div style="margin: 0 auto; text-align:center;"> 60 </div> 61 </div> 62</body> 63</html>
投稿2015/04/06 08:53
編集2015/04/07 06:58総合スコア74
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/07 01:34
2015/04/07 06:59
2015/04/07 07:12
2015/04/07 07:19
2015/04/10 00:50
2015/04/10 01:06
2015/04/10 06:02