【jQery】よく使う動きをまとめました。

小清水和真

3年前

jQeryでよく使う動きをまとめました。

コーディングの際によく使うjQeryをまとめました。
jQery設定の際に参考にしてください。

参考サイト：jQery動きのまとめ

ハンバーガーメニュー

参考サイト：世界一わかりやすいWeb制作

HTML


  
  
  



    
        Menu1
        Menu2
        Menu3
        Menu4
        Menu5

CSS

/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #555;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(0,0,0,0.7);
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;

}

jQery

$(function() {
    $('.hamburger').click(function() {
        $(this).toggleClass('active');
 
        if ($(this).hasClass('active')) {
            $('.globalMenuSp').addClass('active');
        } else {
            $('.globalMenuSp').removeClass('active');
        }
    });
});

完成版サンプルはこちら

アコーディオン

参考サイト： 125naroom

HTML



  
    アコーディオン、一つ開けると他は閉じる
    
      
        アコーディオンの中身です。
      
    
  
  
  
    アコーディオン、一つ開けると他は閉じる
    
      
        アコーディオンの中身です。
      
    
  
  
  
    アコーディオン、一つ開けると他は閉じる
    
      
        アコーディオンの中身です。

CSS

/*====================================================================
.s_02 .accordion_one
====================================================================*/
.s_02 .accordion_one {
	max-width: 1024px;
	margin: 0 auto;
}
.s_02 .accordion_one .accordion_header {
	background-color: #db0f2f;
	color: #fff;
	font-size: 26px;
	font-weight: bold;
	padding: 20px 11%;
	text-align: center;
	position: relative;
	z-index: +1;
	cursor: pointer;
	transition-duration: 0.2s;
}
.s_02 .accordion_one:nth-of-type(2) .accordion_header {
    background-color: #ff9a05;
}
.s_02 .accordion_one:nth-of-type(3) .accordion_header {
    background-color: #1c85d8;
}
.s_02 .accordion_one .accordion_header:hover {
	opacity: .8;
}
.s_02 .accordion_one .accordion_header .i_box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	right: 5%;
	width: 40px;
	height: 40px;
	border: 1px solid #fff;
	margin-top: -20px;
	box-sizing: border-box;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: center center;
	transition-duration: 0.2s;
}
.s_02 .accordion_one .accordion_header .i_box .one_i {
	display: block;
	width: 18px;
	height: 18px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: center center;
	transition-duration: 0.2s;
	position: relative;
}
.s_02 .accordion_one .accordion_header.open .i_box {
	-webkit-transform: rotate(-360deg);
	transform: rotate(-360deg);
}
.s_02 .accordion_one .accordion_header .i_box .one_i:before, .s_02 .accordion_one .accordion_header .i_box .one_i:after {
	display: flex;
	content: '';
	background-color: #fff;
	border-radius: 10px;
	width: 18px;
	height: 4px;
	position: absolute;
	top: 7px;
	left: 0;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transform-origin: center center;
}
.s_02 .accordion_one .accordion_header .i_box .one_i:before {
	width: 4px;
	height: 18px;
	top: 0;
	left: 7px;
}
.s_02 .accordion_one .accordion_header.open .i_box .one_i:before {
	content: none;
}
.s_02 .accordion_one .accordion_header.open .i_box .one_i:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.s_02 .accordion_one .accordion_inner {
	display: none;
	padding: 30px 30px;
	border-left: 2px solid #db0f2f;
	border-right: 2px solid #db0f2f;
	border-bottom: 2px solid #db0f2f;
	box-sizing: border-box;
}
.s_02 .accordion_one:nth-of-type(2) .accordion_inner {
	border-left: 2px solid #ff9a05;
	border-right: 2px solid #ff9a05;
	border-bottom: 2px solid #ff9a05;
}
.s_02 .accordion_one:nth-of-type(3) .accordion_inner {
	border-left: 2px solid #1c85d8;
	border-right: 2px solid #1c85d8;
	border-bottom: 2px solid #1c85d8;
}
.s_02 .accordion_one .accordion_inner .box_one {
	height: 300px;
}
.s_02 .accordion_one .accordion_inner p.txt_a_ac {
	margin: 0;
}
@media screen and (max-width: 1024px) {
	.s_02 .accordion_one .accordion_header {
		font-size: 18px;
	}
	.s_02 .accordion_one .accordion_header .i_box {
		width: 30px;
		height: 30px;
		margin-top: -15px;
	}
}
@media screen and (max-width: 767px) {
	.s_02 .accordion_one .accordion_header {
		font-size: 16px;
		text-align: left;
		padding: 15px 60px 15px 15px;
	}
}

