带有折叠/隐藏选项

时间：2017-07-21 11:09:03

标签： css drop-down-menu menu responsive

我正在尝试向网站插入纯CSS下拉式响应式菜单。菜单很简单，有一些额外的样式编码。但令我困扰的是，当打开一个下拉标签时，下拉子菜单会出现，但如果我点击其他地方或菜单中的另一个标签，它就不会消失。我试图在用鼠标或手指点击任何其他地方（在触摸屏上）打开下拉菜单后，这个子菜单将折叠回来。试图：专注但似乎没有任何效果。

我确定可以使用一些帮助。 谢谢。 这是代码：

.nav-bar {
    background: #f8f8f8;
    width: 100%;
}

.nav-bar__label {
    color: #505050;
    display: block;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
    width: inherit;
}

.nav-bar__label::after,
.nav-bar__sub-label::after {
    content: " +";
}

.nav-bar__label,
.nav-bar__sub-label {
    cursor: pointer;
	
}

.nav-bar__list {
    background: #f8f8f8;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.nav-bar__list,
[id^="toggle"] {
    display: none;

}

[id^="toggle"]:checked + .nav-bar__list {
    display: block;
}

    /* DRUGI LIST */

.nav-bar__list2 {
    background: #f8f8f8;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300px;
}

.nav-bar__list2,
[id^="toggle"] {
    display: none;
}

[id^="toggle"]:checked + .nav-bar__list2 {
    display: block;
}

    /* KONEC DRUGEGA LISTA */


.nav-bar__list-item {
    display: block;
}

.nav-bar__link,
.nav-bar__sub-label {
    color: #505050;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    word-wrap: break-word;
}

.nav-bar__list-item .nav-bar__list-item .nav-bar__link,
.nav-bar__list-item .nav-bar__list-item .nav-bar__sub-label {
    padding: 10px 10px 10px 30px;
}

.nav-bar__link:hover,
.nav-bar__link:active,
.nav-bar__sub-label:hover {
    background: #cc0000;
	color: #fff;
}


@media all and (min-width : 992px) {
    .nav-bar > .nav-bar__label {
        display: none;
    }

    .nav-bar > .nav-bar__list {
        display: block;
    }

    .nav-bar > .nav-bar__list > .nav-bar__list-item {
        display: inline-block;
        position: relative;
    }

    .nav-bar__list-item .nav-bar__list {
        position: absolute;
    }
	
	/* DRUGI LIST */
	
    .nav-bar > .nav-bar__list2 {
        display: block;
    }

    .nav-bar > .nav-bar__list2 > .nav-bar__list-item {
        display: inline-block;
        position: relative;
    }

    .nav-bar__list-item .nav-bar__list2 {
        position: absolute;
    }

    .nav-bar__list-item .nav-bar__list-item .nav-bar__link,
    .nav-bar__list-item .nav-bar__list-item .nav-bar__sub-label {
        padding: 10px 20px;
    }
}
    <html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Menu</title>

    <link rel="stylesheet" href="css/responsive-menu.css">
</head>
<body>
    <nav class="nav-bar">
        <label for="toggle" class="nav-bar__label">Menu</label>
        <input type="checkbox" id="toggle" class="nav-bar__toggle">
        <ul class="nav-bar__list">
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 1</a>
            </li>
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 2</a>
            </li>
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 3</a>
            </li>
            <li class="nav-bar__list-item">
                <label for="toggle-sub-1" class="nav-bar__sub-label">Menu Item 4</label>
                <input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle">
                <ul class="nav-bar__list2">
                    <li class="nav-bar__list-item">
                        <a href="#" class="nav-bar__link">Menu Item 4.1</a>
                    </li>
                    <li class="nav-bar__list-item">
                        <a href="#" class="nav-bar__link">Menu Item 4.2</a>
                    </li>
                    <li class="nav-bar__list-item">
                        <a href="#" class="nav-bar__link">Menu Item 4.3</a>
                    </li>
                </ul>
            </li>
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 5</a>
            </li>
        </ul>
    </nav>
    
</body>
</html>

2 个答案:

答案 0 :(得分：0)

使用悬停的解决方案：

在移动浏览器中利用:hover的焦点状态 - 诀窍是将悬停放在始终被视为＆＃34; hover＆＃34;的祖先上。什么时候孩子们的任何地方都可以。非常干净，语义正确。查看fiddle

＆＃13;
＆＃13; 
html,
body {
  height: 100%;
  width: 100%;
  background: #FFF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

p {
  padding: 1.6em 0 0;
}

.pretendthisisthebody {
  padding: 50px 10px 0;
}

#hideholder {
  display: none;
}

.radionav {
  position: absolute;
  top: 0;
  left: 0;
  background: #f8f8f8;
  width: 100%;
}

.radionav>div {
  text-align: center;
  text-transform: uppercase;
}

.radionav div,
.radionav a {
  color: #505050;
  display: block;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: 0.1s all ease-in-out;
}

.radionav li:hover>div{
  background: #cc0000;
  color: #fff;
}

.radionav ul {
  list-style-type: none;
  background: #f8f8f8;
}

.radionav ul ul a {
  padding-left: 30px;
}

.radionav input,
.radionav .closer,
.radionav ul,
.radionav input:checked ~ .opener {
  display: none;
}

.radionav:hover>ul,
.radionav li:hover>ul {
  display: block;
}

.radionav div::after {
  content: " +";
}

@media all and (min-width: 481px) {
  .radionav>div {
    display: none !important;
  }
  .radionav>ul
  {
    display: block !important;
  }
  .radionav>ul>li {
    display: inline-block;
  }
  .radionav a,
  .radionav div {
    width: auto;
  }
  .radionav li {
    position: relative;
  }
  .radionav a:hover {
    background: #cc0000;
    color: #fff;
  }
  .radionav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
  }
  .radionav ul ul li {
    display: block;
    min-width: 100%;
  }
  .radionav ul ul a {
    padding-left: 10px;
    white-space: nowrap;
  }
  .radionav li:hover>ul {
    display: block;
  }
  .radionav div::after {
    content: "";
  }
}
＆＃13; 
<div class="pretendthisisthebody">
  <nav class="radionav">
    <div>Menu</div>
    <ul>
      <li><a href="#">Menu item 0</a></li>
      <li>
        <div>Menu item 1</div>
        <ul>
          <li><a href="#">Just a link</a></li>
          <li><a href="#">Just a longer link</a></li>
          <li><a href="#">Just a link</a></li>
        </ul>
      </li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li>
        <div>Menu item 4</div>
        <ul>
          <li><a href="#">Just a link</a></li>
          <li><a href="#">Just a longer link</a></li>
          <li><a href="#fail">Just a link</a></li>
        </ul>
      </li>
      <li><a href="#">Menu item 5</a></li>
    </ul>
  </nav>

  <h1>Clicking in the body outside the menu will hide it</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit aliquam suscipit. Vivamus ac mi tellus. Donec vulputate sem eu justo ornare, at mattis augue tempor. Nullam fringilla odio lobortis bibendum lobortis. Fusce condimentum ultricies
    nulla, non posuere sem vestibulum nec. Duis rhoncus velit lobortis odio interdum, quis aliquam ex dapibus. Quisque hendrerit pellentesque turpis non pretium. Nam ante metus, tempus quis tortor lacinia, efficitur ullamcorper erat. Sed at aliquet
    nisi, ac congue massa.</p>
  <p>Mauris est odio, tempor in ex ac, cursus iaculis ex. Etiam eu dapibus dolor. Quisque sodales mollis neque fringilla maximus. Praesent malesuada vitae elit eu congue. Mauris fringilla maximus arcu sit amet tempor. Nam sagittis lectus massa, eu viverra
    enim congue a. Nunc ultrices sapien nec enim auctor, ac placerat velit posuere. Donec velit ex, consectetur vitae sapien eget, eleifend maximus sem. Sed placerat nibh mi, eget fermentum justo ultrices nec.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

早期解决方案： 这个使用简单的单选按钮推送可折叠菜单，但将所有内容包装在<label>标签中以支持＆＃34;模糊的＆＃34;行为。简单版本为here，与OP类似的多级版本为here

答案 1 :(得分：0)

这是我用css的最终菜单。谢谢@Randy Hall 

<style type="text/css"><!--
html,
body {
  height: 100%;
  width: 100%;
  background: #FFF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

p {
  padding: 1.6em 0 0;
}

.pretendthisisthebody {
  padding: 50px 10px 0;
}

#hideholder {
  display: none;
}
.radionav {
  position: relative;
  top: 0;
  left: 0;
  background: #007de7;
  width: 100%;
  font-weight:400;
}

.radionav>div {
  text-align: center;
  text-transform: uppercase;
}

.radionav div,
.radionav a {
  color: #fff;
  display: block;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: 0.1s all ease-in-out;
}

.radionav li:hover>div,
.radionav a:hover {
  background: #cc0000;
  color: #fff;
}

.radionav ul {
  list-style-type: none;
  background: #007de7;
  margin-bottom: 0px !important;
}

.radionav ul ul a {
  padding-left: 30px;
}

.radionav input,
.radionav .closer,
.radionav ul,
.radionav input:checked ~ .opener {
  display: none;
}

.radionav:hover>ul,
.radionav li:hover>ul {
  display: block;
}

.radionav div::after {
  content: " +";
}

@media all and (min-width: 481px) {
  .radionav>div {
    display: none !important;
  }
  .radionav>ul
  {
    display: block !important;
  }
  .radionav>ul>li {
    display: inline-block;
  }
  .radionav a,
  .radionav div {
    width: auto;
  }
  .radionav li {
    position: relative;
  }
  .radionav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
  }
  .radionav ul ul li {
    display: block;
    min-width: 100%;
  }
  .radionav ul ul a {
    padding-left: 10px;
    white-space: nowrap;
  }
  .radionav li:hover>ul {
    display: block;
  }
  .radionav div::after {
    content: "";
  }
}	

--></style>
<div class="pretendthisisthebody">

<!-- MODRI MENI -->
<nav class="radionav">
    <div>Meni</div>
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <div>Main menu 2</div>
        <ul>
<li><a href="#" class="nav-bar__link">Menu item 1 long</a></li>
<li><a href="#" class="nav-bar__link">Menu item 2</a></li>
<li><a href="#" class="nav-bar__link">Menu item 3</a></li>
<li><a href="#" class="nav-bar__link">Menu item 4</a></li>
<li><a href="#" class="nav-bar__link">Menu item 5 - extra long item</a></li>
<li><a href="#" class="nav-bar__link">Menu item 6</a></li>
<li><a href="#" class="nav-bar__link">Menu item 7</a></li>
<li><a href="#" class="nav-bar__link">Menu item 8</a></li>
<li><a href="#" class="nav-bar__link">Menu item 9</a></li>
<li><a href="#" class="nav-bar__link">Menu item 10</a></li>        </ul>
      </li>
      <li><a href="#">Main menu 3</a></li>
      <li>
        <div>Main manu 4</div>
        <ul>
			<li><a href="#" class="nav-bar__link">Menu item 1</a></li>
			<li><a href="#" class="nav-bar__link">Menu item 2 - with very long title</a></li>
        </ul>
      </li>
      <li><a href="#">Ouyeah menu</a></li>
       <li><a href="#">News</a></li>
       <li><a href="#">About us</a></li>
       <li><a href="#">Contact item</a></li>

    </ul>
  </nav>
<!-- KONEC MODREGA MENIJA -->
<h1>Clicking in the body outside the menu will hide it</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit aliquam suscipit. Vivamus ac mi tellus. Donec vulputate sem eu justo ornare, at mattis augue tempor. Nullam fringilla odio lobortis bibendum lobortis. Fusce condimentum ultricies
    nulla, non posuere sem vestibulum nec. Duis rhoncus velit lobortis odio interdum, quis aliquam ex dapibus. Quisque hendrerit pellentesque turpis non pretium. Nam ante metus, tempus quis tortor lacinia, efficitur ullamcorper erat. Sed at aliquet
    nisi, ac congue massa.</p>
  <p>Mauris est odio, tempor in ex ac, cursus iaculis ex. Etiam eu dapibus dolor. Quisque sodales mollis neque fringilla maximus. Praesent malesuada vitae elit eu congue. Mauris fringilla maximus arcu sit amet tempor. Nam sagittis lectus massa, eu viverra
    enim congue a. Nunc ultrices sapien nec enim auctor, ac placerat velit posuere. Donec velit ex, consectetur vitae sapien eget, eleifend maximus sem. Sed placerat nibh mi, eget fermentum justo ultrices nec.</p>
</div>

相关问题
最新问题