cssとjQueryでよくあるメインビジュアル
レスポンシブ対応あるある、なスタイルや挙動を分解してストックします。
今回は、よくあるメインビジュアルです。
1.ハンバーガーメニュー
HTML
<header>
<a href="" class="st-Header_Logo"><img src="./img/logo.jpg" alt=""></a>
<div class="st-Header_MenuBtn">
<span></span>
<span></span>
<span></span>
</div>
</header>
<nav>
<ul>
<li><a href="#home-sec-1">HOME</a></li>
<li><a href="#home-sec-2">ABOUT</a></li>
<li><a href="#home-sec-3">WORKS</a></li>
<li><a href="#home-sec-4">PROJECT</a></li>
<li><a href="#home-sec-5">CONTACT</a></li>
</ul>
</nav>
CSS
ヘッダーバー(ページのトップに固定)↓
#home{
margin-top: 40px;
}
header{
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
height: 20px;
padding: 10px;
color: #fff;
background: #fff;
z-index: 20;
}
.st-Header_Logo img{
height: 20px;
}
ハンバーガーメニューアイコン↓
.st-Header_MenuBtn{
width: 20px;
position: relative;
}
.st-Header_MenuBtn:hover{
cursor: pointer;
}
.st-Header_MenuBtn span{
width: 20px;
height: 2px;
position: absolute;
border-top: 3px solid #333;
border-radius: 2px;
transition: all .2s ease-in-out;
}
.st-Header_MenuBtn span:first-child{
top: 0;
}
.st-Header_MenuBtn span:nth-child(2){
top: 8px;
}
.st-Header_MenuBtn span:last-child{
top: 17px;
}
.st-Header_MenuBtn.is-active span:first-child{
top: 7px;
transform: rotate(-45deg);
}
.st-Header_MenuBtn.is-active span:nth-child(2){
display: none;
}
.st-Header_MenuBtn.is-active span:last-child{
top: 7px;
transform: rotate(45deg);
}
開閉するナビゲーション↓
nav{
position: fixed;
top: 40px;
left: 0;
right: 0;
overflow: hidden;
background-color: #fff;
z-index: 10;
}
nav>ul li a{
display: block;
padding: 2% 3.2%;
border-top: 1px dotted #ccc;
}
nav>ul li:last-child{
border-bottom: 1px dotted #ccc;
}
nav>ul li a:hover{
color: #ddd;
}
jQuery
開閉するナビゲーションとハンバーガーメニューアイコンの動き↓
$('nav').hide();
$('.st-Header_MenuBtn').click(function(){
$(this).toggleClass('is-active');
$('nav').slideToggle();
});
ナビゲーションを閉じ、ハンバーガーメニューアイコンも初期表示に戻す↓
$('nav, section').click(function(){
$('.st-Header_MenuBtn').removeClass('is-active');
$('nav').hide();
});
2.ふわふわゆれるスクロールボタン
HTML
<section id="home-sec-1" class="sw-section">
<h1 class="home-Title">Welcome!<br>test</h1>
<a href="#home-sec-2" class="home-ScrollLink">scroll</a>
</section>
CSS
位置設定とふわふわゆれるスクロールボタンのアニメーション↓
#home-sec-1 .home-ScrollLink{
position: absolute;
bottom: 20%;
left: 50%;
margin-left: -3rem;
font-size: 2.6rem;
animation: homeScroll 1s ease-in-out infinite alternate;
}
@keyframes homeScroll {
0% {transform: translateY( -8px);}
100% {transform: translateY( 0px);}
}
くの字アイコン↓
#home-sec-1 .home-ScrollLink:before{
content: "";
position: absolute;
bottom: -20px;
left: 2rem;
width: 20px;
height: 20px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
3.最後に
最近のレスポンシブあるあるで、ストックしておこうと思っているものが今のところこれくらいあります。
・固定ヘッダーに邪魔されないページ内リンク
・邪魔にならない固定ヘッダー(上にスクロールすると最小限のアイコンだけ残り、下にスクロールすると出てくる)
・flexを使ったレスポンシブ対応カラムセット
・SPとPCで画像を切り替えるスライドショー
・フォームのreset(テキストのスタイル周りも含め)
・IE11のline-hight問題をスマートに解消できるcssまたはjs
・レスポンシブ対応table(SPではテキスト表示。PCではテーブル表示かつtheadが固定。)
ほかのレスポンシブ対応あるあるや、参考になる気持ちいいUIのレスポンシブサイトなどありましたら気軽にコメントください。