/*====================================================================
以下は不要です。
====================================================================*/

body {
	font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	letter-spacing: .025em;
	line-height: 1.8;
	margin: 0;
}
@media screen and (max-width: 1024px) {
	body {
		font-size: 14px;
	}
}
.section {
	max-width: 1024px;
	margin: 0 auto;
	padding: 20px 20px 500px;
}
.section p._a {
	font-size: 12px;
	font-weight: bold;
	margin: 30px 0 0;
}
.section p._a .link {
	display: inline-block;
	color: #607D8B;
	padding-left: 1.3em;
	text-indent: -1.3em;
}
.section p._a .link:before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-top: 2px solid #607D8B;
	border-right: 2px solid #607D8B;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-right: 10px;
}
.oneBox {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 250px;
	margin: 0 auto 50px;
	overflow: hidden;
}

jQery

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_02 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
    //クリックされた.accordion_oneの中の.accordion_header以外の.accordion_oneの中の.accordion_headerに隣接する.accordion_oneの中の.accordion_innerを閉じる
    $('.s_02 .accordion_one .accordion_header').not($(this)).next('.accordion_one .accordion_inner').slideUp();
    $('.s_02 .accordion_one .accordion_header').not($(this)).removeClass("open");
  });
});

完成版サンプルはこちら

slickスライダー

参考サイト： Weblasts

HTML


  ①
  ②
  ③

jQery

$(function(){
  $('.slider').slick({
    autoplay:true,
    speed:1000,
    autoplaySpeed:5000,
    fade:true
  });
});

完成版サンプルはこちら

モーダルウィンドウ

参考サイト： ma-ya’s CREATE

HTML





  
  
    
      Here are modal contents!
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    
    
      ×

CSS



/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 500px;
  padding: 10px 30px;
  background-color: #fff;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}


/* 以下ボタンスタイル */
button {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #282828;
  border-radius: 2px;
  cursor: pointer;
}

#openModal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

jQery

$(function () {
  $('#openModal').click(function(){
      $('#modalArea').fadeIn();
  });
  $('#closeModal , #modalBg').click(function(){
    $('#modalArea').fadeOut();
  });
});

完成版サンプルはこちら

ページトップ

参考サイト：コトダマウェブ

HTML

CSS

#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 50px;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #3f98ef;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #3f98ef;
}

jQery

jQuery(function() {
    var pagetop = $('#page_top');   
    pagetop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {  //100pxスクロールしたら表示
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });
  $('a[href^="#"]').click(function(){
    var time = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" ? 'html' : href);
    var distance = target.offset().top;
    $("html, body").animate({scrollTop:distance}, time, "swing");
    return false;
  });
});

完成版サンプルはこちら

モバイルバージョンを終了

jQeryでよく使う動きをまとめました。

ハンバーガーメニュー

HTML

CSS

jQery

完成版サンプルはこちら

アコーディオン

HTML

CSS

jQery

完成版サンプルはこちら

slickスライダー

HTML

jQery

完成版サンプルはこちら

モーダルウィンドウ

HTML

Here are modal contents!

CSS

jQery

完成版サンプルはこちら

ページトップ

HTML

CSS

jQery

完成版サンプルはこちら

共有: