// ---------------------------
// 大事な変数定義
// ---------------------------
$openClass:navOpen;
$nav_z-index:100;
$ease-time:.3s;
// ---------------------------
// 大事なstyle
// ---------------------------
#wrapper{
// メニューオープン時の各style
&.#{$openClass}{
// メニューオープン時にコンテンツエリアがスクロールしないように position: fixed;
position: fixed;
left: 0;
width: 100%;
height: 100%;
.nav{
transform:translateY(0);
}
.memubtn{
&:before{
content:'close';
color:#fff;
}
}
}
}
.nav{
position:fixed;
z-index: $nav_z-index;
top: 0;
left: 0;
width: 100%;
height: 100%;
// スマホでのスクロールを滑らかにするためのstyle
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
overflow-y: auto;
transform: translateY(-100%); // ここはお好みで
transition: $ease-time transform ease; // ここはお好みで
&-inner{
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
overflow-y:auto;
}
}
// 今回はgooleのMaterial iconsを使用してmenubtnを作成
.memubtn{
display: block;
position:fixed;
right: 15px;
top: 10px;
z-index: #{$nav_z-index+1}; //navのz-indexより大きく
color:#000;
&:before{
content:'menu';
font-family: 'Material Icons';
font-size: 40px;
}
}
// ---------------------------
// デザイン調整のためのstyle
// ---------------------------
img{
width: 100%;
}
.head{
height: 80px;
.logo{
text-align: center;
height: 80px;
line-height: 80px;
font-size: 30px;
}
}
.main{
display: block;
max-width:1230px;
padding-left: 15px;
padding-right: 15px;
margin: 0 auto;
}
.nav{
background-color: rgba(0,0,0,.8);
&-inner{
padding:40px 15px;
}
}
.glnav{
&-item{
text-align: center;
padding: 20px 0;
a{
color:#fff;
font-size: 20px;
}
}
}
content_copy
コードをクリップボードにコピー