PC版のメニュー要素を作成し、メディアクエリーを設定していきます。
- pc版のメニュー作成
- メディアクエリの作成
- スタイルリング
pc版のメニュー作成
・これまででモバイル版のスタイリングをしてきて無事にハンバーガーメニューを作ることができました。
・今回はPC版のスタイルを作っていこうと思います。ハンバーガーメニューは主に狭いスペースにメニューを並べるとユーザーが使いにくくなってしまうのでモバイル版に使うことが多く、PC版ではその面積を十分に活かすために横並びにすることが多いです。
・なので今回は携帯で見るときのハンバーガーメニューを残しつつPCで見た場合は横並びになるようにしていきたいと思います。
・まずhtmlの方でメニューを書いていきましょう。場所はロゴとマテリアルアイコンの間でいいので携帯版のメニューをコピーしてそこに入りつけていきます。
・その時クラス名は変えておきましょう。今回はpc-menuとしておきます。また、pc版にはマテリアルアイコンは必要ないので削除しておきます。
・こんな感じですね。
<div class=”pc-menu”>
<nav>
<ul>
<li><a href=”#”>Menu</a></li>
<li><a href=”#”>Menu</a></li>
<li><a href=”#”>Menu</a></li>
</ul>
</nav>
</div>
メディアクエリの作成
・次にCSSの方をいじっていきます。CSSはモバイルファーストで作っているのでまず携帯版のときはpc-menuは消えていてほしいのでdisplay: none;と設定しておきます。
・こんな感じです。
.pc-menu {
display: none;
}
・そうしたら600px以上になったらpc-menuを表示させてマテリアルアイコンのsp-menuは消えるように設定していきます。
・このとき使うのがメディアクエリです。
・@media (min-width: 600px) というように書いていけばいいでしょう。
スタイルリング
・600pxになったらpc-menuはdisplayを初期値のblockに戻してついでに右寄せにしたいのでmargin-leftをautoにしておけばいいですね。
・そしてps-menuはdisplayをnoneにしておきましょう。
・こんな感じですね。
@media (min-width: 600px) {
.pc-menu {
display: block;
margin-left: auto;
}
.sp-menu {
display: none;
}
}
・長くなりそうなので今回はここまでにしておきます。
