LoginSignup
13

More than 5 years have passed since last update.

jQueryとCSSでよくあるメインビジュアル

Last updated at Posted at 2017-06-14

cssとjQueryでよくあるメインビジュアル

レスポンシブ対応あるある、なスタイルや挙動を分解してストックします。
今回は、よくあるメインビジュアルです。

screencapture-chinatsu-work-ex_002-1497443170025.png

サンプルページはこちら

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のレスポンシブサイトなどありましたら気軽にコメントください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13