スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

3カラムでウィンドウの幅が狭くなると左右のメニューがプルダウンメニューに変わる

DEMOは←こちら

PC表示サイズのカラムが崩れる幅 960pxが切れるときブルタウンメニューにしました。ブルタウンメニューの幅はMOBILE用に310pxにしてみました。いかがでしょうか?
2015年1月19日現在表示の当blog ではさらに1200pxの表示まで設定してあります。

jQueryscriptはheadのなかに貼ります。



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){

/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>

HTML



<body>
<div id="container">
<div id="header"><!--ここからheader-->
<h1>title</h1>
<nav id="nav-wrap"><!--ここからブルタウンメニューの内容-->
<div id="nav">
ここに左側の内容と同じものを張り付ける

<div class="box"><!--/ここからbox-->

このboxの中に右側と同じものを張り付ける

</div><!--/ここまでbox-->

</div><!-- /ここまでid -->
</nav><!-- nav-wrap --><!--ここまでブルタウンメニューの内容-->
</div><!--ここまで/header-->

<div id="wrapper"><!-- /ここからラッパー -->

<div id="main"><!--ここから真ん中-->
ここに真ん中の内容
</div><!--ここまで真ん中-->

<div id="left"><!--ここから左側-->
ここに左側の内容
</div><!-- /left --><!--ここまで左側-->

</div><!-- /ここまでラッパー -->

<div id="right">ここに右側の内容

</div><!-- /right -->
<div id="footer">フッター部の内容</div><!-- /footer -->
</div>

</body>

以下CSSはheadの中に


#pagewrap {
width: 960px;
max-width: 94%;
margin: 30px auto 0;
}
body {
text-align : center;
}
.box {
display: none; /* hide menu icon initially *//* boxの中身ここでは非表示 */

}
div#container {
max-width:960px;
width:100%; /* コンテンツ幅を100%に設定 */
margin-left : auto; /* 左側のマージンを自動算出 */
margin-right : auto; /* 右側のマージンを自動算出 */
text-align : left; /* body要素で指定したセンタリングを戻す */
border : 0px solid red;
}
div#header {
max-width:958px;
width:100%;
border : 1px solid #ccc;
}
div#wrapper {
float : left; /* ラッパー(mainカラム+leftカラム)を左側に回り込ませる */
max-width : 640px; /* 幅を max-width 640px(430px+200px)+10pxに設定 */
width:100%;
border : 0px solid pink;
}
div#main {
float : right; /* mainカラム(記事等)を右側に回り込ませる */
max-width : 430px; /* max-widthを430pxに設定 */
width:100%;
border : 1px solid #ccc;
}
div#left {
float : left; /* leftカラム(メニュー等)を左側に回り込ませる */
width : 200px; /* 幅を200pxに設定 */
border : 1px solid #ccc;
}
div#right {
float : right; /* rightカラム(掲示板等)を右側に回り込ませる */
width : 310px; /* 幅を310pxに設定 */
border : 1px solid #ccc;
}
div#footer {
clear : both; /* 全ての回り込みの解除 */
border : 1px solid #ccc;
}

#nav-wrap {
margin-top: 20px;
display: none; /* hide menu icon initially *//*ここでは非表示 */
}

/* menu icon*/
#menu-icon {
display: none; /* hide menu icon initially *//*アイコンもここでは非表示 */
}

/* nav link */
#nav a {
padding: 4px 15px;
display: block;
color: #000;
background: #ecebeb;
}
#nav a:hover {
background: #f8f8f8;
}

#nav li:hover > ul {
display: block; /* show dropdown on hover */
}

/******************************
MOBILE PC表示サイズ↑のカラム合計幅 960pxが切れるときブルタウンメニューに設定しました。
*******************************/
@media screen and (max-width: 960px) {
body {
text-align : center;
}
.box {
display: block;  /* boxの中身ここでは表示 */
}
div#container {
max-width : 600px;
width: 100%; /* コンテンツ幅を100%に設定 */
margin-left : auto; /* 左側のマージンを自動算出 */
margin-right : auto; /* 右側のマージンを自動算出 */
text-align : left; /* body要素で指定したセンタリングを戻す */
border : 0px solid #ccc;
}
div#header {
max-width : 600px;
width: 100%;
border : 1px solid #ccc;
}
h1 {
float: right;
}
div#wrapper {
float : left;
max-width : 600px;
width: 100%;
border : 0px solid #ccc;
}
div#main {
float : left;
max-width : 600px;
width: 100%;
border : 1px solid #ccc;
}
div#left {
display: none; /* hide dropdown *//*ここでは非表示 */
}
div#right {
display: none; /* hide dropdown *//*ここでは非表示 */
}
div#footer {
clear : both; /* 全ての回り込みの解除 */
border : 1px solid #ccc;
max-width : 600px;
width: 100%;
}
/* nav-wrap */
#nav-wrap {
position: relative;
display: block;    /*ここでは表示する */
}

/* menu icon */
#menu-icon {
color: #000;
width: 42px;
height: 30px;
background: #f0f8ff url(menu-icon.png) no-repeat 10px center;
padding: 8px 10px 0 42px;
cursor: pointer;
border: solid 1px #666;
display: block; /* show menu icon *//*ここでは表示する */
}
#menu-icon:hover {
background-color: #fff0f5;
}
#menu-icon.active {
background-color: #fff5ee;
}

/* main nav */
#nav {
clear: both;
position: absolute;
top: 38px;
width: 290px;

overflow: scroll;
z-index: 10000;
padding: 5px;
background: #f0f8ff;
border: solid 1px #999;
display: none; /* visibility will be toggled with jquery */
}
#nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px;
}
#nav a,
#nav ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #666;
border: none;
}
#nav a:hover,
#nav ul a:hover {
background: none;
color: #000;
}

/* dropdown */
#nav ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
#nav ul li {
margin: 3px 0 3px 15px;
}

}

@media screen and (min-width: 960px) {

/* ensure #nav is visible on desktop version */
#nav {
display: block !important;
}

}



きょうはここまで。
3カラムでウィンドウの幅が狭くなると左右のメニューがプルダウンメニューに変わる/2015/01/19 10:38/javascript/ トラックバック(-)/ comment(0)

comment

投稿















管理者にだけ表示を許可する

| ホーム |

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。