ナビゲーションメニューをつけよう【Part 2】

ブログ

以前設置したメニューの動きが少し変な気が・・・

ということで、別のものに変更しました。

今回もレスポンシブ対応のメニューです。

最初はいろいろ組み合わせてみようかと思っていました。

PCではマウスオーバーでひらっと、スマホではタップで展開みたいにできたらと。

無理でした。

結局、参考サイトとほぼ一緒。自力でできるようになりたいですね。

次は、スクロールの時に固定できるようにしたいです。

HTML

<div id='menu-bar'>
<div id="toggle"><a>MENU</a></div>
<ul id='menu' class=''>
 <li><a href='#'>Home</a></li>
 <li><a href='#'>記事一覧</a></li>
 <li><a id='has-sub'>カテゴリー</a>
 <div id='grid'>
 <ul id='sub-menu'>
 <li><a href='#'>AdSense</a></li>
 <li><a href='#'>Blogger</a></li>
 <li><a href='#'>Google</a></li>
 <li><a href='#'>PC</a></li>
 <li><a href='#'>ブログ</a></li>
 <li><a href='#'>生活</a></li>
 </ul>
 </div>
 </li>
</ul>
</div>

HTMLはほぼ前回の流用です。

ヘッダのタイトル下に追加します。

CSS

#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: #333;
 color: #fff;
 text-align: center;
 text-decoration: none;
}
#menu li a:hover{
 background: #444;
}
#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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jQueryを設定しておきます。非同期(async)にするとうまく動かないようです。何故？

<script type="text/javascript">
(function($) {
 $(function(){
 $("#toggle").click(function(){
 $("#menu").slideToggle();
 return false;
 });
 $("#has-sub").click(function(){
 $("#sub-menu").slideToggle();
 return false;
 });
 ・・・
 ・・・
 });
})(jQuery);
</script>

一部サブメニュー用に追加しました。クリックやタップでメニューが開閉します。

参考

レスポンシブWebデザインに対応したメニューの作り方【追記あり】｜Webpark

CSSだけで作る動きのあるドロップダウンメニュー｜Webpark

CSSでリストをグリッド状に並べる| m-School

関連記事

はてなブログにナビゲーションメニューをつけよう - CarbonCopy’s diary

 

Go Top