3

网站的实时链接：我的网站

JSFiddle： http: //jsfiddle.net/MguqC/1/ *请注意，JS Fiddle 包含执行类切换和其他操作的 java，当将视口缩小到移动大小时，它的表现并不好。使用上面的实时链接以获得更好的视觉理解。

背景故事： 我为我的网站开发了一个非画布移动菜单，除了一些 jquery 类切换外，它只使用 CSS。导航是使用 PHP 动态生成的。最初，当我创建此导航时，我有两个单独的 Navigation 实例，它们为同一导航生成了两组 HTML。一个使用 生成<nav>，一个使用<div id="nav">.

这<nav>组 HTML 是为全宽桌面版导航设计的。使用媒体查询为网站的<div id="nav">移动版本设置了 HTML 集。使用媒体查询，我只是将移动版本隐藏在桌面大小，然后在移动媒体查询中隐藏桌面版本并将 #nav 设置为display: block;

这完美地工作，没有图形问题或问题。

目前的故事：

现在，我将两个独立的导航合并为一个更有弹性的 PHP 结构。也就是说，使用一组 HTML 并为移动设备等设置不同的样式会更容易、更有效。

我复制了该站点并煞费苦心地将移动类更改为相对nav > ul > li > ul选择器。（不再使用导航 ID，因为我有一组 HTML，我必须为一组 HTML 制作桌面和移动设备）。

由于某种原因，现在在任何移动设备上加载网站时（即使是桌面浏览器缩小到移动大小），当您加载页面时，您可以看到导航链接在页面上加载然后消失，因此“闪烁”。

我已经尝试将整个导航设置display: none;为媒体查询样式的顶部，然后display: block;在媒体查询样式的底部，我认为我可以隐藏导航，直到它设置样式并将其移出画布，然后将其设置为阻止所以让它“重新出现”，即使它会在屏幕外。但无济于事......这不起作用。

我正在寻找此 Flash 的修复程序，我并不特别关心它是如何完成的，只要它不使用两组单独的 HTML 恢复到我以前的结构即可。

***请注意，下面的 CSS 确实引用了 ID #nav。这是准确的，我没有删除 ID，我只是没有使用它来设置导航的大部分样式。导航 HTML 结构是子菜单导航的标准结构。UL - LI - A 在 LI 内部有 UL 等。

CSS：

/* 01. MAIN NAVIGATION STYLES */

#nav {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

