WEB前端制作响应式导航

eclipse 前端开发插件|前端开发经理招聘要求|前端开发新技术
代码片段 1

<!DOCTYPE html>
<head>
    <title>前端网首页响应式导航</title>
    <meta name=”viewport” id=”viewport” content=”width=device-width, initial-scale=1″>
    <meta charset=’utf-8′>
    <script type=”text/javascript” src=></script>
    <style type=”text/css”>
        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol,
        ul {
            list-style: none;
        }
        blockquote,
        q {
            quotes: none;
        }
        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: ”;
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        /*clearfix*/
        .clearfix::before,
        .clearfix::after {
            content: ‘ ‘;
            display: table;
        }
        .clearfix::after {
            clear: both;
        }
        /* body */
        body {
            background: #FFF;
            color: #ddd;
            font-family: verdana, Microsoft YaHei, Tahoma, sans-serif;
            font-size: 16px;
            line-height: 56px;
            padding: 0px;
            margin: 0px;
        }
        ul {
            -webkit-padding-start: 0px;
            -webkit-margin-before: 0em;
            -webkit-margin-after: 0em;
        }
        /* navbar-header */
        .container .navbar-header {
            background: #333;
            margin: 0 20px;
            padding-right: 20px;
        }
        .container .navbar-header button {
            position: relative;
            float: right;
            padding: 9px 8px;
            margin-top: 10px;
            margin-right: 15px;
            margin-bottom: 8px;
            background-color: transparent;
            background-image: none;
            border: 1px solid #888;
            border-radius: 4px;
        }
        .container .navbar-header button:hover {
            background: #222;
        }
        .container .navbar-header button:focus {
            outline: 0;
        }
        .container .navbar-header button .sr-only {
            display: none;
        }
        .container .navbar-header button .icon-bar {
            width: 22px;
            height: 2px;
            display: block;
            border-radius: 1px;
            background-color: #888;
            margin-top: 4px;
        }
        .container .navbar-header button .icon-bar:nth-child(2) {
            margin-top: 0px;
        }
        .container .navbar-header .navbar-brand {
            float: left;
            margin-left: 15px;
        }
        .container .navbar-header a {
            line-height: 0px;
        }
        /* navbar-collapse */
        .container .navbar-collapse {
            text-align: center;
            background: #444;
            font-size: 12px;
        }
        .container .navbar-collapse .w3cnav {
            font-size: 16px;
            line-height: 55px;
            position: relative;
        }
        .container .navbar-collapse .w3cnav #nvmore {
            font-size: 14px;
            height: 47px;
            position: absolute;
            left: 0px;
            bottom: -48px;
        }
        .container .navbar-collapse .w3cnav,
        .container .navbar-collapse .navmore {
            margin: 0px;
            padding: 0px;
            border-top: 1px solid #555;
        }
        .container .navbar-collapse .navmore {
            border-bottom: 1px solid #555;
        }
        .container .navbar-collapse ul li {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            display: inline-block;
        }
        .container .navbar-collapse a {
            text-decoration: none;
            color: #8b8b8b;
        }
        .container .navbar-collapse a:hover,
        nav .container .navbar-collapse a:active {
            color: #fff;
            text-shadow: 1px 0 20px #fff;
        }
        .container .navbar-collapse a:hover,
        nav .container .navbar-collapse a:active,
        nav .container .navbar-collapse a:visited,
        nav .container .navbar-collapse a:focus {
            transition: color .2s linear;
        }
        .container .navbar-collapse .w3cnav li {
            padding: 0 12px;
        }
        .container .navbar-collapse .navmore li {
            width: 50px;
            height: auto;
            line-height: 30px;
            padding: 0px;
        }
        .container .navbar-collapse .userInfoBar {
            border: none;
            float: left;
        }
        .container .navbar-collapse .userInfoBar .hd_count {
            display: block;
            padding: 0 3px;
            top: 30px;
            left: 25px;
            height: 15px;
            line-height: 16px;
            text-align: center;
            font-size: 10px;
            color: #fff;
            border-radius: 2px;
            background: #b00;
            position: absolute;
        }
        .container .navbar-collapse .userInfoBar li {
            display: block;
            position: relative;
            width: 50px;
            height: 55px;
            /* 高度需要修改*/
            border-top: 1px solid #555;
            background: #333 url(“http://cdn.w3cfuns.com/resource/images/extend/hdbg.png”) no-repeat;
        }
        .container .navbar-collapse .userInfoBar li:hover {
            background-color: #fff;
        }
        .container .navbar-collapse .userInfoBar li:first-child {
            border-top: none;
        }
        .container .navbar-collapse .userInfoBar #hduser {
            height: 112px;
            background-position: 100px 100px;
        }
        .container .navbar-collapse .userInfoBar #hduser a {
            display: block;
            height: 55px;
            text-align: vertical;
        }
        .container .navbar-collapse .userInfoBar #hduser a img {
            position: absolute;
            top: 42px;
            left: 12px;
            width: 26px;
            height: 26px;
        }
        .container .navbar-collapse .userInfoBar #hdtask {
            background-position: 12px -193px;
        }
        .container .navbar-collapse .userInfoBar #hdtask:hover {
            background-position: -114px -193px;
        }
        .container .navbar-collapse .userInfoBar #hdnotice {
            background-position: 12px -57px;
        }
        .container .navbar-collapse .userInfoBar #hdnotice:hover {
            background-position: -114px -57px;
        }
        .container .navbar-collapse .userInfoBar #hdshop {
            background-position: 12px -102px;
        }
        .container .navbar-collapse .userInfoBar #hdshop:hover {
            background-position: -114px -102px;
        }
        .container .navbar-collapse .userInfoBar #hdjob {
            background-position: 12px -242px;
        }
        .container .navbar-collapse .userInfoBar #hdjob:hover {
            background-position: -114px -242px;
        }
        .container .navbar-collapse .userInfoBar #hdsetting {
            background-position: 12px -147px;
        }
        .container .navbar-collapse .userInfoBar #hdsetting:hover {
            background-position: -114px -147px;
        }
        /*hduser_menu*/
        .container .navbar-collapse #hduser_menu {
            float: right;
            height: 112px;
            width: 70%;
            margin-right: 45px;
        }
        .container .navbar-collapse #hduser_menu #hd_uname {
            display: none;
        }
        .container .navbar-collapse #hduser_menu ul {
            float: right;
            margin-left: 10px;
        }
        .container .navbar-collapse #hduser_menu ul li {
            line-height: 28px;
            display: block;
        }
        .container .navbar-collapse #hduser_menu #extendbar {
            float: right;
            line-height: 28px;
        }
        .container .navbar-collapse #hduser_menu #extendbar #eb_r span {
            display: none;
        }
        .container .navbar-collapse #hduser_menu #extendbar #eb_r a {
            display: block;
        }
        .container .navbar-collapse .hdmenu {
            float: right;
            height: 56px;
            margin-right: 45px;
            width: 70%;
        }
        .container .navbar-collapse .hdmenu li {
            float: right;
            margin-right: 4px;
        }
        .container .navbar-collapse #hdnotice_menu,
        .container .navbar-collapse #hdsetting_menu {
            line-height: 28px;
        }
        /* layout */
        .container {
            width: 100%;
            height: 55px;
            position: relative;
            background: #333333;
        }
        .container .navbar-collapse {
            width: 100%;
        }
        /* collapse */
        .collapse {
            display: none;
        }
        .collapse.in {
            display: block;
            height: auto;
        }
        .collapsing {
            position: relative;
            overflow: hidden;
            -webkit-transition-timing-function: ease;
            -o-transition-timing-function: ease;
            transition-timing-function: ease;
            -webkit-transition-duration: .35s;
            -o-transition-duration: .35s;
            transition-duration: .35s;
            -webkit-transition-property: height, visibility;
            -o-transition-property: height, visibility;
            transition-property: height, visibility;
        }
        /* 大屏幕样式表 */
        @media (min-width: 768px) {
            .navbar-toggle {
                display: none;
            }
            .container .navbar-collapse {
                float: left;
                height: 55px;
                overflow: hidden;
                background: #333333;
                display: block;
                width: 75%;
            }
            .container .navbar-header {
                width: 15%;
                height: 55px;
                float: left;
            }
            .container .navbar-collapse .w3cnav {
                border: none;
                float: left;
            }
            .container .navbar-collapse .w3cnav li {
                height: 54px;
                /* 防止阴影高度过高菜单栏1px*/
            }
            .container .navbar-collapse .w3cnav li:hover {
                background-color: #222222;
            }
            .container .navbar-collapse .w3cnav li a {
                color: #ddd;
            }
            .container .navbar-collapse .w3cnav li a:hover {
                color: #fff;
            }
            .container .navbar-collapse .w3cnav .active {
                background: blue;
                color: #fff;
            }
            .container .navbar-collapse .w3cnav #nvmore {
                top: 0px;
                left: 590px;
                z-index: 10;
                width: 28px;
                height: 54px;
                padding-right: 25px;
                background: #333333 url(“http://cdn.w3cfuns.com/resource/images/extend/hdbg.png”) no-repeat;
                background-position: 49px 27px;
            }
            .container .navbar-collapse .w3cnav #nvmore.active {
                background-position: -34px 27px;
                background-color: #fff;
            }
            .container .navbar-collapse .navmore {
                z-index: 15;
                border: 1px solid red;
                width: 200px;
                height: 30px;
                position: absolute;
                top: 45px;
                background-color: #fff;
                border: 1px solid #222222;
                display: none;
            }
            .container .navbar-collapse .navmore li {
                float: left;
            }
            .container .navbar-collapse .navmore li a {
                color: #333333;
            }
            .container .navbar-collapse .navmore li a:hover {
                color: #4F7AC7;
                text-decoration: underline;
            }
            .container .navbar-collapse .userInfoBar {
                float: right;
                margin-left: 100px;
            }
            .container .navbar-collapse .userInfoBar li {
                float: left;
                height: 55px;
                border: none;
            }
            .container .navbar-collapse .userInfoBar li:hover {
                border-bottom: 10px solid #fff;
            }
            .container .navbar-collapse .userInfoBar #hduser {
                height: 55px;
            }
            .container .navbar-collapse .userInfoBar #hduser a img {
                top: 14px;
            }
            .container .navbar-collapse #hduser_menu {
                position: absolute;
                top: 45px;
                width: 200px;
                height: auto;
                border: 1px solid #222222;
                background-color: #fff;
                display: none;
            }
            .container .navbar-collapse #hduser_menu a {
                color: #333333;
            }
            .container .navbar-collapse #hduser_menu a:hover {
                text-decoration: underline;
            }
            .container .navbar-collapse #hduser_menu #hd_uname {
                display: block;
                width: 100%;
                line-height: 35px;
                font-weight: 700;
                height: 35px;
                font-size: 14px;
            }
            .container .navbar-collapse #hduser_menu ul {
                border-top: 1px dashed #ddd;
                width: 100%;
            }
            .container .navbar-collapse #hduser_menu ul li {
                width: 100px;
                height: 24px;
                float: left;
            }
            .container .navbar-collapse #hduser_menu #extendbar {
                width: 100%;
                height: 30px;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_l {
                width: 100px;
                float: left;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_l a {
                display: block;
                background: url(http://cdn.w3cfuns.com/resource/images/extend/vip.png) no-repeat 0 -5px;
                width: 80px;
                padding-left: 10px;
                line-height: 18px;
                height: 18px;
                margin-top: 6px;
                margin-left: 6px;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_l a:hover {
                color: #FF6600;
                background-position: 0 -35px;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_r {
                float: right;
                width: 100px;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_r a {
                display: inline;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_r span {
                display: inline;
            }
        }
    </style>
</head>
<body>
    <div class=’container’>
        <div class=”navbar-header clearfix”>
            <button type=”button” class=”navbar-toggle” data-target=”#navbar-collapse”>
                <span class=”sr-only”>Toggle navigation</span>
                <span class=”icon-bar”></span>
                <span class=”icon-bar”></span>
                <span class=”icon-bar”></span>
            </button>
            <a class=”navbar-brand” href=”#”><img src=”http://cdn.w3cfuns.com/resource/images/extend/logo/w3cfuns_logo_hd.png” alt=”前端网(W3Cfuns)”></a>
        </div>
        <div class=”navbar-collapse clearfix collapse” id=”navbar-collapse”>
            <ul class=’w3cnav’>
                <li><a href=’#’>首页</a></li>
                <li><a href=’#’>笔记</a></li>
                <li><a href=’#’>问问</a></li>
                <li><a href=’#’>前端</a></li>
                <li><a href=’#’>技术</a></li>
                <li><a href=’#’>教程</a></li>
                <li><a href=’#’>资源</a></li>
                <li><a href=’#’>招聘</a></li>
                <li><a href=’#’>我的前端</a></li>
                <li id=”nvmore”><a href=’#’>更多</a></li>
            </ul>
            <ul class=’navmore’>
                <li><a href=’#’>帮派</a></li>
                <li><a href=’#’>试题</a></li>
                <li><a href=’#’>面试</a></li>
                <li><a href=’#’>神器</a></li>
            </ul>
            <ul class=”userInfoBar”>
                <li id=”hduser”>
                    <a href=”home.php?mod=space&amp;uid=5476424&amp;do=profile”><img alt=”lgl” src=”/uc_server/avatar.php?uid=5476424&amp;size=small”></a>
                </li>
                <li id=”hdtask”>
                    <a href=”home.php?mod=task”><i class=”hd_count”>2</i></a>
                </li>
                <li id=”hdnotice”>
                    <a href=”home.php?mod=space&amp;do=pm”></a>
                </li>
                <li id=”hdshop”>
                    <a href=”store.php”></a>
                </li>
                <li id=”hdjob”>
                    <a href=”job.php?mod=resume”><i class=”hd_count”>1</i></a>
                </li>
                <li id=”hdsetting”>
                    <a href=”home.php?mod=spacecp”></a>
                </li>
            </ul>
            <div id=”hduser_menu”>
                <div id=”hd_uname”><a href=”home.php?mod=space&amp;uid=5476424&amp;do=profile”>lgl</a></div>
                <ul>
                    <li><a href=”home.php?mod=space&amp;do=blog&amp;view=me&amp;from=space”>我的笔记</a></li>
                    <li><a href=”home.php?mod=space&amp;do=favorite”>我的收藏</a></li>
                    <li><a href=”home.php”>个人中心</a></li>
                    <li><a href=”home.php?mod=space&amp;uid=5476424&amp;do=index”>前端博客</a></li>
                </ul>
                <ul>
                    <li><a href=”store.php?mod=home_my”>我的教程</a></li>
                    <li><a href=”home.php?mod=space&amp;do=friend”>我的好友</a></li>
                    <li><a href=”home.php?mod=space&amp;do=thread&amp;view=me”>我的帖子</a></li>
                </ul>
                <div id=”extendbar”>
                    <div id=”eb_l”><a id=”vip” href=”vip.php” title=”点击立刻开通VIP尊贵会员”>开通VIP</a></div>
                    <div id=”eb_r”>
                        <a href=”home.php?mod=spacecp”>设置</a>
                        <span>|</span>
                        <a href=”member.php?mod=logging&amp;action=logout&amp;formhash=6486e069″>退出</a>
                    </div>
                </div>
            </div>
            <ul id=”hdtask_menu” class=”hdmenu usermenu”>
                <li><a href=”home.php?mod=task”>新任务<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
                <li><a href=”home.php?mod=task&amp;item=doing”>进行中任务<span class=”hd_numpd”>(</span><b>2</b><span>)</span></a></li>
                <li><a href=”home.php?mod=task&amp;item=done”>已完成任务<span class=”hd_numpd”>(</span><b class=”taskdone”>2</b><span>)</span></a></li>
            </ul>
            <ul id=”hdnotice_menu” class=”hdmenu usermenu”>
                <li><a href=”home.php?mod=space&amp;do=pm”>我的消息<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
                <li><a href=”home.php?mod=space&amp;do=notice&amp;view=interactive”>前端互动<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
                <li><a href=”home.php?mod=space&amp;do=notice&amp;view=app”>应用提醒<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
                <li><a href=”home.php?mod=space&amp;do=notice&amp;view=system”>系统提醒<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
                <li><a href=”home.php?mod=space&amp;do=notice&amp;view=mypost”>帖子通知<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
            </ul>
            <ul id=”hdshop_menu” class=”hdmenu usermenu”>
                <li><a href=”store.php?mod=home_my”>我的教程</a></li>
                <li><a href=”store.php”>教程超市</a></li>
                <li><a href=”store.php?mod=mycart&amp;modtype=paylist”>购物车<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
            </ul>
            <ul id=”hdjob_menu” class=”hdmenu usermenu”>
                <li><a href=”job.php?mod=resume”>完善简历<span class=”hd_numpd”>(</span><b>1</b><span>)</span></a></li>
                <li><a href=”job.php?mod=resume&amp;do=view” target=”_blank”>预览简历</a></li>
            </ul>
            <ul id=”hdsetting_menu” class=”hdmenu usermenu”>
                <li><a href=”home.php?mod=spacecp&amp;ac=profile”>基本资料</a></li>
                <li><a href=”home.php?mod=spacecp&amp;ac=avatar”>头像设置</a></li>
                <li><a href=”home.php?mod=spacecp&amp;ac=profile&amp;op=contact”>联系方式</a></li>
                <li><a href=”home.php?mod=spacecp&amp;ac=profile&amp;op=edu”>教育情况</a></li>
                <li><a href=”home.php?mod=spacecp&amp;ac=profile&amp;op=password”>密码安全</a></li>
                <li><a href=”portal.php?mod=portalcp”>门户管理</a></li>
            </ul>
        </div>
    </div>
    <script type=”text/javascript”>
        (function () {
            var trigger = document.querySelector(‘.navbar-toggle’);
            var toggleElement = document.querySelector(‘#navbar-collapse’);
            var transitioning = null;
            //判断是否具有某个类名
            HTMLElement.prototype.hasClass = function (clas) {
                var obj_class = this.className,//获取 class 内容.
                    obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组.
                var x = 0;
                for (x in obj_class_lst) {
                    if (obj_class_lst[x] == clas) {//循环数组, 判断是否包含cls
                        return true;
                    }
                }
                return false;
            }
            HTMLElement.prototype.removeClass = function (clas) {
                var obj_class = ‘ ‘ + this.className + ‘ ‘;//获取 class 内容, 并在首尾各加一个空格.
                obj_class = obj_class.replace(/(\s+)/gi, ‘ ‘),//将多余的空字符替换成一个空格.
                    removed = obj_class.replace(‘ ‘ + clas + ‘ ‘, ‘ ‘);//在原来的 class 替换掉首尾加了空格的 class.
                removed = removed.replace(/(^\s+)|(\s+$)/g, ”);//去掉首尾空格.
                this.className = removed;//替换原来的 class.
                return this;
            }
            HTMLElement.prototype.addClass = function (cls) {
                var obj_class = this.className,//获取 class 内容.
                    blank = (obj_class != ”) ? ‘ ‘ : ”;//判断获取到的 class 是否为空, 如果不为空在前面加个’空格’.
                var added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.
                this.className = added;//替换原来的 class.
                return this;
            }
            /*获取浏览器动画结束事件
            function transitionEnd() {
            var el = document.createElement(‘div’);
            var transEndEventNames = {
             WebkitTransition : ‘webkitTransitionEnd’,
             MozTransition : ‘transitionend’,
             OTransition : ‘oTransitionEnd otransitionend’,
             transition : ‘transitionend’
            }
            for (var name in transEndEventNames) {
                if (el.style[name] !== undefined) {
            return transEndEventNames[name] ;
                }
            }
            return false // explicit for ie8 ( ._.)
            }
            */
            function show() {
                if (transitioning || toggleElement.hasClass(‘in’)) return;
                toggleElement.removeClass(‘collapse’).addClass(‘collapsing’).style.height = ‘0px’;
                transitioning = 1;
                var completeshow = function () {
                    toggleElement
                        .removeClass(‘collapsing’)
                        .addClass(‘collapse in’);
                    transitioning = 0
                }
                toggleElement.style.height = toggleElement.scrollHeight + ‘px’;
                setTimeout(completeshow, 350);
                /*transitionEvent=transitionEnd();
                transitionEvent&&toggleElement.removeEventListener(transitionEvent,completehide);
                transitionEvent&&toggleElement.addEventListener(transitionEvent,completeshow);
                */
            }
            function hide() {
                if (transitioning || !toggleElement.hasClass(‘in’)) return;
                toggleElement.removeClass(‘collapse in’).addClass(‘collapsing’);
                toggleElement.style.height = toggleElement.scrollHeight + ‘px’;
                toggleElement.offsetHeight; //这句话很重要 ,你敢去掉试试。
                transitioning = 1;
                var completehide = function () {
                    transitioning = 0
                    toggleElement
                        .removeClass(‘collapsing’);
                    toggleElement.addClass(‘collapse’);
                }
                toggleElement.style.height = ‘0’;
                setTimeout(completehide, 350);
                /*
                transitionEvent&&toggleElement.removeEventListener(transitionEvent,completeshow);
                transitionEvent&&toggleElement.addEventListener(transitionEvent,completehide);
                */
            }
            function toggle() {
                var act = toggleElement.hasClass(‘in’) ? hide() : show();
            }
            trigger.onclick = toggle;
            //定义屏幕尺寸大于768时的函数
            var screewidth = document.body.clientWidth;
            if (screewidth > 768) {
                var nvmore = document.querySelector(‘#nvmore’);
                var navmore = document.querySelector(‘.navmore’);
                nvmore.addEventListener(‘mouseover’, function (e) {
                    document.querySelector(‘#nvmore a’)
                    .style.color = ‘#333333’; navmore.style.display = ‘block’;
                    navmore.style.left = e.clientX + ‘px’;
                    nvmore.addClass(‘active’);
                });
                nvmore.addEventListener(‘mouseout’, function () {
                    document.querySelector(‘#nvmore a’)
                    .style.color = ‘#ddd’; navmore.style.display = ‘none’; nvmore.removeClass(‘active’);
                });
                var hduser = document.querySelector(‘#hduser’);
                var hduser_menu = document.querySelector(‘#hduser_menu’);
                hduser.addEventListener(‘mouseover’, function (e) {
                    hduser_menu.style.display = ‘block’;
                    hduser_menu.style.left = e.clientX + ‘px’;
                });
                hduser_menu.addEventListener(‘mouseout’, function () { hduser_menu.style.display = ‘none’; })
            }
        })()
    </script>
</body>
</html>

代码在运行的时候老是会遇到一些很奇怪的bug,还有就是当屏幕缩小时如果点击了下拉菜单,再当扩大屏幕的时候,页面没办法回复,现在还在思考解决办法,我想是js的问题。希望大神们多多指教。
后续。。。。。。。
为什么bootstrap没有我的问题,重新拜读了一遍源码,原来他有这么一段很关键的代码,我怎么才知道![code]@media (min-width: 768px) {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
}[/code]原来这就是关键所在啊,当屏幕大于768时,用important修改样式,这样充分避免了样式的冲突。我们来看看修改后的效果。

代码片段 2

<!DOCTYPE html>
<head>
    <title>前端网首页响应式导航</title>
    <meta name=”viewport” id=”viewport” content=”width=device-width, initial-scale=1″>
    <meta charset=’utf-8′>
    <script type=”text/javascript” src=></script>
    <style type=”text/css”>
        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol,
        ul {
            list-style: none;
        }
        blockquote,
        q {
            quotes: none;
        }
        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: ”;
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        /*clearfix*/
        .clearfix::before,
        .clearfix::after {
            content: ‘ ‘;
            display: table;
        }
        .clearfix::after {
            clear: both;
        }
        /* body */
        body {
            background: #FFF;
            color: #ddd;
            font-family: verdana, Microsoft YaHei, Tahoma, sans-serif;
            font-size: 16px;
            line-height: 56px;
            padding: 0px;
            margin: 0px;
        }
        ul {
            -webkit-padding-start: 0px;
            -webkit-margin-before: 0em;
            -webkit-margin-after: 0em;
        }
        /* navbar-header */
        .container .navbar-header {
            background: #333;
            margin: 0 20px;
            padding-right: 20px;
        }
        .container .navbar-header button {
            position: relative;
            float: right;
            padding: 9px 8px;
            margin-top: 10px;
            margin-right: 15px;
            margin-bottom: 8px;
            background-color: transparent;
            background-image: none;
            border: 1px solid #888;
            border-radius: 4px;
        }
        .container .navbar-header button:hover {
            background: #222;
        }
        .container .navbar-header button:focus {
            outline: 0;
        }
        .container .navbar-header button .sr-only {
            display: none;
        }
        .container .navbar-header button .icon-bar {
            width: 22px;
            height: 2px;
            display: block;
            border-radius: 1px;
            background-color: #888;
            margin-top: 4px;
        }
        .container .navbar-header button .icon-bar:nth-child(2) {
            margin-top: 0px;
        }
        .container .navbar-header .navbar-brand {
            float: left;
            margin-left: 15px;
        }
        .container .navbar-header a {
            line-height: 0px;
        }
        /* navbar-collapse */
        .container .navbar-collapse {
            text-align: center;
            background: #444;
            font-size: 12px;
        }
        .container .navbar-collapse .w3cnav {
            font-size: 16px;
            line-height: 55px;
            position: relative;
        }
        .container .navbar-collapse .w3cnav #nvmore {
            font-size: 14px;
            height: 47px;
            position: absolute;
            left: 0px;
            bottom: -48px;
        }
        .container .navbar-collapse .w3cnav,
        .container .navbar-collapse .navmore {
            margin: 0px;
            padding: 0px;
            border-top: 1px solid #555;
        }
        .container .navbar-collapse .navmore {
            border-bottom: 1px solid #555;
        }
        .container .navbar-collapse ul li {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            display: inline-block;
        }
        .container .navbar-collapse a {
            text-decoration: none;
            color: #8b8b8b;
        }
        .container .navbar-collapse a:hover,
        nav .container .navbar-collapse a:active {
            color: #fff;
            text-shadow: 1px 0 20px #fff;
        }
        .container .navbar-collapse a:hover,
        nav .container .navbar-collapse a:active,
        nav .container .navbar-collapse a:visited,
        nav .container .navbar-collapse a:focus {
            transition: color .2s linear;
        }
        .container .navbar-collapse .w3cnav li {
            padding: 0 12px;
        }
        .container .navbar-collapse .navmore li {
            width: 50px;
            height: auto;
            line-height: 30px;
            padding: 0px;
        }
        .container .navbar-collapse .userInfoBar {
            border: none;
            float: left;
        }
        .container .navbar-collapse .userInfoBar .hd_count {
            display: block;
            padding: 0 3px;
            top: 30px;
            left: 25px;
            height: 15px;
            line-height: 16px;
            text-align: center;
            font-size: 10px;
            color: #fff;
            border-radius: 2px;
            background: #b00;
            position: absolute;
        }
        .container .navbar-collapse .userInfoBar li {
            display: block;
            position: relative;
            width: 50px;
            height: 55px;
            /* 高度需要修改*/
            border-top: 1px solid #555;
            background: #333 url(“http://cdn.w3cfuns.com/resource/images/extend/hdbg.png”) no-repeat;
        }
        .container .navbar-collapse .userInfoBar li:hover {
            background-color: #fff;
        }
        .container .navbar-collapse .userInfoBar li:first-child {
            border-top: none;
        }
        .container .navbar-collapse .userInfoBar #hduser {
            height: 112px;
            background-position: 100px 100px;
        }
        .container .navbar-collapse .userInfoBar #hduser a {
            display: block;
            height: 55px;
            text-align: vertical;
        }
        .container .navbar-collapse .userInfoBar #hduser a img {
            position: absolute;
            top: 42px;
            left: 12px;
            width: 26px;
            height: 26px;
        }
        .container .navbar-collapse .userInfoBar #hdtask {
            background-position: 12px -193px;
        }
        .container .navbar-collapse .userInfoBar #hdtask:hover {
            background-position: -114px -193px;
        }
        .container .navbar-collapse .userInfoBar #hdnotice {
            background-position: 12px -57px;
        }
        .container .navbar-collapse .userInfoBar #hdnotice:hover {
            background-position: -114px -57px;
        }
        .container .navbar-collapse .userInfoBar #hdshop {
            background-position: 12px -102px;
        }
        .container .navbar-collapse .userInfoBar #hdshop:hover {
            background-position: -114px -102px;
        }
        .container .navbar-collapse .userInfoBar #hdjob {
            background-position: 12px -242px;
        }
        .container .navbar-collapse .userInfoBar #hdjob:hover {
            background-position: -114px -242px;
        }
        .container .navbar-collapse .userInfoBar #hdsetting {
            background-position: 12px -147px;
        }
        .container .navbar-collapse .userInfoBar #hdsetting:hover {
            background-position: -114px -147px;
        }
        /*hduser_menu*/
        .container .navbar-collapse #hduser_menu {
            float: right;
            height: 112px;
            width: 70%;
            margin-right: 45px;
        }
        .container .navbar-collapse #hduser_menu #hd_uname {
            display: none;
        }
        .container .navbar-collapse #hduser_menu ul {
            float: right;
            margin-left: 10px;
        }
        .container .navbar-collapse #hduser_menu ul li {
            line-height: 28px;
            display: block;
        }
        .container .navbar-collapse #hduser_menu #extendbar {
            float: right;
            line-height: 28px;
        }
        .container .navbar-collapse #hduser_menu #extendbar #eb_r span {
            display: none;
        }
        .container .navbar-collapse #hduser_menu #extendbar #eb_r a {
            display: block;
        }
        .container .navbar-collapse .hdmenu {
            float: right;
            height: 56px;
            margin-right: 45px;
            width: 70%;
        }
        .container .navbar-collapse .hdmenu li {
            float: right;
            margin-right: 4px;
        }
        .container .navbar-collapse #hdnotice_menu,
        .container .navbar-collapse #hdsetting_menu {
            line-height: 28px;
        }
        /* layout */
        .container {
            width: 100%;
            height: 55px;
            position: relative;
            background: #333333;
        }
        .container .navbar-collapse {
            width: 100%;
        }
        /* collapse */
        .collapse {
            display: none;
        }
        .navbar-collapse.in {
            display: block;
            overflow-y: auto;
        }
        .collapsing {
            position: relative;
            overflow: hidden;
            -webkit-transition-timing-function: ease;
            -o-transition-timing-function: ease;
            transition-timing-function: ease;
            -webkit-transition-duration: .35s;
            -o-transition-duration: .35s;
            transition-duration: .35s;
            -webkit-transition-property: height, visibility;
            -o-transition-property: height, visibility;
            transition-property: height, visibility;
        }
        /* 大屏幕样式表 */
        @media (min-width: 768px) {
            .navbar-collapse.collapse {
                display: block !important;
                height: 55px !important;
                padding-bottom: 0;
                overflow: hidden !important;
            }
            .navbar-toggle {
                display: none;
            }
            .container .navbar-collapse {
                float: left;
                height: 55px;
                overflow: hidden;
                background: #333333;
                display: block;
                width: 75%;
            }
            .container .navbar-header {
                width: 15%;
                height: 55px;
                float: left;
            }
            .container .navbar-collapse .w3cnav {
                border: none;
                float: left;
            }
            .container .navbar-collapse .w3cnav li {
                height: 54px;
                /* 防止阴影高度过高菜单栏1px*/
            }
            .container .navbar-collapse .w3cnav li:hover {
                background-color: #222222;
            }
            .container .navbar-collapse .w3cnav li a {
                color: #ddd;
            }
            .container .navbar-collapse .w3cnav li a:hover {
                color: #fff;
            }
            .container .navbar-collapse .w3cnav .active {
                background: blue;
                color: #fff;
            }
            .container .navbar-collapse .w3cnav #nvmore {
                top: 0px;
                left: 590px;
                z-index: 10;
                width: 28px;
                height: 54px;
                padding-right: 25px;
                background: #333333 url(“http://cdn.w3cfuns.com/resource/images/extend/hdbg.png”) no-repeat;
                background-position: 49px 27px;
            }
            .container .navbar-collapse .w3cnav #nvmore.active {
                background-position: -34px 27px;
                background-color: #fff;
            }
            .container .navbar-collapse .navmore {
                z-index: 15;
                border: 1px solid red;
                width: 200px;
                height: 30px;
                position: absolute;
                top: 45px;
                background-color: #fff;
                border: 1px solid #222222;
                display: none;
            }
            .container .navbar-collapse .navmore li {
                float: left;
            }
            .container .navbar-collapse .navmore li a {
                color: #333333;
            }
            .container .navbar-collapse .navmore li a:hover {
                color: #4F7AC7;
                text-decoration: underline;
            }
            .container .navbar-collapse .userInfoBar {
                float: right;
                margin-left: 100px;
            }
            .container .navbar-collapse .userInfoBar li {
                float: left;
                height: 55px;
                border: none;
            }
            .container .navbar-collapse .userInfoBar li:hover {
                border-bottom: 10px solid #fff;
            }
            .container .navbar-collapse .userInfoBar #hduser {
                height: 55px;
            }
            .container .navbar-collapse .userInfoBar #hduser a img {
                top: 14px;
            }
            .container .navbar-collapse #hduser_menu {
                position: absolute;
                top: 45px;
                width: 200px;
                height: auto;
                border: 1px solid #222222;
                background-color: #fff;
                display: none;
            }
            .container .navbar-collapse #hduser_menu a {
                color: #333333;
            }
            .container .navbar-collapse #hduser_menu a:hover {
                text-decoration: underline;
            }
            .container .navbar-collapse #hduser_menu #hd_uname {
                display: block;
                width: 100%;
                line-height: 35px;
                font-weight: 700;
                height: 35px;
                font-size: 14px;
            }
            .container .navbar-collapse #hduser_menu ul {
                border-top: 1px dashed #ddd;
                width: 100%;
            }
            .container .navbar-collapse #hduser_menu ul li {
                width: 100px;
                height: 24px;
                float: left;
            }
            .container .navbar-collapse #hduser_menu #extendbar {
                width: 100%;
                height: 30px;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_l {
                width: 100px;
                float: left;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_l a {
                display: block;
                background: url(http://cdn.w3cfuns.com/resource/images/extend/vip.png) no-repeat 0 -5px;
                width: 80px;
                padding-left: 10px;
                line-height: 18px;
                height: 18px;
                margin-top: 6px;
                margin-left: 6px;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_l a:hover {
                color: #FF6600;
                background-position: 0 -35px;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_r {
                float: right;
                width: 100px;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_r a {
                display: inline;
            }
            .container .navbar-collapse #hduser_menu #extendbar #eb_r span {
                display: inline;
            }
        }
    </style>
</head>
<body>
    <div class=’container’>
        <div class=”navbar-header clearfix”>
            <button type=”button” class=”navbar-toggle” data-target=”#navbar-collapse”>
                <span class=”sr-only”>Toggle navigation</span>
                <span class=”icon-bar”></span>
                <span class=”icon-bar”></span>
                <span class=”icon-bar”></span>
            </button>
            <a class=”navbar-brand” href=”#”><img src=”http://cdn.w3cfuns.com/resource/images/extend/logo/w3cfuns_logo_hd.png” alt=”前端网(W3Cfuns)”></a>
        </div>
        <div class=”navbar-collapse clearfix collapse” id=”navbar-collapse”>
            <ul class=’w3cnav’>
                <li><a href=’#’>首页</a></li>
                <li><a href=’#’>笔记</a></li>
                <li><a href=’#’>问问</a></li>
                <li><a href=’#’>前端</a></li>
                <li><a href=’#’>技术</a></li>
                <li><a href=’#’>教程</a></li>
                <li><a href=’#’>资源</a></li>
                <li><a href=’#’>招聘</a></li>
                <li><a href=’#’>我的前端</a></li>
                <li id=”nvmore”><a href=’#’>更多</a></li>
            </ul>
            <ul class=’navmore’>
                <li><a href=’#’>帮派</a></li>
                <li><a href=’#’>试题</a></li>
                <li><a href=’#’>面试</a></li>
                <li><a href=’#’>神器</a></li>
            </ul>
            <ul class=”userInfoBar”>
                <li id=”hduser”>
                    <a href=”home.php?mod=space&amp;uid=5476424&amp;do=profile”><img alt=”lgl” src=”/uc_server/avatar.php?uid=5476424&amp;size=small”></a>
                </li>
                <li id=”hdtask”>
                    <a href=”home.php?mod=task”><i class=”hd_count”>2</i></a>
                </li>
                <li id=”hdnotice”>
                    <a href=”home.php?mod=space&amp;do=pm”></a>
                </li>
                <li id=”hdshop”>
                    <a href=”store.php”></a>
                </li>
                <li id=”hdjob”>
                    <a href=”job.php?mod=resume”><i class=”hd_count”>1</i></a>
                </li>
                <li id=”hdsetting”>
                    <a href=”home.php?mod=spacecp”></a>
                </li>
            </ul>
            <div id=”hduser_menu”>
                <div id=”hd_uname”><a href=”home.php?mod=space&amp;uid=5476424&amp;do=profile”>lgl</a></div>
                <ul>
                    <li><a href=”home.php?mod=space&amp;do=blog&amp;view=me&amp;from=space”>我的笔记</a></li>
                    <li><a href=”home.php?mod=space&amp;do=favorite”>我的收藏</a></li>
                    <li><a href=”home.php”>个人中心</a></li>
                    <li><a href=”home.php?mod=space&amp;uid=5476424&amp;do=index”>前端博客</a></li>
                </ul>
                <ul>
                    <li><a href=”store.php?mod=home_my”>我的教程</a></li>
                    <li><a href=”home.php?mod=space&amp;do=friend”>我的好友</a></li>
                    <li><a href=”home.php?mod=space&amp;do=thread&amp;view=me”>我的帖子</a></li>
                </ul>
                <div id=”extendbar”>
                    <div id=”eb_l”><a id=”vip” href=”vip.php” title=”点击立刻开通VIP尊贵会员”>开通VIP</a></div>
                    <div id=”eb_r”>
                        <a href=”home.php?mod=spacecp”>设置</a>
                        <span>|</span>
                        <a href=”member.php?mod=logging&amp;action=logout&amp;formhash=6486e069″>退出</a>
                    </div>
                </div>
            </div>
            <ul id=”hdtask_menu” class=”hdmenu usermenu”>
                <li><a href=”home.php?mod=task”>新任务<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
                <li><a href=”home.php?mod=task&amp;item=doing”>进行中任务<span class=”hd_numpd”>(</span><b>2</b><span>)</span></a></li>
                <li><a href=”home.php?mod=task&amp;item=done”>已完成任务<span class=”hd_numpd”>(</span><b class=”taskdone”>2</b><span>)</span></a></li>
            </ul>
            <ul id=”hdnotice_menu” class=”hdmenu usermenu”>
                <li><a href=”home.php?mod=space&amp;do=pm”>我的消息<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
                <li><a href=”home.php?mod=space&amp;do=notice&amp;view=interactive”>前端互动<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
                <li><a href=”home.php?mod=space&amp;do=notice&amp;view=app”>应用提醒<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
                <li><a href=”home.php?mod=space&amp;do=notice&amp;view=system”>系统提醒<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
                <li><a href=”home.php?mod=space&amp;do=notice&amp;view=mypost”>帖子通知<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
            </ul>
            <ul id=”hdshop_menu” class=”hdmenu usermenu”>
                <li><a href=”store.php?mod=home_my”>我的教程</a></li>
                <li><a href=”store.php”>教程超市</a></li>
                <li><a href=”store.php?mod=mycart&amp;modtype=paylist”>购物车<span class=”hd_numpd”>(</span><b>0</b><span>)</span></a></li>
            </ul>
            <ul id=”hdjob_menu” class=”hdmenu usermenu”>
                <li><a href=”job.php?mod=resume”>完善简历<span class=”hd_numpd”>(</span><b>1</b><span>)</span></a></li>
                <li><a href=”job.php?mod=resume&amp;do=view” target=”_blank”>预览简历</a></li>
            </ul>
            <ul id=”hdsetting_menu” class=”hdmenu usermenu”>
                <li><a href=”home.php?mod=spacecp&amp;ac=profile”>基本资料</a></li>
                <li><a href=”home.php?mod=spacecp&amp;ac=avatar”>头像设置</a></li>
                <li><a href=”home.php?mod=spacecp&amp;ac=profile&amp;op=contact”>联系方式</a></li>
                <li><a href=”home.php?mod=spacecp&amp;ac=profile&amp;op=edu”>教育情况</a></li>
                <li><a href=”home.php?mod=spacecp&amp;ac=profile&amp;op=password”>密码安全</a></li>
                <li><a href=”portal.php?mod=portalcp”>门户管理</a></li>
            </ul>
        </div>
    </div>
    <script type=”text/javascript”>
        (function () {
            var trigger = document.querySelector(‘.navbar-toggle’);
            var toggleElement = document.querySelector(‘#navbar-collapse’);
            var transitioning = null;
            //判断是否具有某个类名
            HTMLElement.prototype.hasClass = function (clas) {
                var obj_class = this.className,//获取 class 内容.
                    obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组.
                var x = 0;
                for (x in obj_class_lst) {
                    if (obj_class_lst[x] == clas) {//循环数组, 判断是否包含cls
                        return true;
                    }
                }
                return false;
            }
            HTMLElement.prototype.removeClass = function (clas) {
                var obj_class = ‘ ‘ + this.className + ‘ ‘;//获取 class 内容, 并在首尾各加一个空格.
                obj_class = obj_class.replace(/(\s+)/gi, ‘ ‘),//将多余的空字符替换成一个空格.
                    removed = obj_class.replace(‘ ‘ + clas + ‘ ‘, ‘ ‘);//在原来的 class 替换掉首尾加了空格的 class.
                removed = removed.replace(/(^\s+)|(\s+$)/g, ”);//去掉首尾空格.
                this.className = removed;//替换原来的 class.
                return this;
            }
            HTMLElement.prototype.addClass = function (cls) {
                var obj_class = this.className,//获取 class 内容.
                    blank = (obj_class != ”) ? ‘ ‘ : ”;//判断获取到的 class 是否为空, 如果不为空在前面加个’空格’.
                var added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.
                this.className = added;//替换原来的 class.
                return this;
            }
            /*获取浏览器动画结束事件
            function transitionEnd() {
            var el = document.createElement(‘div’);
            var transEndEventNames = {
             WebkitTransition : ‘webkitTransitionEnd’,
             MozTransition : ‘transitionend’,
             OTransition : ‘oTransitionEnd otransitionend’,
             transition : ‘transitionend’
            }
            for (var name in transEndEventNames) {
                if (el.style[name] !== undefined) {
            return transEndEventNames[name] ;
                }
            }
            return false // explicit for ie8 ( ._.)
            }
            */
            function show() {
                if (transitioning || toggleElement.hasClass(‘in’)) return;
                toggleElement.removeClass(‘collapse’).addClass(‘collapsing’).style.height = ‘0px’;
                transitioning = 1;
                var completeshow = function () {
                    toggleElement
                        .removeClass(‘collapsing’)
                        .addClass(‘collapse in’);
                    transitioning = 0
                }
                toggleElement.style.height = toggleElement.scrollHeight + ‘px’;
                setTimeout(completeshow, 350);
                /*transitionEvent=transitionEnd();
                transitionEvent&&toggleElement.removeEventListener(transitionEvent,completehide);
                transitionEvent&&toggleElement.addEventListener(transitionEvent,completeshow);
                */
            }
            function hide() {
                if (transitioning || !toggleElement.hasClass(‘in’)) return;
                toggleElement.removeClass(‘collapse in’).addClass(‘collapsing’);
                toggleElement.style.height = toggleElement.scrollHeight + ‘px’;
                toggleElement.offsetHeight; //这句话很重要 ,你敢去掉试试。
                transitioning = 1;
                var completehide = function () {
                    transitioning = 0
                    toggleElement
                        .removeClass(‘collapsing’);
                    toggleElement.addClass(‘collapse’);
                }
                toggleElement.style.height = ‘0’;
                setTimeout(completehide, 350);
                /*
                transitionEvent&&toggleElement.removeEventListener(transitionEvent,completeshow);
                transitionEvent&&toggleElement.addEventListener(transitionEvent,completehide);
                */
            }
            function toggle() {
                var act = toggleElement.hasClass(‘in’) ? hide() : show();
            }
            trigger.onclick = toggle;
            //定义屏幕尺寸大于768时的函数
            var screewidth = document.body.clientWidth;
            if (screewidth > 768) {
                var nvmore = document.querySelector(‘#nvmore’);
                var navmore = document.querySelector(‘.navmore’);
                nvmore.addEventListener(‘mouseover’, function (e) {
                    document.querySelector(‘#nvmore a’)
                    .style.color = ‘#333333’; navmore.style.display = ‘block’;
                    navmore.style.left = e.clientX + ‘px’;
                    nvmore.addClass(‘active’);
                });
                nvmore.addEventListener(‘mouseout’, function () {
                    document.querySelector(‘#nvmore a’)
                    .style.color = ‘#ddd’; navmore.style.display = ‘none’; nvmore.removeClass(‘active’);
                });
                var hduser = document.querySelector(‘#hduser’);
                var hduser_menu = document.querySelector(‘#hduser_menu’);
                hduser.addEventListener(‘mouseover’, function (e) {
                    hduser_menu.style.display = ‘block’;
                    hduser_menu.style.left = e.clientX + ‘px’;
                });
                hduser_menu.addEventListener(‘mouseout’, function () { hduser_menu.style.display = ‘none’; })
            }
        })()
    </script>
</body>
</html>

招聘游戏前端开发|前端开发技术教材销量|web前端流行开发技术

» 本文来自:前端开发者 » 《WEB前端制作响应式导航》
» 本文链接地址:https://www.rokub.com/5243.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!