スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに
2014年11月19日
Categories | ホームページ
前回の（「Sidr」を実装 ）の続きです。
実装できたところで、今回はカスタマイズしました。
ボタンを変更し、右からメニューをスライドさせる。
ホームページの横幅が640px以上だと、Sidrのメニューボタンが消え、
横並びのメニューリストが出現する。参考ページ
■ メニューボタンオンで右からメニューがスライド。
■ 横幅が640以上だとメニューボタンが消え、横並びのメニューリストが出現。
HTML
<nav id="navigation">
<ul>
<li class="close"><a href="#" onClick="jQuery.sidr('close', 'right-sidr');">CLOSE</a></li>
<li><a href="https://www.hcz.jp/" title="トップページ">MAIN</a></li>
<li><a href="custom.html" title="カスタム">CUSTOM</a></li>
<li><a href="kakaku.html" title="価格リスト">KAKAKU-LIST</a></li>
<li><a href="spec.html" title="HCZスペック">HCZ-SPEC</a></li>
<li><a href="enqu.html" title="リサーチ">RESARCH</a></li>
<li><a href="oreno-k.html" title="オレのK">ORENO-K</a></li>
<li><a href="download.html" title="ダウンロード">DOWNLOAD</a></li>
<li><a href="hcz-tv.html" title="HCZ TV">HCZ TV</a></li>
<li><a href="what.html" title="更新情報">WHAT'S</a></li>
<li class="haji"><a href="https://www.hcz.jp/blog/" title="ブログ">BLOG</a></li>
</ul>
</nav>
css
/* PC用ナビゲーションバー */
#right-menu{ display:none;}
#navigation {
width:910px;
padding:8px 0 8px;
position:relative;
overflow:hidden;
font-family: "Times New Roman", serif;
clear:both;
margin: 0 auto 16px;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
-moz-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
-webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
background-color:#010066;
}
#navigation ul {
position:relative;
margin: 0 0 0 40px;
}
#navigation li {
letter-spacing:0.07em;
margin: 0;
list-style:none;
position:relative;
float:left;
font-weight:bold;
}
#navigation li a {
color:#08DEE0;
padding:0 10px;
border-left: 1px solid #08DEE0;
-webkit-transition: background-color .9s ease;
-moz-transition: background-color .9s ease;
-o-transition: background-color .9s ease;
transition: background-color .9s ease;
}
#navigation li a:hover {
color: #010066;
background-color: #33F6F8;
}
#navigation li.haji a {
border-right: 1px solid #08DEE0;
}
#navigation li.haji a:hover {
border-right: 1px solid #08DEE0;
}
/* モバイル用ナビゲーションバー */
@media screen and (max-width:640px){
#right-menu{
padding: 10px;
text-decoration: none;
font-weight:bold;
color:#08DEE0;
position:absolute;
right: 5px;
top: 20px;
width:70px;
border-radius: 5px;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
-moz-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
-webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
background-color:#010066;
display: block;
}
#right-menu:hover{
background:#999;
}
#right-menu {
display: block;
}
#navigation{
display: none;
}
}
※ だらだらとスタイルシートが長くなっちゃってますが、あくまでも当ホームページ使用
なので、参考にされる方はコピペ後、調整してください。
