html - 添加子导航到 Canvas 导航，现在子菜单标题和菜单在菜单关闭时显示

标签 html css css-position

我一直在调整现有的非 Canvas 设计，但碰壁了。我添加了子菜单，现在它们在菜单关闭时显示。我猜这是一个定位问题，但看了几天后我无法弄清楚。还值得注意的是，仅当视口(viewport)足够小以激活媒体查询时才会出现此问题。这是代码:

这是一个有问题的站点的工作示例 example . 我尝试创建一个 fiddle ，但它无法正常运行。在 Chrome 中查看以查看问题并调整浏览器大小以查看 Canvas 菜单问题。

HTML:

<!DOCTYPE html>

<html class="no-js">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>some site</title>

    <script src="js/plugins/modernizr.js"></script>

    <!--[if (gt IE 8) | (IEMobile)]><!-->
    <link rel="stylesheet" href="css/style.css">
    <!--<![endif]-->
    <!--[if (lt IE 9) & (!IEMobile)]>
    <link rel="stylesheet" href="css/ie.css">
    <![endif]-->

</head>

<body>

<div id="outer-wrap">
<div id="inner-wrap">

    <header id="top" role="banner">
        <div class="block">
            <h1 class="block-title">TEST</h1>
            <a class="nav-btn" id="nav-open-btn" href="#main-nav">Main Menu</a>
        </div>
    </header>

    <nav id="main-nav" role="navigation">
        <div class="block">
            <h2 class="block-title">Main menu</h2>
             <ul>
                <li class="is-active">
                    <a href="#">Link</a>
                </li><!--
             --><li>
                    <a class="toggle-sub-nav closed" href="#">Link</a>
                      <ul class="sub-nav">
                          <li><a href="#">Sub link</a></li>
                          <li class="is-active"><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                      </ul>
                </li><!--
             --><li>
                    <a href="#">Link</a>
                </li><!--
             --><li>
                    <a class="toggle-sub-nav closed" href="#">Link</a>
                    <ul class="sub-nav">
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub Link</a></li>
                          <li><a href="#">Sub link</a></li>
                      </ul>
                </li><!--
             --><li>
                    <a href="#">Link</a>
                </li>
            </ul>
            <a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
        </div>
    </nav>

    <section id="main" role="main">
        <article class="block prose">

     <h1>Some content NEW30</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

        <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>

        <p>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. </p>

        <p>Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. </p>

       <p>Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. </p>
        </article>
    </section>

    <footer role="contentinfo">
        <div class="block prose">
            <p class="small">Copyright © <a href="http://ashleybriscoe.com/">Some author</a></p>
        </div>
    </footer>

</div><!--/#inner-wrap-->

</div><!--/#outer-wrap-->

</body>

<script src="js/scripts/jquery-1.10.2.min.js"></script>

<script src="js/scripts/main.js"></script>

<script src="js/plugins/jquery.hammer.min.js"></script>

<!--[if (gte IE 6)&(lte IE 8)]>

  <script type="text/javascript" src="js/plugins/selectivizr.js"></script>

<![endif]-->

</html>

CSS:

body {
  color: #333;
  position: relative;
  width: 100%;
  min-width: 20em;
  background: #7C9769;
}

.block {
  position: relative;
  margin: 0 auto;
  padding: 1.5em 1.25em;
  max-width: 60em;

}

.close-btn {
  display: block;
  width: 2.625em;
  height: 2.25em;
  padding: 0;
  border: 0;
  outline: none;
  background: #7C9769 url("../assets/img/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("../assets/img/close-btn.png");
}
.close-btn:focus, .close-btn:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.nav-btn {
  display: block;
  width: 2.625em;
  height: 2.25em;
  padding: 0;
  border: 0;
  outline: none;
  background: #7C9769 url("../assets/img/nav-icon.svg") left 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("../assets/img/nav-icon.png");
}
.nav-btn:hover, .nav-btn:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

#outer-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

#inner-wrap {
  position: relative;
  width: 100%;
}

#main-nav {
  z-index: 200;
  position: relative;
  width: 100%;
  color: #fff;
}
#main-nav .close-btn {
  display: none;
}
#main-nav .block-title {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
#main-nav .block {
  z-index: 2;
  position: relative;
  padding: 0.75em 1.25em;
  background: #7C9769;
}
#main-nav ul {
  *zoom: 1;
  display: block;
}
#main-nav ul:before, #main-nav ul:after {
  content: "";
  display: table;
}
#main-nav ul:after {
  clear: both;
}
#main-nav li {
  display: block;
  width: 11em;

}
#main-nav li a {
  display: block;
  color: #365239;
  font-size: 0.875em;
  line-height: 1.28571em;
  font-weight: bold;
  outline: none;

}



#main-nav li a:focus, #main-nav li a:hover {

  color: #EEE;

}
#main-nav li.is-active a {

  color: #EEE;

}


#main-nav li ul li { float: left; border-right: none;}

#main-nav li ul li a:focus, #main-nav li ul li a:hover {

  color: #7C9769;

}

