CSS中的全宽菜单

【问题标题】：full width menu in cssCSS中的全宽菜单
【发布时间】：2017-07-23 21:51:29
【问题描述】：

我在 web 中创建了一个菜单代码，它很棒，但我希望我的菜单具有响应性和全宽，但我是 css 和 html 的新手 这是菜单css代码

  .menu, .menu ul {
  list-style: none;
  padding: 0;
  margin: 10;
  max-width: 100%;
  width:100%;
}
.menu {
  height: 58px;
  max-width: 100%;
}
.menu li {
  background: -moz-linear-gradient(#292929, #252525);
  background: -ms-linear-gradient(#292929, #252525);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
  background: -webkit-linear-gradient(#292929, #252525);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
  background: -o-linear-gradient(#292929, #252525);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
  background: linear-gradient(#292929, #252525);
  border-bottom: 2px solid #181818;
  border-top: 2px solid #303030;
  min-width: 180px;
}
.menu > li {
  display: block;
  float: left;
  position: relative;
}
.menu > li:first-child {
  border-radius: 5px 0 0;
}
.menu a {
  border-left: 3px solid rgba(0, 0, 0, 0);
  color: #808080;
  display: block;
  font-family: 'Lucida Console';
  font-size: 18px;
  line-height: 54px;
  padding: 0 25px;
  text-decoration: none;
  text-transform: uppercase;
  max-width: 100%;
}
.menu li:hover {
  background-color: #1c1c1c;
  background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
  background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
  background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
  background: -o-linear-gradient(#1c1c1c, #1b1b1b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
  background: linear-gradient(#1c1c1c, #1b1b1b);
  border-bottom: 2px solid #222222;
  border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
  border-radius: 5px 0 0 0;
  border-left: 3px solid #C4302B;
  color: #C4302B;
}
/* submenu styles */
.submenu {
  left: 0;
  max-height: 0;
  position: absolute;
  top: 100%;
  z-index: 0;
  -webkit-perspective: 400px;
  -moz-perspective: 400px;
  -ms-perspective: 400px;
  -o-perspective: 400px;
  perspective: 400px;
}
.submenu li {
  opacity: 0;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transition: opacity .4s, -webkit-transform .5s;
  -moz-transition: opacity .4s, -moz-transform .5s;
  -ms-transition: opacity .4s, -ms-transform .5s;
  -o-transition: opacity .4s, -o-transform .5s;
  transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
  border-left: 3px solid #454545;
  border-radius: 0;
  color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
  max-height: 2000px;
  z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
  opacity: 1;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}
/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms;
}
.submenu li:nth-child(1) {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms;
}
.submenu li:nth-child(2) {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
}
.submenu li:nth-child(3) {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
}
.submenu li:nth-child(4) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
}
.submenu li:nth-child(5) {
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms;
}
.submenu li:nth-child(6) {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
}
.submenu li:nth-child(7) {
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  transition-delay: 50ms;
}
.submenu li:nth-child(8) {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

这是菜单的html代码

<div class="nav">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#s2">Certification</a>
      <ul class="submenu">
        <li><a href="#">Submenu a</a></li>
        <li><a href="#">Submenu b</a></li>
        <li><a href="#">Submenu c</a></li>
        <li><a href="#">Submenu d</a></li>
      </ul>
    </li>
    <li class="active"><a href="#s2">Projects</a>
      <ul class="submenu">
        <li><a href="#">Residential</a></li>
        <li><a href="#">Recreational</a></li>
        <li><a href="#">Restaurants</a></li>
        <li><a href="#">Malls</a></li>
      </ul>
      </li>
      <li><a href="#s1">About Us</a>
        <ul class="submenu">
        </ul>
        </li>
        <li><a href="Contact-us.html">Contact Us</a></li>
      </ul>

我使用了许多在 stackoverflow 中找到的方法，但它们根本没有帮助

【问题讨论】：

  • 您应该在“媒体查询”上进行一些谷歌搜索，并了解有关 CSS 及其工作原理的更多信息。

标签： javascript html css


【解决方案1】：

这里，

.menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    background: -o-linear-gradient(#292929, #252525);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);
    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
    min-width: 180px;
}

改变这个：

min-width: 180px;

到：

min-width: calc(100%/5);

其中 5 是菜单项的数量，必须根据菜单项进行更改。

【讨论】：

    【解决方案2】：

    在.menu 上添加display: flex 和在.menu li 上添加flex: 1

    .menu,
.menu ul {
  list-style: none;
  padding: 0;
  margin: 10;
  max-width: 100%;
  width: 100%;
}

.menu {
  height: 58px;
  max-width: 100%;
  display: flex;
  background: -moz-linear-gradient(#292929, #252525);
  background: -ms-linear-gradient(#292929, #252525);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
  background: -webkit-linear-gradient(#292929, #252525);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
  background: -o-linear-gradient(#292929, #252525);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
  background: linear-gradient(#292929, #252525);

  border-radius: 5px 0 0;
}

.menu li {
  background: -moz-linear-gradient(#292929, #252525);
  background: -ms-linear-gradient(#292929, #252525);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
  background: -webkit-linear-gradient(#292929, #252525);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
  background: -o-linear-gradient(#292929, #252525);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
  background: linear-gradient(#292929, #252525);
  border-bottom: 2px solid #181818;
  border-top: 2px solid #303030;
  min-width: 180px;
}

.menu>li {
  display: block;
  float: left;
  position: relative;
}

.menu>li:first-child {
  border-radius: 5px 0 0;
}

.menu a {
  border-left: 3px solid rgba(0, 0, 0, 0);
  color: #808080;
  display: block;
  font-family: 'Lucida Console';
  font-size: 18px;
  line-height: 54px;
  padding: 0 25px;
  text-decoration: none;
  text-transform: uppercase;
  max-width: 100%;
}

.menu li:hover {
  background-color: #1c1c1c;
  background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
  background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
  background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
  background: -o-linear-gradient(#1c1c1c, #1b1b1b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
  background: linear-gradient(#1c1c1c, #1b1b1b);
  border-bottom: 2px solid #222222;
  border-top: 2px solid #1B1B1B;
}

.menu li:hover>a {
  border-radius: 5px 0 0 0;
  border-left: 3px solid #C4302B;
  color: #C4302B;
}


/* submenu styles */

.submenu {
  left: 0;
  max-height: 0;
  position: absolute;
  top: 100%;
  z-index: 0;
  -webkit-perspective: 400px;
  -moz-perspective: 400px;
  -ms-perspective: 400px;
  -o-perspective: 400px;
  perspective: 400px;
}

.submenu li {
  opacity: 0;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transition: opacity .4s, -webkit-transform .5s;
  -moz-transition: opacity .4s, -moz-transform .5s;
  -ms-transition: opacity .4s, -ms-transform .5s;
  -o-transition: opacity .4s, -o-transform .5s;
  transition: opacity .4s, transform .5s;
}

.menu .submenu li:hover a {
  border-left: 3px solid #454545;
  border-radius: 0;
  color: #ffffff;
}

.menu>li:hover .submenu,
.menu>li:focus .submenu {
  max-height: 2000px;
  z-index: 10;
}

.menu>li:hover .submenu li,
.menu>li:focus .submenu li {
  opacity: 1;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}


/* CSS3 delays for transition effects */

.menu li:hover .submenu li:nth-child(1) {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.menu li:hover .submenu li:nth-child(2) {
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  transition-delay: 50ms;
}

.menu li:hover .submenu li:nth-child(3) {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
}

.menu li:hover .submenu li:nth-child(4) {
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms;
}

.menu li:hover .submenu li:nth-child(5) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
}

.menu li:hover .submenu li:nth-child(6) {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
}

.menu li:hover .submenu li:nth-child(7) {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
}

.menu li:hover .submenu li:nth-child(8) {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms;
}

.submenu li:nth-child(1) {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms;
}

.submenu li:nth-child(2) {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
}

.submenu li:nth-child(3) {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
}

.submenu li:nth-child(4) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
}

.submenu li:nth-child(5) {
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms;
}

.submenu li:nth-child(6) {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
}

.submenu li:nth-child(7) {
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  transition-delay: 50ms;
}

.submenu li:nth-child(8) {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}
    <div class="nav">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#s2">Certification</a>
      <ul class="submenu">
        <li><a href="#">Submenu a</a></li>
        <li><a href="#">Submenu b</a></li>
        <li><a href="#">Submenu c</a></li>
        <li><a href="#">Submenu d</a></li>
      </ul>
    </li>
    <li class="active"><a href="#s2">Projects</a>
      <ul class="submenu">
        <li><a href="#">Residential</a></li>
        <li><a href="#">Recreational</a></li>
        <li><a href="#">Restaurants</a></li>
        <li><a href="#">Malls</a></li>
      </ul>
    </li>
    <li><a href="#s1">About Us</a>
      <ul class="submenu">
      </ul>
    </li>
    <li><a href="Contact-us.html">Contact Us</a></li>
  </ul>
</div>

    【讨论】：

    • hmm，我的下拉菜单将是全宽的，我希望它们有固定的大小，如果显示为空，其余的只是菜单的颜色和形状
    • 然后从.menu li 中删除flex:1 并将background-color 添加到.menu。在我编辑的我的 sn-p 中查看。
    猜你喜欢
    • 2023-04-07
    • 1970-01-01
    • 1970-01-01
    • 2017-11-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode