Category: JS


2017/03/25

スクロールすると、上部にグローバルナビゲーションを固定する。

html

<div id="navi">
    <ul class="clearfix">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</div>

 

CSS

※好きなように編集してください。

#navi {
 width: 100%;
 height: auto;
 float: left;
 padding-right: 20px;
 padding-left: 20px;
 padding-bottom: 20px;
 padding-top: 20px;
 box-sizing: border-box;
 background-color: #000000;
}
.fixed {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
}

#navi ul{
 width: 100%;
 height: auto;
 float: left;
}

#navi li{
 width: auto;
 height: auto;
 float: left;
 padding-right: 20px;
 padding-left: 20px;
}

#navi li a{
 color: #FFFFFF;
}

 

JS

<script>
 $(function() {
 var nav = $('#navi');
 //表示位置
 var navTop = nav.offset().top+200;
 //ナビゲーションの高さ
 var navHeight = nav.height()+10;
 var showFlag = false;
 nav.css('top', -navHeight+'px');
 //ナビゲーションの位置まできたら表示
 $(window).scroll(function () {
 var winTop = $(this).scrollTop();
 if (winTop >= navTop) {
 if (showFlag == false) {
 showFlag = true;
 nav
 .addClass('fixed')
 .stop().animate({'top' : '0px'}, 200);
 }
 } else if (winTop <= navTop) {
 if (showFlag) {
 showFlag = false;
 nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
 nav.removeClass('fixed');
 });
 }
 }
 });
 });
 </script>
2017/03/25

下にスクロールして一定のところで、「TOPに戻る」ボタンを表示させる

html

<div id="pagetop"><a href="#up">▲</a></div>

 

CSS

※好きなように変更してください

#pagetop {
 width: 100px;
 height: auto;
 float: left;
 position: fixed;
 bottom: 20px;
 right: 20px;
}
#pagetop a {
 width: 100%;
 height: auto;
 float: left;
 background: #555555;
 color: #FFFFFF;
 padding: 30px;
 text-align: center;
 border-radius: 5px;
 box-sizing: border-box;
}
#pagetop a:hover {
 background: #999999;
}

 

JS

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

フェードイン・フェードアウト

<script>
$(function() {
 var topBtn = $('#pagetop'); 
 topBtn.hide();
 //スクロールが100に達したらボタン表示
 $(window).scroll(function () {
 if ($(this).scrollTop() > 100) {
 topBtn.fadeIn();
 } else {
 topBtn.fadeOut();
 }
 });
 //スクロールしてトップ
 topBtn.click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, 500);
 return false;
 });
});
</script>

スライドして下から出現

<script>
$(function() {
 var showFlag = false;
 var topBtn = $('#pagetop'); 
 topBtn.css('bottom', '-100px');
 var showFlag = false;
 //スクロールが100に達したらボタン表示
 $(window).scroll(function () {
 if ($(this).scrollTop() > 100) {
 if (showFlag == false) {
 showFlag = true;
 topBtn.stop().animate({'bottom' : '20px'}, 200); 
 }
 } else {
 if (showFlag) {
 showFlag = false;
 topBtn.stop().animate({'bottom' : '-100px'}, 200); 
 }
 }
 });
 //スクロールしてトップ
 topBtn.click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, 500);
 return false;
 });
});
</script>

 

2017/01/08

アコーディオンメニュー

JS

<script>
 $(function(){
 $("#acMenu dt").on("click", function() {
 $(this).next().slideToggle();
 $(this).toggleClass("active");//追加部分
 });
 });
</script>

 

html

<dl id="acMenu">
    <dt>アコーディオンメニュー1</dt>
    <dd>アコーディオンメニューが開く。</dd>
    <dt>アコーディオンメニュー2</dt>
    <dd>アコーディオンメニューが開く。</dd>
    <dt>アコーディオンメニュー3</dt>
    <dd>アコーディオンメニューが開く。</dd>
</dl>
 

 

CSS

#acMenu dt{
    display:block;
    width:185px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    cursor:pointer;
    background:url(images/i_swich.png) 177px -69px no-repeat;
    padding-right:15px;
    }
#acMenu dd{
    background:#f2f2f2;
    width:200px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    display:none;
    }
#acMenu dt.active{
    background:url(images/i_swich.png) 177px 18px no-repeat;
    }
2017/01/04

簡単設置!スライドメニュー

横から出てくるサイドバーを実装でき、横からだけでなく、縦からでも出すことが出来る優れもの。
設置はもちろん、汎用性もあり便利です。

公式サイトから一式ダウンロードできます。

http://jillix.github.io/jQuery-sidebar/

 

 

公式サイトからダウンロードしたものだと、スタイルシートなど、URL読み込ませているので、
一式まとめてみました。

ダウンロード

 

2017/01/04

タブメニューの実装

たまにタブメニューを実装させるのですが、毎回何か簡単で扱いやすいのないかなと思ってました。

 

html

<!-- ▼ tab menu -->
<ul id="tab_menu">
  <li class="active">TAB1</li>
  <li>TAB2</li>
  <li>TAB3</li>
</ul>
<!-- ▲ tab menu -->

<!-- ▼ tab content -->
<div id="tab_con">
  <div class="active">TAB1 CONTENT</div>
  <div>TAB2 CONTENT</div>
  <div>TAB3 CONTENT</div>
</div>
<!-- ▲ tab content>

 

CSS

/* tab menu
----------------------------------- */
#tab_menu {
 list-style: none;
}

#tab_menu li {
 display: inline-block;
 padding-top: 5px;
 padding-bottom: 5px;
 padding-left: 25px;
 padding-right: 25px;
 background: #EEEEEE;
}
#tab_menu li.active {
 background: #CCCCCC;
 color: #FFFFFF;
}

#tab_menu li:hover {
 cursor: pointer;
 transition: 1.0s;
}


/* tab content
----------------------------------- */
#tab_con {
 padding: 25px;
 background-color: #CCCCCC;
}
#tab_con div {
 display: none;
}
#tab_con div.active {
 display: block;
}

 

jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>

<script>
$(function(){
  $('#tab_menu li').on('click', function(){
    if($(this).not('active')){
      // タブメニュー
      $(this).addClass('active').siblings('li').removeClass('active');
      // タブの中身
      var index = $('#tab_menu li').index(this);
      $('#tab_con div').eq(index).addClass('active').siblings('div').removeClass('active');
    }
  });
});
</script>
2013/01/17

高さを揃えるJS

 <script src="パス/heightLine.js" type="text/javascript"></script>

heightLine.jsをダウンロード

 

class=”heightLine”

グループ分けも可能
class=”heightLine-●●●”