分享兩個 jQuery 小工具

導覽列收合選單

範例網址：導覽列收合選單

  ※紅字可自訂

html:

<div class="header_top">
    <div class="header_top_menu">
        <button type="button" class="nav-toggle-button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
</div>

<div class="header_buttom">
    <nav role="navigation" id="menu">
        <ul>
            <li><a href="javascript:void(0)">按鈕一</a></li>
            <li><a href="#menu">按鈕二</a>
                <ul>
                    <li><a href="javascript:void(0)">按鈕二之一</a></li>
                    <li><a href="javascript:void(0)">按鈕二之二</a></li>
                    <li><a href="javascript:void(0)">按鈕二之三</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">按鈕三</a></li>
            <li><a href="#menu">按鈕四</a>
                <ul>
                    <li><a href="javascript:void(0)">按鈕四之一</a></li>
                    <li><a href="javascript:void(0)">按鈕四之二</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

css (選單上方區塊、按鈕 - 空白處可插入Logo):

/*header[role=banner]*/
.header_top {
    border-bottom: 1px solid #B0B0B0;
    height:50px;
}
.header_top_menu {
    position:absolute;
    top:0;
    right:0;
}
@media only screen and (min-width: 720px){
    .header_top {
        padding:10px 0;
        height:82px;/*62+10+10=82*/
    }
}

css (總選單收合按鈕):

/*toggle-button*/
.nav-toggle-button {
    background-color: #808080;
    margin: 9px;
    float: right;
    padding: 9px 10px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    outline: 0;
}
.nav-toggle-button.active {background-color: #3ab0e2}
.nav-toggle-button .icon-bar {
    background-color: #ffffff;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}
.nav-toggle-button .icon-bar+.icon-bar {margin-top: 4px}
@media screen and (min-width: 720px) {
    .nav-toggle-button {display: none}
}

css (選單):

/*nav[role=navigation]*/
nav[role=navigation] {
    display: none;
}
nav[role=navigation] ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav[role=navigation] > ul > li {
    border-bottom: 1px solid #B0B0B0;
}
nav[role=navigation] a {
    transition: color .3s;
    display: inline-block;
    width: 100%;
    padding: 4px;
    color: #666666;
    font-size: 20px;
    text-align: center;
    font-family: "微軟正黑體";
}
nav[role=navigation] > ul > li > a {
    color: #666666;
}
nav[role=navigation] > ul > li > a:active {
    color: #0000FF;
}
nav[role=navigation] > ul > li > a.list {
    position: relative;
}
nav[role=navigation] > ul > li > a.list #list-svg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
nav[role=navigation] > ul > li > a.list:active #list-path {
    transition: .3s;
    fill: #0000ff;
}
@media only screen and (min-width: 720px){
    nav[role=navigation] {
        display: block !important;
    }
    nav[role=navigation] > ul > li {
        width: 100%;
    }
    nav[role=navigation] > ul > li > a:hover {
        color: #0000FF;
    }
    nav[role=navigation] > ul > li > a.list:hover #list-path {
        fill: #0000ff;
    }
}
nav[role=navigation] > ul > li > ul > li {
    border-top: 1px solid #B0B0B0;
}
nav[role=navigation] > ul > li > ul > li > a {
    background: #EEEEEE;
}
nav[role=navigation] > ul > li > ul > li > a:active {
    color: #0000FF;
}
@media only screen and (min-width: 720px){
    nav[role=navigation] > ul > li > ul > li > a {
        padding: 3px;
    }
    nav[role=navigation] > ul > li > ul > li > a:hover {
        color: #0000FF;
    }
}

jQuery:

$(function(){
    $('.nav-toggle-button').click(function(){
        $('#menu').slideToggle();
        $('.nav-toggle-button').toggleClass('active');
    });
    $('#menu > ul > li > ul').each(function(){
        $(this).css('display', 'none');
    });
    $('#menu > ul > li > a').each(function(){
        if($(this).next('ul').size()){
            $(this).addClass('list');
            $(this).append('<svg height="25" id="list-svg" width="25"><path d="M 5,5 20,5 12.5,20 z" fill="#666666" id="list-path"></path></svg>');
        }
    });
    $('#menu > ul > li > a').click(function(event){
        event.preventDefault();
        
        if($(this).next('ul').size()){
            $(this).next('ul').slideToggle();
        }else{
            location.href = $(this).attr('href');
        }
    });
});

選單完成截圖：

選單截圖-電腦版

選單截圖-手機版

快速回到網頁頂端按鈕

範例網址：快速回到網頁頂端按鈕

  ※紅字可自訂

html:

<div class="pageTop">
    <button>
        <img src="images/Top.png" />
    </button>
</div>

css:

* {
    box-sizing: border-box;
}
body {
    margin: 0 auto;
    font-size: 20px;
}
img {
    vertical-align: top;
    max-width: 100%;
}

.pageTop {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9000;
}
.pageTop button {
    opacity: .7;
    background: transparent;
    outline: none;
    cursor: pointer;
    border: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

jQuery:

$(function(){
    $('.pageTop').hide();
    $(window).scroll(function(){
        if($(this).scrollTop() > 150){
            $('.pageTop').fadeIn();
        }else{
            $('.pageTop').fadeOut();
        }
    });
    
    $('.pageTop button').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});

按鈕完成截圖：

按鈕截圖-電腦版

按鈕截圖-手機版