#main-nav li ul li.is-active a {

     color: #7C9769;
}

 .js .sub-nav {

    height: 0;
    width: 11em;
    background-color:#E4E1E1;
    overflow:hidden;
    position: absolute;
    top: 52px;

}

  .js .sub-nav-open {

    height: auto;
    position: absolute;
    margin: 0;
    padding: 0; 
    top: 52px;

    }

 .no-js #main-nav li ul.sub-nav {

    display: none;
    width: 11em;
    background-color:#E4E1E1;

}

.no-js #main-nav li:hover ul.sub-nav {

    display: block;
    position: absolute;
    border-top: solid 11px #7C9769;
    margin: 0;
    padding: 0; 
    z-index: 2000;

    }

.closed { background: url(../assets/img/arrows.png) no-repeat 90% -28px; }

.open { background: url(../assets/img/arrows.png) no-repeat 90% 9px; }


#top {
  z-index: 100;
  position: relative;
  color: #fff;
  background: #7C9769;
}
#top .block-title {
  margin: 0;
  font-size: 1.3em;
  line-height: 1.2em;
  text-align: center;
  white-space: wrap;
}
#top .nav-btn {
  position: absolute;
  top: 0.7em;
  left: 1.875em;
}

#main {
  background: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
}

footer[role="contentinfo"] {
  background: #ddd;
}


@media screen and (min-width: 45.0625em) {
  #top .nav-btn {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  #main-nav .close-btn {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #main-nav .block-title {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #main-nav ul {
    text-align: center;
    white-space: nowrap;
  }
  #main-nav li {
    display: inline-block;
    border-right: 1px solid #CCC;
  }
  #main-nav li:last-child {
    border-right: none;
  }
  #main-nav li a {
    padding: 0.42857em 0.85714em;
  }

}

@media screen and (max-width: 45em) {

  #main-nav {
    position: absolute;
    top: 0;
    padding-top: 4.5em;
  }
  #main-nav:not(:target) {
    z-index: 1;
    height: 0;
  }
  #main-nav:target .close-btn {
    display: block;
  }
  #main-nav .close-btn {
    position: absolute;
    top: -3.75em;
    left: 1.875em;
  }
  #main-nav .block {
    position: relative;
    padding: 0;
  }
  #main-nav li {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
  }
  #main-nav li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  #main-nav li.is-active:after {
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.03125em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
  }
  #main-nav li a {
    padding: 0.85714em 2.14286em;
  }

 .js .sub-nav {

    height: 0;
    width: 100%;
    background-color:#E4E1E1;
    overflow:hidden;

}

  .js .sub-nav-open {

    height: auto;
    max-height: 400px; 
    top: 0;
    position: static;
    overflow: hidden;

    }

 .no-js #main-nav li ul.sub-nav {

    display: none;
    width: 100%;
    background-color:#E4E1E1;

}

.no-js #main-nav li:hover ul.sub-nav {

    display: block;
    top: 52px;
    margin: 0;
    padding: 0; 
    border-top:none;
    }

.closed { background: url(../assets/img/arrows.png) no-repeat 95% -24px; }

.open { background: url(../assets/img/arrows.png) no-repeat 95% 13px; }

    #main-nav li ul li {

    border-top: 1px solid #CCC;
  }
  #main-nav li ul li:last-child {
    border-bottom: none;
  }



  .js-ready #main-nav {
    height: 100%;
    width: 70%;
    background: #7C9769;
    -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 #main-nav .block {
    background: transparent;
  }
  .js-ready #main-nav .close-btn {
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
  }
  .js-ready #main-nav .close-btn:focus, .js-ready #main-nav .close-btn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }

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

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

  .csstransforms3d.csstransitions.js-ready #main-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 #main-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 #main-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);
  }
}

这是显示 Google Chrome 中问题的屏幕截图:

Screen shot of menu items showing when menu is closed

最佳答案

尝试将以下属性添加到媒体查询中的 .csstransforms3d.csstransitions.js-ready #main-nav .block 此类

CSS

@media screen and (max-width: 45em) {
.csstransforms3d.csstransitions.js-ready #main-nav .block {
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
/*Other styles goes here*/
}
}

关于html - 添加子导航到 Canvas 导航，现在子菜单标题和菜单在菜单关闭时显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20883140/

上一篇：Css 矩阵与变换。哪个更快？

下一篇：CSS::Chrome 上的选择

相关文章：

javascript - 使用 jQuery 单击移动按钮

javascript - 在按钮改变高度后使标题保持不变

css - 如何使表 TR 行边框顶部和底部，而不插入前一行和后一行移动？

css - 这个 CSS 值是什么意思？

html - 一个页面中的两个 CSS 绝对定位项

javascript - 加载页面时需要保持 collapsible 1 打开

html - 固定菜单在应用媒体查询时不保持固定

html - 左侧下拉菜单

html - 无论网格如何，如何使网格子元素具有全屏宽度？

html - CSS : prevent div width from expanding to available width

©2024 IT工具网  联系我们