スライド

スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに

Categories | ホームページ

前回の(「Sidr」を実装 )の続きです。

実装できたところで、今回はカスタマイズしました。

ボタンを変更し、右からメニューをスライドさせる。

ホームページの横幅が640px以上だと、Sidrのメニューボタンが消え、

横並びのメニューリストが出現する。参考ページ

 

1109 01 224x300 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに    1109 02 224x300 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに

■ メニューボタンオンで右からメニューがスライド。

 

1109 01 224x300 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに   1109 03 300x224 スライドメニュー「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: &quot;Times New Roman&quot;, 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;
	}
}

※ だらだらとスタイルシートが長くなっちゃってますが、あくまでも当ホームページ使用

なので、参考にされる方はコピペ後、調整してください。

 

 

Sidr 「sidr-package-1.2.1」と、アンドロイド(Android)は相性悪し 改善方法 につづく

Comment(0) | Trackback(1)

TAGS: / / / / / | 2014年11月19日 |