nav { /* THIS HAS BEEN RESET BELOW */
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

nav ul li a:visited {
    color: #777;
}

nav > ul > li:hover > a {  /* USING > FORCES LI TO STAY IN HOVER STATE EVEN WHEN IN SUBNAV */
    color: #fff;
    text-decoration: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c')";
    background-image: -moz-linear-gradient(top, #555555, #4c4c4c);
    background-image: -ms-linear-gradient(top, #555555, #4c4c4c);
    background-image: -o-linear-gradient(top, #555555, #4c4c4c);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#555555), to(#4c4c4c));
    background-image: -webkit-linear-gradient(top, #555555, #4c4c4c);
    background-image: linear-gradient(top, #555555, #4c4c4c);
}

nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}






/* Sub nav styles start here */

nav ul li > ul { /* BASIC STYLING PLUS HIDE */  /* THIS HAS BEEN RESET BELOW */
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: 100%;
    left: 0;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul > li:hover > ul { /* ON HOVER MAKE SUB-NAV VISIBLE */
    display: block;
}

nav ul li ul li { /* THIS HAS BEEN RESET */
    position: relative;
    height: 40px;
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #fff;
}

nav ul li ul li a {
    color: #777;
    height: 24px;
    padding: 8px 12px;
    margin: 0;
    background: #fafafa;
}

nav ul li ul li a:hover { /* SUB-NAV HOVER STATE */
    color: #777;
    text-decoration: none;
    background: #fff;
    border-left: 5px solid #555;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}


/* SECOND LEVEL SUB NAV STYLES */

nav ul li ul li ul {
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: -2px;
    left: 100%;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul li ul li:hover > ul {
    display: block;
}

nav ul li .active {
    color: #fff;
    background: #8dc63f;
    background: -moz-linear-gradient(top,  #8dc63f 0%, #86bd3c 50%, #81b539 51%, #78a934 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8dc63f), color-stop(50%,#86bd3c),            color-stop(51%,#81b539), color-stop(100%,#78a934));
    background: -webkit-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -o-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -ms-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: linear-gradient(to bottom,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc63f', endColorstr='#78a934',GradientType=0 );
}

nav ul li a.active {
    color: #fff;
}


nav ul li a span.arrow {
    background: url(../../../images/nav/arrow-down.png) no-repeat 50% 50%;
    width: 9px;
    height: 9px;
    display: inline-block;
    overflow: hidden;
    margin-left: 10px;
    text-indent: -999em;
}

nav ul li ul li a span.arrow {
    text-align: right;
    text-indent: -999em;
    display: block;
    position: absolute;
    overflow: hidden;
    width: 9px;
    height: 9px;
    top: 16px;
    left: 100px;
    margin-left: 20%;
    background: url(../../../images/nav/arrow-right.png) no-repeat 50% 50%;
}

nav ul li ul li a:hover span.arrow {
    left: 105px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}



/* Mobile nav buttons */

.nav-btn {
  display: block;
  width: 1.6em;
  height: 25px;
  padding: -11px;
  border: 0;
  outline: none;
  background: #87be3c url("../../../images/nav/nav-icon.svg") center center no-repeat;
  background-size: 1.875em 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .nav-btn {
    background-image: url("../../../images/nav/nav-icon.png");
}

.nav-btn:hover, .nav-btn:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.close-btn {
  display: block;
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  border: 0;
  outline: none;
  background: url('../../../images/nav/close-btn.svg') left center no-repeat;
  background-size: 1.875em 1.875em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .close-btn {
  background-image: url("../../../images/nav/close-btn.png");
}

.close-btn:focus, .close-btn:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}







@media all and (min-width: 641px) {

.horizontal-mobile-nav {
    display: none;
}

} /* END MEDIA QUERY FOR MIN-WIDTH 641PX (DESKTOP/TABLET) */


@media all and (max-width: 640px) {

/* 3.0 MOBILE-NAV STYLES
-------------------------------*/
/* SET VISIBLE THE HORIZONTAL MOBILE NAV */

#nav* {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

.horizontal-mobile-nav {
    display: block;
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

.horizontal-mobile-nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

.horizontal-mobile-nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

.horizontal-mobile-nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

.horizontal-mobile-nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

.horizontal-mobile-nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}

/* RESET THE ABOVE STYLES IN PREPARATION FOR THE MOBILE NAV THIS HAS TO BE A MEDIA QUERY */
nav { height: auto; border: none; border-radius: 0; background-image: none); }
nav ul { position: relative; z-index: 10; display: block; width: auto; height: auto; padding: 0; margin: 0; }
nav ul > li { position: relative; display: block; height: auto; padding: 0; margin: 0; }
nav ul li:nth-child(1) { margin-left: 0; border-radius: none; }
nav ul li a { color: #777; text-decoration: none; display: block; height: auto; padding: 0; margin: 0; }
nav ul li a:visited { color: #777; }
nav > ul > li:hover > a { color: #fff; text-decoration: none; background-image: none;}
nav > ul > li:nth-child(1) > a { border-radius: 0; }
/* Sub nav styles start here */
nav ul li > ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li ul li { position: relative; height: auto; display: block; padding: 0; margin: 0; border: none; }
nav ul li ul li a { color: #777; height: auto; padding: 0; margin: 0; background: none; }
nav ul li ul li a:hover { color: #777; text-decoration: none; background: none; border-left: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/* SECOND LEVEL SUB NAV STYLES */
nav ul li ul li ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li .active { color: #fff; background: none; }



/* Mobile Nav styles */  /* actual media query stuff from old nav */
nav ul li a span.arrow {
    display: none;
}

nav ul li ul li a span.arrow {
    display: none;
}

#nav {
    position: absolute;
    top: 0;
    padding-top: 100px;
}

#nav:not(:target) { /* not sure what this does */
    z-index: 1;
    height: 0;
}

#nav:target .close-btn {
    display: block;
}

#nav .close-btn {
    position: absolute;
    top: 20px;
    left: 40px;
}

#nav .block {
    position: relative;
    padding: 0;
}


#nav > ul {
    border-bottom: 1px solid #444;
    box-shadow:         0px 15px 15px rgba(8, 8, 8, 0.75);
}

#nav li {
    position: relative;
    padding: 0;
    margin: 0;
}

#nav ul li:last-child {
}

#nav ul li ul li:last-child {
    border-bottom: none;
}

#nav li.is-active:after { /* NOT SURE IF THIS DOES A FUCKIN THING */
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.031em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
}

#nav li a { /* BUTTON STYLES AND SIZE */
    text-decoration: none;
    padding: 10px 0 10px 20px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;  
}

#nav ul li a {
    background: #222222;
    background: -moz-linear-gradient(left,  #222222 0%, #222222 40%, #000000 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#222222), color-stop(40%,#222222),      color-stop(100%,#000000));
    background: -webkit-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -o-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -ms-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: linear-gradient(to right,  #222222 0%,#222222 40%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 );
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
    filter: alpha(opacity = 80);
}

#nav li a:hover {
    color: #fff;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 40);
    filter: alpha(opacity = 40);
}

#nav ul li ul li a {  /* INDENT SUBNAV ITEMS */
    padding-left: 35px;
}

#nav ul li ul li a:hover {

}

#nav ul li ul li ul li a {
    padding-left: 50px;
}

#nav ul li ul li ul li a:hover {

}



/* crazy shit */

.js-ready #nav {
    height: 100%;
    width: 70%;
    background: url(../../../images/nav/hixs_pattern_evolution.png);
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
}

.js-ready #nav .block {
    background: transparent;
}

