ナビゲーションメニュー撤去
重たいので撤去したメニューの記録。
HTML
<div id='menu-bar'> <div id="toggle"><a>MENU</a></div> <ul id='menu' class=''> <li><a href='http://carboncopy.hatenablog.com'>Home</a></li> <li><a href='http://carboncopy.hatenablog.com/archive'>Archive</a></li> <li><a id='has-sub'>Category</a> <div id='grid'> <ul id='sub-menu'> <li><a href='http://carboncopy.hatenablog.com/archive/category/AdSense'>AdSense</a></li> <li><a href='http://carboncopy.hatenablog.com/archive/category/Blogger'>Blogger</a></li> <li><a href='http://carboncopy.hatenablog.com/archive/category/Google'>Google</a></li> <li><a href='http://carboncopy.hatenablog.com/archive/category/PC'>PC</a></li> <li><a href='http://carboncopy.hatenablog.com/archive/category/ブログ'>ブログ</a></li> <li><a href='http://carboncopy.hatenablog.com/archive/category/生活'>生活</a></li> </ul> </div> </li> </ul> </div>
CSS
/* Menu */ #menu-bar{ z-index : 10; height: 40px; line-height: 1; cursor: pointer; } #menu{ z-index : 10; position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 33%; margin: 0; padding: 0; } #menu li a{ display: block; padding: 12px 0 10px; background: #444; color: #fff; text-align: center; text-decoration: none; } #menu li a:hover{ background: #333; } #toggle{ display: none; } #has-sub::after{ content:'▼'; position: absolute; right: 15px; } #sub-menu{ display: none; } @media only screen and (max-width: 480px) { #menu{ display: none; } #menu li{ width: 100%; } #toggle{ display: block; position: relative; width: 100%; background: #222; } #toggle a{ display: block; position: relative; padding: 12px 0 10px; border-bottom: 1px solid #444; color: #fff; text-align: center; text-decoration: none; } #toggle:before{ display: block; content: ""; position: absolute; top: 50%; left: 10px; width: 20px; height: 20px; margin-top: -10px; background: #fff; } #toggle a:before, #toggle a:after{ display: block; content: ""; position: absolute; top: 50%; left: 10px; width: 20px; height: 4px; background: #222; } #toggle a:before{ margin-top: -6px; } #toggle a:after{ margin-top: 2px; } } #menu-bar ul ul { position: absolute; } #menu li ul{ list-style: none; position: absolute; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #grid { width: 450px; } #grid li { float: left; list-style: none; } #grid ul li{ width: 80px; height: 80px; } #grid ul li a{ padding: 32.5px 0 32.5px; }
JavaScript
jQueryも設定のこと。
<script type="text/javascript"> (function($) { $(function(){ $("#toggle").click(function(){ $("#menu").slideToggle(); return false; }); $("#has-sub").click(function(){ $("#sub-menu").slideToggle(); return false; }); $(window).resize(function(){ var win = $(window).width(); var p = 480; if(win > p){ $("#menu").show(); } else { $("#menu").hide(); } }); }); })(jQuery); </script>