HTML5响应式导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5响应式导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML5响应式导航</title>
    <link href="css/main.css" rel="stylesheet">
    <link href="css/demo.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="main">

            <!-- Nav -->
            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item"><a href="#">Home</a></li>
                    <li class="nav-item"><a href="#">About</a></li>
                    <li class="nav-item"><a href="#">Services</a></li>
                    <li class="nav-item"><a href="#">Portfolio</a></li>
                    <li class="nav-item"><a href="#">Testimonials</a></li>
                    <li class="nav-item"><a href="#">Contact</a></li>
                </ul>
            </nav>
            <!-- /Nav -->

            <div class="content">
                <p class="content-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Curabitur viverra interdum semper. Ut blandit adipiscing
                    tempor. Etiam scelerisque, felis dignissim rutrum
                    tempor, neque risus sagittis mi, ac aliquam est massa
                    eget lectus. Class aptent taciti sociosqu ad litora
                    torquent per conubia nostra, per inceptos himenaeos. Ut
                    pretium adipiscing ipsum, id iaculis quam mattis et.
                    Cras mollis eleifend tortor, ut venenatis turpis
                    pulvinar id. In hac habitasse platea dictumst.
                    Pellentesque feugiat mi sit amet ligula convallis
                    rhoncus fermentum sem aliquam. Vivamus egestas justo ac
                    nisl facilisis sed aliquam mi ultrices. Suspendisse
                    potenti. Sed elementum blandit nisl eu tempus.
                </p>
                <p class="content-text">
                    Nulla egestas facilisis ipsum sit amet semper. Curabitur
                    leo ante, scelerisque ut ornare ac, egestas sit amet
                    nunc. Aenean eget scelerisque lorem. Donec sapien felis,
                    aliquam id vehicula sit amet, posuere venenatis urna.
                    Aenean at dui libero. Nullam interdum molestie sem,
                    vitae egestas augue pretium at. Duis erat erat, ultrices
                    eu accumsan vitae, consectetur quis orci.
                </p>
                <p class="content-text">
                    Etiam vulputate pellentesque lacus ac ullamcorper.
                    Vestibulum ac semper lacus. Nunc id accumsan lectus. Sed
                    lacinia dui vel nisi tincidunt vitae varius nunc
                    tincidunt. In hac habitasse platea dictumst. Vestibulum
                    purus sapien, eleifend quis commodo sed, euismod non
                    velit. Morbi magna nisl, tincidunt sed pretium ut,
                    consequat sed nunc. Cras at diam est, nec consectetur
                    nisi. Nulla ante arcu, laoreet nec volutpat ut,
                    malesuada quis velit.
                </p>
            </div>
        </div>
    </div>

    <script>
        (function () {

            // Create mobile element
            var mobile = document.createElement('div');
            mobile.className = 'nav-mobile';
            document.querySelector('.nav').appendChild(mobile);

            // hasClass
            function hasClass(elem, className) {
                return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
            }

            // toggleClass
            function toggleClass(elem, className) {
                var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
                if (hasClass(elem, className)) {
                    while (newClass.indexOf(' ' + className + ' ') >= 0) {
                        newClass = newClass.replace(' ' + className + ' ', ' ');
                    }
                    elem.className = newClass.replace(/^\s+|\s+$/g, '');
                } else {
                    elem.className += ' ' + className;
                }
            }

            // Mobile nav function
            var mobileNav = document.querySelector('.nav-mobile');
            var toggle = document.querySelector('.nav-list');
            mobileNav.onclick = function () {
                toggleClass(this, 'nav-mobile-open');
                toggleClass(toggle, 'nav-active');
            };
        })();
    </script>
</body>
</html>

CSS代码(main.css):

/*Todd Motto LabsURL:www.toddmotto.com*/
/*------------------------------------*\ RESET\*------------------------------------*/
*,*:after,*:before{margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font:400 13px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;background:#333;}
/*------------------------------------*\ STRUCTURE\*------------------------------------*/
.wrapper{max-width:1280px;margin:0 auto;}
.header{padding:15px 25px;background:#FFF;border-left:5px solid #2BA6CB;overflow:hidden;}
.logo{float:left;}
.demo-nav{float:right;margin:12px 0;list-style:none;}
.demo-nav-link{}
.demo-nav-link a{color:#2BA6CB;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)