带效果的移动导航条

本地在线演示，源码在线演示
本地源代码下载：http://download.csdn.net/detail/erdouzhang/9783696
移动导航源代码下载：http://download.csdn.net/detail/erdouzhang/9783694

1.引入文件：

  <link rel="stylesheet" href="css/component.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">//自己写的样式
  <script src="js/modernizr.custom.js"></script>
  <script src="js/classie.js"></script>
  <script src="js/clipboard.min.js"></script>
  <script src="js/html5shiv.js"></script>

2.html:

<section class="section section--menu" id="Alonso"><!-- 更改不同的id就可以更换效果 -->
    <h2 class="section__title">导航1Alonso</h2>
    <span class="link-copy"></span>
    <nav class="menu menu--alonso">
        <ul class="menu__list">
            <li class="menu__item menu__item--current"><a href="#" class="menu__link">首页</a></li>
            <li class="menu__item"><a href="#" class="menu__link">产品展示</a></li>
            <li class="menu__item"><a href="#" class="menu__link">课程介绍</a></li>
            <li class="menu__item"><a href="#" class="menu__link">关于我们</a></li>
            <li class="menu__item"><a href="#" class="menu__link">联系我们</a></li>
            <li class="menu__line"></li>
        </ul>
    </nav>
</section>

3.css：

* {
  padding: 0;margin: 0;
}
section {
  background-color: pink;
}
section ul li {
  line-height: 50px;
}
.menu__link {     //a标签样式
    font-size: 1.05em;
    font-weight: bold;
    display: block;
    padding: 1em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu--alonso .menu__line {  //下划线样式
    position: absolute;
    top: 100%;
    left: 0;
    width: 60px;
    height: 2px;
    pointer-events: none;
    border: 1px solid #fff;
    border-width: 0 47px;
    background: #d94f5c;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);
    -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
    transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
}

4.js:

<script>
(function() {
    [].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
        var menuItems = menu.querySelectorAll('.menu__link'),
            setCurrent = function(ev) {
                ev.preventDefault();

                var item = ev.target.parentNode; // li

                // return if already current
                if (classie.has(item, 'menu__item--current')) {
                    return false;
                }
                // remove current
                classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
                // set current
                classie.add(item, 'menu__item--current');
            };

        [].slice.call(menuItems).forEach(function(el) {
            el.addEventListener('click', setCurrent);
        });
    });

    [].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
        link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
        new Clipboard(link);
        link.addEventListener('click', function() {
            classie.add(link, 'link-copy--animate');
            setTimeout(function() {
                classie.remove(link, 'link-copy--animate');
            }, 300);
        });
    });
})(window);
</script>