Skip to content

Instantly share code, notes, and snippets.

@gkondo

gkondo/header.css

Last active May 29, 2017 01:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gkondo/0fc175ca7e01002092db98d442180104 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gkondo/0fc175ca7e01002092db98d442180104 to your computer and use it in GitHub Desktop.
Download ZIP
ヘッダー共通パーツ
Raw
header.css
body.fixed {
position: fixed;
}
/* Toggle(Button) */
.head__hmmenuwrap {
display: none;
position: fixed;
/*to body*/
right: 13px;
top: 13px;
z-index: 1001;
width: 30px;
height: 50px;
cursor: pointer;
}
.head__hmmenu {
position: relative;
}
.head__hmmenuwrap span {
display: block;
position: absolute;
/*to div*/
width: 100%;
border-bottom: solid 3px #999;
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-ms-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
}
.head__hmmenuwrap span:nth-child(1) {
top: 0;
}
.head__hmmenuwrap span:nth-child(2) {
top: 11px;
}
.head__hmmenuwrap span:nth-child(3) {
top: 22px;
}
/*Media-queries_____________________________________*/
@media screen and (max-width: 768px) {
.head {
/* Toggle(Button) */
}
.head__nav {
overflow-y: hidden;
height: 100%;
z-index: 1000;
position: fixed;
top: -100%;
/*通常時はビュー外*/
background: rgba(255, 255, 255, 0.7);
width: 100%;
padding: 0 10px;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
text-align: left;
}
.head__nav--left {
top: 0;
left: -100%;
}
.head__nav--right {
top: 0;
right: -100%;
}
.head__navlist {
margin: 0;
}
.head__navlist > li {
display: block;
line-height: 3;
}
.head__navlist > li a {
display: block;
}
.head__navlist > li::after {
content: '';
}
.head__hmmenuwrap {
display: block;
}
.head__submenu {
display: none;
}
/* Click Toggle(Button) */
.head__nav--stateOpen {
/*header menu*/
}
.head__nav--stateOpen .head__hmmenuwrap span {
top: 11px;
}
.head__nav--stateOpen .head__hmmenuwrap span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.head__nav--stateOpen .head__hmmenuwrap span:nth-child(2), .head__nav--stateOpen .head__hmmenuwrap span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.head__nav--stateOpen .head__nav {
overflow-y: scroll;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.head__nav--stateOpen .head__nav--left {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.head__nav--stateOpen .head__nav--right {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
Raw
header.html
<header class="head">
<div class="head__hmmenuwrap head__navToggle">
<div class="head__hmmenu">
<span></span> <span></span> <span></span>
</div>
</div>
<nav class="head__nav">
<ul class="head__navlist">
<li><a href="#">HOME</a></li>
<li>
<a class="head__sub" >MENU1</a>
<ul class="head__submenu">
<li><a href="">subMENU1</a></li>
</ul>
</li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li class="head__navToggle">閉じる</li>
</ul>
</nav>
</header>
Raw
header.js
var state = false;
var scrollpos;
$('.head__navToggle').click(function(){
$('.head').toggleClass('head__nav--stateOpen');
if(state === false) {
scrollpos = $(window).scrollTop();
$('body').addClass('fixed').css({'top': -scrollpos});
state = true;
} else {
$('body').removeClass('fixed').css({'top': 0});
window.scrollTo( 0 , scrollpos );
state = false;
}
});
// トグル表示メニュー
$('.head__sub').click(function(){
$(this).next().slideToggle();
$(this).toggleClass('head__sub--stateActive');
});
Raw
header.scss
@charset "UTF-8";
/*drawerMenu.css
drawmenu.スクリプ
drawmenu header html
と一緒に使ってくだしゃい
あと、jqueryもね！
*/
body.fixed{
position: fixed;
}
/* Toggle(Button) */
.head{
&__hmmenuwrap {
display: none;
position:fixed;/*to body*/
right:13px;
top:13px;
z-index:1001;
width:30px;
height:50px;
cursor:pointer;
}
&__hmmenu {position:relative}
&__hmmenuwrap span {
display:block;
position:absolute;/*to div*/
width:100%;
border-bottom:solid 3px #999;
@include css3(transition, .35s ease-in-out);
}
&__hmmenuwrap span:nth-child(1) {top:0}
&__hmmenuwrap span:nth-child(2) {top:11px}
&__hmmenuwrap span:nth-child(3) {top:22px}
}
/*Media-queries_____________________________________*/
@media screen and (max-height: 640px) {
}
@media screen and (max-width: 768px) {
.head{
&__nav {
overflow-y:hidden;
height:100%;
z-index: 1000;
position:fixed;
top:-100%; /*通常時はビュー外*/
background:rgba(255,255,255,.7);
width:100%;
padding:0 10px;
@include css3(transition, .5s ease-in-out);
text-align:left;
&--left{
top:0;
left:-100%;
}
&--right{
top:0;
right:-100%;
}
}
&__navlist {
margin:0
}
&__navlist > li {
display:block;
line-height:3;
}
&__navlist > li a {
display:block
}
&__navlist > li::after {content:''}
/* Toggle(Button) */
&__hmmenuwrap {display: block}
}
.head__submenu{
display:none;
}
/* Click Toggle(Button) */
.head__nav--stateOpen{
.head__hmmenuwrap span{
top:11px;
&:nth-child(1){
@include css3(transform, rotate(-45deg));
}
&:nth-child(2),
&:nth-child(3){
@include css3(transform, rotate(45deg));
}
}
/*header menu*/
.head__nav {
overflow-y:scroll;
@include css3(transform, translateY(100%));
&--left{
@include css3(transform, translate(100%,0));
}
&--right{
@include css3(transform, translate(-100%,0));
}
}
}
}
Raw
ヘッダー共通化ソース
jqueryでやってください
左から出したいときは
head__nav クラスに　head__nav--left
右から出したいときは
head__nav クラスに　head__nav--right
を付けてください
例　）　左から出すサンプル
<nav class="head__nav">
<ul class="head__navlist">
　　　～省略
</ul>
</nav>
これを
<nav class="head__nav head__nav--right">
<ul class="head__navlist">
　　　～省略
</ul>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment