文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >当纯CSS菜单打开时，防止身体滚动，允许超出设备高度的菜单滚动。

问当纯CSS菜单打开时，防止身体滚动，允许超出设备高度的菜单滚动。
EN

Stack Overflow用户
提问于 2017-12-15 05:38:46
回答 1查看 68关注 0票数 0

我有一个纯粹的CSS菜单，这导致了一些问题，主要是在小屏幕/移动设备上。

问题1当菜单打开时，背景仍然是可滚动的。我希望焦点放在菜单上，因此当菜单打开时，背景不会滚动。

问题2在一个小屏幕上，菜单项在默认情况下被折叠，并在单击后展开以显示子菜单。如果展开了一两个，并且内容超出了“设备”窗口，就无法向下滚动以查看当前窗口视图之外的内容。如果菜单被展开，它需要是可滚动的。

我尝试过“溢出”属性，但无法修复该问题。希望有人知道怎么做。谢谢!

​

代码语言：javascript
复制
		body {
  margin: 0;
  font-family: serif;
  background-color: #f4f4f4;
}
html {
	color: #222;
	font-size: 1.2em;
	line-height: 1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* ==========================================================================
   Global Header
   ========================================================================== */

.global-nav {
	/*overflow: hidden;*/
	background-color: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	padding: 28px 0 0 0;
}
.header {
	background-color: #fff;
	margin: 0 auto;
	width: 1170px;
	z-index: 3;
	clear: both;
}
.header div.menu {
	overflow: hidden;
	background-color: #fff;
	padding: 20px 0 0 0;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(136,136,136,1);
	-moz-box-shadow: 0px 3px 3px 0px rgba(136,136,136,1);
	box-shadow: 0px 3px 3px 0px rgba(136,136,136,1);
	z-index: 99999999;
}
.header img {
	vertical-align: baseline;
}
.header div.menu ul.menu-links {
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu-col-one {
	width: 25%;
	float: left;
	position: relative;
	padding-bottom: 60px;
}
.menu-col-two {
	width: 25%;
	float: left;
	position: relative;
	padding-bottom: 60px;
}
.menu-col-three {
	width: 25%;
	float: left;
	position: relative;
	padding-bottom: 60px;
}
.menu-col-four {
	width: 25%;
	float: left;
	position: relative;
	padding-bottom: 60px;
}
.menu-col-five {
	display: none;
}
.header div.menu ul.menu-links li a {
	display: block;
	padding: 20px 0 0 0;
}
.header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
	width: 100%;
	position: fixed;
	left: 0;
}
.header .menu-icon {
	cursor: pointer;
	display: inline-block;
	padding: 31px 32px 25px 0;
	position: relative;
}
.header .menu-icon .navicon {
	background: #00539D;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 40px;
}
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {
	background: #00539D;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}
.header .menu-icon .navicon:before {
	top: 12px;
}
.header .menu-icon .navicon:after {
	top: -12px;
}
.header .menu-btn {
	display: none;
}
.header .menu-btn:checked ~ .menu {
	max-height: 100%;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
	background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
	transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
	transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	top: 0;
}
.ac-container {
	width: 1170px;
	margin: 40px auto 30px auto;
	text-align: left;
}
.ac-container article {
	overflow: visible;
	padding-right: 30px;
}
.ac-container input {
	display: none;
}
.ac-container label {
	position: relative;
	z-index: 20;
	display: block;
	cursor: pointer;
	font-size: 25px;
}




@media only screen and (max-width: 1169px) {

.header {
	margin: 0 2%;
	width: 96%;
	padding-right: 0;
}
.ac-container {
	width: 96%;
	padding: 0 2%;
}

}


@media only screen and (max-width: 970px) {
.global-nav {
	padding: 14px 0 0 0;
}
.header .menu-icon {
	padding: 31px 1% 25px 0;
}
.header-content-right {
	display: none;
}
.header div.menu {
	margin-top: 0px;
}
.header div.menu ul.menu-links {
	margin: 0;
}
.menu-col-one {
	width: 100%;
	border-bottom: 1px solid #f1f1f1; 
	margin-left: 0%;
	margin-bottom: 30px;
	padding-bottom: 25px;
}
.menu-col-two {
	width: 100%;
	border-bottom: 1px solid #f1f1f1; 
	margin-bottom: 30px;
	padding-bottom: 25px;
}
.menu-col-three {
	width: 100%;
	border-bottom: 1px solid #f1f1f1; 
	margin-bottom: 30px;
	padding-bottom: 25px;
}
.menu-col-four {
	width: 100%; 
	margin-right: 0%;
	margin-bottom: 30px;
	padding-bottom: 25px;
}
.menu-col-five {
	width: 100%; 
	margin-right: 0%;
	display: block;
}
.header div.menu ul li.list-header {
	display: block !important;
}
.header div.menu ul li.list-item {
	display: none;
}
.ac-container label {
	font-size: 16px;
	color: #636c76;
	font-weight: bold;
	letter-spacing: 0.2px;
}
.ac-container input:checked + label, .ac-container input:checked + label:hover {
	color: #454545;
}
.ac-container input + label:after {
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: -6px;
}

.ac-container article {
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	position: relative;
	z-index: 10;
	-webkit-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
	-moz-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
	-o-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
	-ms-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
	transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
	max-height: 0;
	font-size: 14px;
}
.ac-container article a {
	color: #636c76;
}
.ac-container article p {
	line-height: 23px;
	font-size: 14px;
	padding: 20px;
}
.ac-container article ul li {
	padding: 10px 0;
}
.ac-container article ul li span {
	display: none;
}
.ac-container input:checked ~ article {
	-webkit-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
	-moz-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
	-o-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
	-ms-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
	transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
	max-height: 500px;/*added*/
}
}
代码语言：javascript
复制
<!-- [Start] Header Section-->
<section class="global-nav" role="region" aria-label="globalnav">
  <header class="header" role="banner">
    <input class="menu-btn" type="checkbox" id="menu-btn" />
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>

    <div class="menu">
      <section class="ac-container">
        <div class="menu-col-one">
          <input id="ac-1" name="accordion-1" type="checkbox" />
          <label for="ac-1">DD 1</label>
          <article class="ac-small">
            <ul class="menu-links">
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
            </ul>
          </article>
        </div>
        <div class="menu-col-two">
          <input id="ac-2" name="accordion-1" type="checkbox" />
          <label for="ac-2">DD 2</label>
          <article class="ac-medium">
            <ul class="menu-links">
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
            </ul>
          </article>
        </div>
        <div class="menu-col-three">
          <input id="ac-3" name="accordion-1" type="checkbox" />
          <label for="ac-3">DD 3</label>
          <article class="ac-large">
            <ul class="menu-links">
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
            </ul>
          </article>
        </div>
        <div class="menu-col-four">
          <input id="ac-4" name="accordion-1" type="checkbox" />
          <label for="ac-4">DD 4</label>
          <article class="ac-large">
            <ul class="menu-links">
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
            </ul>
          </article>
        </div>
        <div class="menu-col-five">

          <div class="btn-group">
            <button class="btn">Button</button>
            <button class="btn">Button</button>
            <button class="btn">Button</button>
          </div>
        </div>
      </section>
    </div>
  </header>
</section>
<!-- [End] Header Section--> 
<!-- [Start] Main Content -->
<main role="main">
  <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
  <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
  <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
  <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
  <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
  <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
  <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
  <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
  <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
  <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
  <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
  <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
  <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
  <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
  
  <!-- [End] Main Content --> 
</main>

​

html
css
mobile
drop-down-menu
overflow
EN

回答 1

Stack Overflow用户

发布于 2017-12-15 06:02:03

快速回答：

  • 在overflow: auto和main上添加.menu
  • 将height: 100%添加到html, body, main。
  • 将max-height: 100%添加到.menu

使头小到17 by，并且只显示box-shadow on the bottom。但是，如果移动设备的滚动条被完全移除，则必须重写此操作.

就我个人而言，我只是在身体顶部添加一个填充，然后让菜单滑过内容。这将是最优雅的。

​

代码语言：javascript
复制
body {
  margin: 0;
  font-family: serif;
  background-color: #f4f4f4;
  height: 100%; /* My code */
}
html {
	color: #222;
	font-size: 1.2em;
	line-height: 1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  height: 100%; /* My code */
  overflow: hidden; /* My code */
}

/* My code */
main {
  height: 100%;
  overflow: auto;
}

/* ==========================================================================
   Global Header
   ========================================================================== */

.global-nav {
	/*overflow: hidden;*/
	background-color: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100% - 17px); /* My code */
	z-index: 9999;
	padding: 28px 0 0 0;
}
.header {
	background-color: #fff;
	margin: 0 auto;
	width: 1170px;
	z-index: 3;
	clear: both;
}
.header div.menu {
	overflow: hidden;
	background-color: #fff;
	padding: 20px 0 0 0;
	-webkit-box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */
	-moz-box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */
	box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */
	z-index: 99999999;
}
.header img {
	vertical-align: baseline;
}
.header div.menu ul.menu-links {
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu-col-one {
	width: 25%;
	float: left;
	position: relative;
	padding-bottom: 60px;
}
.menu-col-two {
	width: 25%;
	float: left;
	position: relative;
	padding-bottom: 60px;
}
.menu-col-three {
	width: 25%;
	float: left;
	position: relative;
	padding-bottom: 60px;
}
.menu-col-four {
	width: 25%;
	float: left;
	position: relative;
	padding-bottom: 60px;
}
.menu-col-five {
	display: none;
}
.header div.menu ul.menu-links li a {
	display: block;
	padding: 20px 0 0 0;
}
.header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
	width: calc(100% - 17px); /* My code */
	position: fixed;
	left: 0;
}
.header .menu-icon {
	cursor: pointer;
	display: inline-block;
	padding: 31px 32px 25px 0;
	position: relative;
}
.header .menu-icon .navicon {
	background: #00539D;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 40px;
}
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {
	background: #00539D;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}
.header .menu-icon .navicon:before {
	top: 12px;
}
.header .menu-icon .navicon:after {
	top: -12px;
}
.header .menu-btn {
	display: none;
}
.header .menu-btn:checked ~ .menu {
  max-height: calc(100% - 20px); /* My code */
  overflow: auto; /* My code */
}
.header .menu-btn:checked ~ .menu-icon .navicon {
	background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
	transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
	transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	top: 0;
}
.ac-container {
	width: 1170px;
	margin: 40px auto 30px auto;
	text-align: left;
}
.ac-container article {
	overflow: visible;
	padding-right: 30px;
}
.ac-container input {
	display: none;
}
.ac-container label {
	position: relative;
	z-index: 20;
	display: block;
	cursor: pointer;
	font-size: 25px;
}




@media only screen and (max-width: 1169px) {

.header {
	margin: 0 2%;
	width: 96%;
	padding-right: 0;
}
.ac-container {
	width: 96%;
	padding: 0 2%;
}

}


@media only screen and (max-width: 970px) {
.global-nav {
	padding: 14px 0 0 0;
}
.header .menu-icon {
	padding: 31px 1% 25px 0;
}
.header-content-right {
	display: none;
}
.header div.menu {
	margin-top: 0px;
}
.header div.menu ul.menu-links {
	margin: 0;
}
.menu-col-one {
	width: 100%;
	border-bottom: 1px solid #f1f1f1; 
	margin-left: 0%;
	margin-bottom: 30px;
	padding-bottom: 25px;
}
.menu-col-two {
	width: 100%;
	border-bottom: 1px solid #f1f1f1; 
	margin-bottom: 30px;
	padding-bottom: 25px;
}
.menu-col-three {
	width: 100%;
	border-bottom: 1px solid #f1f1f1; 
	margin-bottom: 30px;
	padding-bottom: 25px;
}
.menu-col-four {
	width: 100%; 
	margin-right: 0%;
	margin-bottom: 30px;
	padding-bottom: 25px;
}
.menu-col-five {
	width: 100%; 
	margin-right: 0%;
	display: block;
}
.header div.menu ul li.list-header {
	display: block !important;
}
.header div.menu ul li.list-item {
	display: none;
}
.ac-container label {
	font-size: 16px;
	color: #636c76;
	font-weight: bold;
	letter-spacing: 0.2px;
}
.ac-container input:checked + label, .ac-container input:checked + label:hover {
	color: #454545;
}
.ac-container input + label:after {
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: -6px;
}

.ac-container article {
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	position: relative;
	z-index: 10;
	-webkit-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
	-moz-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
	-o-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
	-ms-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
	transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
	max-height: 0;
	font-size: 14px;
}
.ac-container article a {
	color: #636c76;
}
.ac-container article p {
	line-height: 23px;
	font-size: 14px;
	padding: 20px;
}
.ac-container article ul li {
	padding: 10px 0;
}
.ac-container article ul li span {
	display: none;
}
.ac-container input:checked ~ article {
	-webkit-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
	-moz-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
	-o-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
	-ms-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
	transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
	max-height: 500px;/*added*/
}
}
代码语言：javascript
复制
<!-- [Start] Header Section-->
<section class="global-nav" role="region" aria-label="globalnav">
  <header class="header" role="banner">
    <input class="menu-btn" type="checkbox" id="menu-btn" />
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>

    <div class="menu">
      <section class="ac-container">
        <div class="menu-col-one">
          <input id="ac-1" name="accordion-1" type="checkbox" />
          <label for="ac-1">DD 1</label>
          <article class="ac-small">
            <ul class="menu-links">
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
            </ul>
          </article>
        </div>
        <div class="menu-col-two">
          <input id="ac-2" name="accordion-1" type="checkbox" />
          <label for="ac-2">DD 2</label>
          <article class="ac-medium">
            <ul class="menu-links">
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
            </ul>
          </article>
        </div>
        <div class="menu-col-three">
          <input id="ac-3" name="accordion-1" type="checkbox" />
          <label for="ac-3">DD 3</label>
          <article class="ac-large">
            <ul class="menu-links">
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
            </ul>
          </article>
        </div>
        <div class="menu-col-four">
          <input id="ac-4" name="accordion-1" type="checkbox" />
          <label for="ac-4">DD 4</label>
          <article class="ac-large">
            <ul class="menu-links">
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
              <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
            </ul>
          </article>
        </div>
        <div class="menu-col-five">

          <div class="btn-group">
            <button class="btn">Button</button>
            <button class="btn">Button</button>
            <button class="btn">Button</button>
          </div>
        </div>
      </section>
    </div>
  </header>
</section>
<!-- [End] Header Section--> 
<!-- [Start] Main Content -->
<main role="main">
  <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
  <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
  <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
  <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
  <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
  <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
  <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
  <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
  <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
  <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
  <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
  <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
  <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
  <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
  
  <!-- [End] Main Content --> 
</main>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/47826408

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档