-Mobile&Pc-L2-
-HTML-
Wehap
HappyWedding
Home
News
Dinner
Contact
資料請求はこちら
-CSS-
* { margin: 0; padding: 0; } #wrap { width: 100%; height: 100vh; background: url(images/BG_Wehap.jpg) no-repeat left center / cover; font-family: 'Great Vibes','Zen Maru Gothic'; position: relative; } h1 { padding-top: 20px; text-indent: 70px; font-size: 36px; position: relative; } h1::before { content: ""; display: inline-block; width: 60px; height: 60px; background: url(images/Wehap.png) no-repeat left top / cover; position: absolute; top: 10px; left: 10px; } button { width: 70px; padding: 15px 0; background: black; position: absolute; top: 10px; right: 10px; z-index: 999; } button i { font-size: 40px; color: white; } /* button on/off */ /* MEnu off */ button .fa-xmark { display: none; } button .fa-bars { display: inline; } /* Menu on */ button.on .fa-xmark { display: inline; } button.on .fa-bars { display: none; } nav { display: none; width: 100%; height: 100vh; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 0; z-index: 99; } ul { list-style: none; position: absolute; top: 50%; right: 50%; transform: translate(50%,-50%); } li { width: 250px; line-height: 92px; background: rgba(255,255,255,0.5); text-align: center; position: relative; } li:not(:last-of-type) { margin-bottom: 10px; } li::before,li::after { content: ""; display: inline-block; width: 52px; height: 52px; background: url(images/icon.png) no-repeat center center / cover; position: absolute; top: 19px; } li::before { left: 5px; } li::after { right: 5px; } li:hover { background: white; } li:hover::before,li:hover::after { transform: rotate(90deg); } a { text-decoration: none; color: black; font-size: 32px; } h2 { color: #e7397c; position: absolute; top: 50%; left: 69px; font-size: min(7vw,100px); transform: translate(0,-50%); } main > p { width: calc(100% - 50px); padding-right: 50px; line-height: 70px; background: rgba(0,0,0,0.5); text-align: right; font-size: 20px; color: white; position: absolute; bottom: 30px; } main > p::before { content: ""; display: inline-block; width: 41px; height: 56px; background: url(images/memo.png) no-repeat center center / cover; transform: translate(-5px, 25%); } footer { font-size: 14px; color: white; position: absolute; bottom: 5px; right: 30px; } @media screen and (min-width:501px) { #wrap { width: 100%; max-width: 1280px; height: 100vh; max-height: 730px; margin: 0 auto; } h1 { padding-top: 40px; text-indent: 70px; } h1::before { top: 30px; } button { display: none; } nav { display: block; background: transparent; } ul { top: 50px; right: 100px; transform: none; } h2 { left: 100px; } } @media screen and (max-height: 570px) { ul { top: 20px; right: 50px; } li { line-height: 50px; } li::before,li::after { width: 30px; height: 30px; } main > p { line-height: 30px; bottom: 25px; } main > p::before { width: 20px; height: 30px; } }
-jQuery-
$(function(){ $('button').on('click',function(){ $(this).next('nav').slideToggle(); if($(this).hasClass('on')){ $(this).removeClass('on'); } else { $(this).addClass('on'); }; }); $(window).on('load ready resize',function(){ if($(window).width() > 500){ $('nav').css('display','block'); } else { $('nav').css('display','none'); $('button').removeClass('on'); } }); });