Question

当屏幕尺寸低于768像素时，我有一个响应式（HTML / CSS）“汉堡包”菜单。点击汉堡包会出现菜单，但它不会保持可见状态。有关如何使其可见的任何想法，以便人们可以点击菜单的链接？

CSS

    nav {
    float:right;
    padding:25px 20px 0px 0px;
}
#menu-icon {
    display:hidden;
    width:40px;
    height:40px;
    background: url(img/icons/nav-dark.png) center;
}
ul {
    list-style:none;
}
nav ul li {
    font-family: 'verdana', sans-serif;
    font-size: 150%;
    display: inline-block;
    float: left;
    padding: 10px;
}
nav ul li a{
    color:#6991AC;
}
.current {
    color:#F0F;
}
a:hover {
    color:#A5BDCD;
}

@media screen and (max-width: 768px) {
    #menu-icon {
        display: inline-block;
    }

    nav ul, nav:active ul {
        display:none;
        z-index:1000;
        position:absolute;
        padding:20px;
        background:#F5F5F5;
        border:1px solid #A5BDCD;
        right:20px;
        width:50%;
        border-radius:3px 0 3px 3px;
        opacity:.95;
    }

    nav li {
        text-align:center;
        width:100%;
    }
            nav:active > ul {
        display: block;
    }
}

HTML

    <header>


  <nav>

        <a href="#" id="menu-icon"></a>
    <ul class="main">
                    <li><a href="index.html" class="current">Home</a></li>
                    <li><a href="#">Skills</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Our Team</a></li>
                    <li><a href="survey.html">Contact</a></li>
                </ul>

            </nav>
     </header>

Answer 1

你应该使用：焦点而不是：活跃..你必须选择“汉堡包”而不是整个导航。

这是我的解决方案：

nav {
  float: right;
  padding: 25px 20px 0px 0px;
}

#menu-icon {
  display: hidden;
  width: 40px;
  height: 40px;
  background: url(img/icons/nav-dark.png) center;
}

ul {
  list-style: none;
}

nav ul li {
  font-family: 'verdana', sans-serif;
  font-size: 150%;
  display: inline-block;
  float: left;
  padding: 10px;
}

nav ul li a {
  color: #6991AC;
}

.current {
  color: #F0F;
}

a:hover {
  color: #A5BDCD;
}

@media screen and (max-width: 768px) {
  #menu-icon {
    display: inline-block;
  }
  .main {
    display: none;
    z-index: 1000;
    position: absolute;
    padding: 20px;
    background: #F5F5F5;
    border: 1px solid #A5BDCD;
    right: 20px;
    width: 50%;
    border-radius: 3px 0 3px 3px;
    opacity: .95;
  }
  nav li {
    text-align: center;
    width: 100%;
  }
  #menu-icon:focus ~ .main {
    display: block !important;
  }
}

<header>
  <nav>
    <a href="#" id="menu-icon">#</a>
    <ul class="main">
      <li><a href="index.html" class="current">Home</a></li>
      <li><a href="#">Skills</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Our Team</a></li>
      <li><a href="survey.html">Contact</a></li>
    </ul>
  </nav>
</header>

在小提琴中查看此解决方案： https://jsfiddle.net/smwn4sdg/

提供近距离点击的其他解决方案：https://jsfiddle.net/smwn4sdg/1/

注意：只需删除“汉堡”中的“＃”...我已经使用过它，因为jsfiddle不知道你的形象;）

编辑：

将此内容添加到您的css中也会使您的链接可以点击：

  .main:hover {
    display: block !important;
  }

新小提琴：https://jsfiddle.net/smwn4sdg/3/

点击式菜单 - 保持可见

1 个答案: