Off Canvas Mobile Nav - 渲染过程中闪烁

时间：2013-03-20 20:25:17

标签： jquery html css html5 css3

实时链接到网站：My Site

JSFiddle：http://jsfiddle.net/MguqC/1/ * 注意JS Fiddle包含正在进行类切换的java和其他东西，当将视口缩小到移动大小时，它表现不太好。使用上面的实时链接可以更好地理解视觉效果。

返回-故事： 我已经为我的网站开发了一个非画布的移动菜单，除了一些jquery类切换外，它只使用CSS。导航是使用PHP动态生成的。最初，当我创建此导航时，我有两个单独的导航实例，为同一导航生成两组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;，我认为我可以隐藏导航，直到它设置样式并且将它从画布上移开然后在该点之后将其设置为阻止，以使其“重新出现”，即使它将在屏幕外。但无济于事......这不起作用。

我正在寻找这个闪存的解决方案，我并不特别在意它是如何完成的，只要它不使用两组独立的HTML恢复到我之前的结构。

***请注意，下面的CSS确实引用了ID #nav。这是准确的，我没有删除ID，我只是没有使用它来设置导航的大部分。导航HTML结构是子菜单导航的标准。 UL - LI - A与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 -->

1 个答案:

答案 0 :(得分：2)

问题是你的导航可以有三个状态：

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

您看到的闪光灯是第三种状态下导航的样式。该脚本添加了类js-ready，只有这样，您的导航才会在画布外拉出视图。

修复非常简单，你已经拥有了大部分CSS。 CSS文件的第396行是：

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

它的作用是提供非JS后备。尝试关闭original example page上的JavaScript，您会看到移动导航仍然可以使用:target伪类。修复是将这些行添加到上面的选择器：

overflow: hidden;
padding: 0;

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

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

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

相关问题
最新问题