.js-ready #nav .close-btn {
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

.js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.js-ready #nav { /* move the nav off canvas */
    left: -70%;
}

.js-ready #canvas {
    left: 0;
}

.js-nav #inner-wrap {
    left: 70%;
}

.csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
}

.csstransforms3d.csstransitions.js-ready #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

}

HTML/PHP：

<section class="nav-container">

        <section class="horizontal-mobile-nav">
            <ul>
                <li class="mobile-nav-btn">
                    <a class="nav-btn" id="nav-open-btn" href="#nav">Mobile Navigation</a>
                </li>
                <li>
                    <a href="index.php">Home</a>
                </li>
            </ul>
        </section>

        <nav id="nav">


        <?php
            echo "<ul>";
                foreach ($nav_array as $nav_title => $nav_data) {

                    echo buildLinks($nav_title, $nav_data, $base, $title);
                }
            echo "</ul>";
        ?>

        <a class="close-btn" id="nav-close-btn" href="#header">Return to Content</a>

        </nav>
        </section><!-- end nav container -->
4

1 回答 1

2

问题是您的导航可以处于三种状态：

  • 桌面布局
  • 移动布局
  • 移动布局（禁用 JavaScript）

您看到的闪光是您在第三种状态下的导航样式。该脚本添加了 class js-ready，然后您的导航才会从画布视图中拉出。

修复非常简单，并且您已经拥有了大部分 CSS。在 CSS 文件的第 396 行是这样的：

#nav:not(:target) { /* not sure what this does */
    z-index: 1;
    height: 0;
}

这样做是提供非 JS 后备。尝试在原始示例页面上关闭 JavaScript ，您会发现移动导航仍然可以通过使用:target伪类来工作。解决方法是将这些行添加到上面的选择器中：

overflow: hidden;
padding: 0;

然后，当您应用 JavaScript 版本的样式（样式表的第 532 行）时，重置这些属性：

.csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    overflow: visible;
    padding-top: 100px;
    ...
}

剩下要做的唯一一件事（如果您认为这是优先事项）将修复第三种状态（您的移动布局没有 JavaScript）。您拥有 Modernizr 和大部分样式，所以这应该不会太难。

于 2013-03-26T12:30:24.817 回答