###前提・実現したいこと
ブログでメニューバーを上に固定したいのですが、やり方が分かりません。
初心者です。
お願いします。
###該当のソースコード
<div id="menu"> <div class="toggle-contents"> <div class="toggle-content"> <div class="hatena-module hatena-module-entries-access-ranking" data-count="5" data-display_entry_category="0" data-display_entry_image="1" data-display_entry_image_size_width="50" data-display_entry_image_size_height="50" data-display_entry_body_length="0" data-display_entry_date="0" data-display_bookmark_count="0" data-source="access" > <div class="hatena-module-body"> </div> </div> </div><!--toggle-content--> <div class="toggle-content"> <div class="hatena-module hatena-module-entries-access-ranking" data-count="5" data-display_entry_category="0" data-display_entry_image="1" data-display_entry_image_size_width="50" data-display_entry_image_size_height="50" data-display_entry_body_length="0" data-display_entry_date="0" data-display_bookmark_count="1" data-source="total_bookmark" > <div class="hatena-module-body"> </div> </div> </div><!--toggle-content--> <div class="toggle-content"> <ul class="category-list"> <li><a href='url'>カテゴリ1</a></li> <li><a href='url'>カテゴリ2</a></li> <li><a href='url'>カテゴリ3</a></li> <li><a href='url'>カテゴリ4</a></li> <li><a href='url'>カテゴリ5</a></li> <li><a href='url'>カテゴリ6</a></li> </ul> </div><!--toggle-content--> </div><!--toggle-contents--> <div class="btn-area"> <a class="home-btn" href="homeボタンのURL"><i class="blogicon-home lg"></i><br>HOME</a> <span class="toggle-btn"><i class="blogicon-good lg"></i><br>人気記事</span> <span class="toggle-btn"><i class="blogicon-bookmark lg"></i><br>はてブ順</span> <span class="toggle-btn"><i class="blogicon-list lg"></i><br>カテゴリ</span> <span class="back-btn"><i class="blogicon-chevron-up lg"></i><br>Top</span> </div><!--btn-area--> <div style="clear: both;"></div> </div> <style type="text/css"> #menu{ position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; z-index: 10; } .toggle-content{ display: none; position: fixed; bottom: 50px; background: white; width: 100%; } .toggle-content .hatena-module{ padding: 15px 10px 10px 10px; } .toggle-content .hatena-module-body{ font-size: 80%; } .toggle-content .hatena-module-body a{ color: #444; font-weight: bold; } .toggle-content .hatena-module-body .urllist-image{ width: 50px; height: 50px; } .toggle-content .urllist-item{ padding: 0; margin: 0; min-height: 29px; } .toggle-content .urllist-item::before{ display: none; } .category-list{ list-style-type: none; margin: 0; width: 100%; padding-left: 0; } .category-list li{ border-top: 1px solid #333;/*カテゴリのリスト間の線の色*/ } .category-list a{ display: block; width: 100%; height: 40px; line-height: 40px; text-align: center; background: #444;/*カテゴリの背景色*/ color: #f0f0f0;/*カテゴリの文字色*/ font-size: 80%; } .btn-area a, .btn-area span{ display: block; float: left; width: 20%; height: 50px; line-height: 25px; text-align: center; font-size: 70%; background: #f0f0f0;/*メニュー部分の背景色*/ color: #444;/*メニュー部分の文字色*/ } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ var contentArea = $(".toggle-content"); $(".toggle-btn").click(function(){ var index = $(this).index()-1; var clickedArea = $(contentArea).eq(index); if($(clickedArea).css('display') !='none'){ $(contentArea).slideUp(); }else{ $(contentArea).slideUp(); $(clickedArea).slideDown(); }; }); $(".back-btn").click(function(){ $("html,body").animate({scrollTop:0},"fast"); }); }); </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/30 02:11
2017/01/30 02:16
2017/01/30 02:54
2017/01/30 03:51