html - 水平菜单到垂直菜单，无需添加任何额外的 HTML 属性

标签 html css navbar

必须更改 CSS 的哪一部分才能将此水平 CSS 菜单转换为左侧边栏菜单？是否可以仅在 CSS 中完成而不向 HTML 添加其他属性？可以用 Pure CSS 和 Js 完成吗？没有框架，请。我有兴趣了解如何执行此操作，以便我更好地理解将来如何以及为何执行类似的元素。

body {
  margin: 0;
  padding: 0;
  background: #eee;
}


/* Navigation Bar */

.nav {
  background: linear-gradient(to bottom, #57b759, #007a00);
  /* Green gradient - light to dark. */
  font-size: 14px;
  font-family: Arial, sans-serif;
  text-align: left;
}

.nav>ul a {
  color: #fff;
}

.nav>ul,
.nav>ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav>ul li {
  position: relative;
}

.nav>ul a {
  padding: 5px 10px;
  margin: 5px 10px;
  display: block;
  text-decoration: none;
  border-radius: .2em;
}

.nav>ul a:hover {
  opacity: 1.0;
  background-color: rgba(0, 0, 0, 0.3);
}


/* Active Menu Item */

.nav .active {
  opacity: 1.0;
  background-color: rgba(255, 255, 255, 0.5);
  color: #000;
  border-radius: .2em;
}


/* Navigation Bar - Level 1 Drop Down Menu */

.nav>ul>li {
  display: inline-block;
  vertical-align: top;
  margin-left: -4px;
}

.nav>ul>li:first-child {
  margin-left: 0;
}

.nav>ul>li>a {}

.nav>ul>li>a:hover {}


/* Navigation Bar - Level 2 */

.nav>ul>li>ul {
  text-align: left;
  width: auto;
  /* Change auto value with 200px if you want a bigger menu */
  display: none;
  background: #007a00;
  /* Dark green. */
  position: absolute;
  top: 100%;
  left: 0;
  padding-bottom: 5px;
  min-width: 150px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}

.nav>ul>li:hover>ul {
  display: block;
}

.nav>ul ul li a {}

.nav>ul ul li a:hover {}


/* Navigation Bar - Level 3 */

.nav>ul>li>ul>li>ul {
  text-align: left;
  display: none;
  background: #57b759;
  /* Light green. */
  position: absolute;
  left: 100%;
  top: 0;
  padding-bottom: 5px;
  min-width: 150px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}

.nav>ul>li>ul>li:hover>ul {
  display: block;
}

.nav>ul ul ul li {}

.nav>ul ul ul li a {}

.nav>ul ul ul li a:hover {}


/* Navigation Bar - Level 4 */

.nav>ul>li>ul>li>ul>li>ul {
  text-align: left;
  display: none;
  background: #57b759;
  /* Light green. */
  position: absolute;
  left: 100%;
  top: 0;
  padding-bottom: 5px;
  min-width: 250px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}

.nav>ul>li>ul>li>ul>li:hover>ul {
  display: block;
}

.nav>ul ul ul ul li {}

.nav>ul ul ul ul li a {}

.nav>ul ul ul ul li a:hover {}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Nav</title>
</head>

<body>
  <nav class="nav">
    <ul>
      <li><a href="#">Section 1</a></li>
      <li><a href="#">Section 2 ▾</a>
        <ul>
          <li><a href="#">Section 2.1</a></li>
          <li><a href="#">Section 2.2</a></li>
          <li><a href="#">Section 2.3</a></li>
        </ul>
      </li>
      <li><a href="#" class="active">Section 3 ▾</a>
        <ul>
          <li><a href="#" class="active">Section 3.1</a></li>
          <li><a href="#">Section 3.2 ▸</a>
            <ul>
              <li><a href="#">Section 3.2.1</a></li>
              <li><a href="#">Section 3.2.2</a></li>
              <li><a href="#">Section 3.2.3 ▸</a>
                <ul>
                  <li><a href="#">Section 3.2.3.1</a></li>
                  <li><a href="#">Section 3.2.3.2</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Section 3.3</a></li>
        </ul>
      </li>
    </ul>
    </div>

</body>

</html>

最佳答案

在媒体查询中为 767px 添加 css，因此当屏幕缩小到 767px 以下时，nav 宽度变为 200px 和 position:fixed 和 高度:100%

@media screen and (max-width: 767px) {
  .nav {
    text-align: right;
    width: 200px;
    position: fixed;
    height: 100%;
  }
  .nav  ul  li {
    display: block;
  }
  .nav > ul > li > ul {
    top:0px;
    left:100%;
  }
}


body {
  margin: 0;
  padding: 0;
  background: #eee;
}


/* Navigation Bar */

.nav {
  background: linear-gradient(to bottom, #57b759, #007a00);
  /* Green gradient - light to dark. */
  font-size: 14px;
  font-family: Arial, sans-serif;
  text-align: left;
}

.nav>ul a {
  color: #fff;
}

.nav>ul,
.nav>ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav>ul li {
  position: relative;
}

.nav>ul a {
  padding: 5px 10px;
  margin: 5px 10px;
  display: block;
  text-decoration: none;
  border-radius: .2em;
}

.nav>ul a:hover {
  opacity: 1.0;
  background-color: rgba(0, 0, 0, 0.3);
}


/* Active Menu Item */

.nav .active {
  opacity: 1.0;
  background-color: rgba(255, 255, 255, 0.5);
  color: #000;
  border-radius: .2em;
}


/* Navigation Bar - Level 1 Drop Down Menu */

.nav>ul>li {
  display: inline-block;
  vertical-align: top;
  margin-left: -4px;
}

.nav>ul>li:first-child {
  margin-left: 0;
}

.nav>ul>li>a {}

.nav>ul>li>a:hover {}


/* Navigation Bar - Level 2 */

.nav>ul>li>ul {
  text-align: left;
  width: auto;
  /* Change auto value with 200px if you want a bigger menu */
  display: none;
  background: #007a00;
  /* Dark green. */
  position: absolute;
  top: 100%;
  left: 0;
  padding-bottom: 5px;
  min-width: 150px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}

.nav>ul>li:hover>ul {
  display: block;
}

.nav>ul ul li a {}

.nav>ul ul li a:hover {}


/* Navigation Bar - Level 3 */

.nav>ul>li>ul>li>ul {
  text-align: left;
  display: none;
  background: #57b759;
  /* Light green. */
  position: absolute;
  left: 100%;
  top: 0;
  padding-bottom: 5px;
  min-width: 150px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}

.nav>ul>li>ul>li:hover>ul {
  display: block;
}

.nav>ul ul ul li {}

.nav>ul ul ul li a {}

.nav>ul ul ul li a:hover {}


/* Navigation Bar - Level 4 */

.nav>ul>li>ul>li>ul>li>ul {
  text-align: left;
  display: none;
  background: #57b759;
  /* Light green. */
  position: absolute;
  left: 100%;
  top: 0;
  padding-bottom: 5px;
  min-width: 250px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}

.nav>ul>li>ul>li>ul>li:hover>ul {
  display: block;
}

.nav>ul ul ul ul li {}

.nav>ul ul ul ul li a {}

.nav>ul ul ul ul li a:hover {}

@media screen and (max-width: 767px) {
  .nav {
    text-align: right;
    width: 200px;
    position: fixed;
    height: 100%;
  }
  .nav  ul  li {
    display: block;
  }
  .nav > ul > li > ul {
    top:0px;
    left:100%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Nav</title>
</head>

<body>
  <nav class="nav">
    <ul>
      <li><a href="#">Section 1</a></li>
      <li><a href="#">Section 2 ▾</a>
        <ul>
          <li><a href="#">Section 2.1</a></li>
          <li><a href="#">Section 2.2</a></li>
          <li><a href="#">Section 2.3</a></li>
        </ul>
      </li>
      <li><a href="#" class="active">Section 3 ▾</a>
        <ul>
          <li><a href="#" class="active">Section 3.1</a></li>
          <li><a href="#">Section 3.2 ▸</a>
            <ul>
              <li><a href="#">Section 3.2.1</a></li>
              <li><a href="#">Section 3.2.2</a></li>
              <li><a href="#">Section 3.2.3 ▸</a>
                <ul>
                  <li><a href="#">Section 3.2.3.1</a></li>
                  <li><a href="#">Section 3.2.3.2</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Section 3.3</a></li>
        </ul>
      </li>
    </ul>
    </div>

</body>

</html>

右侧边栏

body {
  margin: 0;
  padding: 0;
  background: #eee;
}


/* Navigation Bar */

.nav {
  background: linear-gradient(to bottom, #57b759, #007a00);
  /* Green gradient - light to dark. */
  font-size: 14px;
  font-family: Arial, sans-serif;
  text-align: left;
}

.nav>ul a {
  color: #fff;
}

.nav>ul,
.nav>ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav>ul li {
  position: relative;
}

.nav>ul a {
  padding: 5px 10px;
  margin: 5px 10px;
  display: block;
  text-decoration: none;
  border-radius: .2em;
}

.nav>ul a:hover {
  opacity: 1.0;
  background-color: rgba(0, 0, 0, 0.3);
}


/* Active Menu Item */

.nav .active {
  opacity: 1.0;
  background-color: rgba(255, 255, 255, 0.5);
  color: #000;
  border-radius: .2em;
}


/* Navigation Bar - Level 1 Drop Down Menu */

.nav>ul>li {
  display: inline-block;
  vertical-align: top;
  margin-left: -4px;
}

.nav>ul>li:first-child {
  margin-left: 0;
}

.nav>ul>li>a {}

.nav>ul>li>a:hover {}


/* Navigation Bar - Level 2 */

.nav>ul>li>ul {
  text-align: left;
  width: auto;
  /* Change auto value with 200px if you want a bigger menu */
  display: none;
  background: #007a00;
  /* Dark green. */
  position: absolute;
  top: 100%;
  left: 0;
  padding-bottom: 5px;
  min-width: 150px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}

.nav>ul>li:hover>ul {
  display: block;
}

.nav>ul ul li a {}

.nav>ul ul li a:hover {}


/* Navigation Bar - Level 3 */

.nav>ul>li>ul>li>ul {
  text-align: left;
  display: none;
  background: #57b759;
  /* Light green. */
  position: absolute;
  left: 100%;
  top: 0;
  padding-bottom: 5px;
  min-width: 150px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}

.nav>ul>li>ul>li:hover>ul {
  display: block;
}

.nav>ul ul ul li {}

.nav>ul ul ul li a {}

.nav>ul ul ul li a:hover {}


/* Navigation Bar - Level 4 */

.nav>ul>li>ul>li>ul>li>ul {
  text-align: left;
  display: none;
  background: #57b759;
  /* Light green. */
  position: absolute;
  left: 100%;
  top: 0;
  padding-bottom: 5px;
  min-width: 250px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}

.nav>ul>li>ul>li>ul>li:hover>ul {
  display: block;
}

.nav>ul ul ul ul li {}

.nav>ul ul ul ul li a {}

.nav>ul ul ul ul li a:hover {}

@media screen and (max-width: 767px) {
  .nav {
    text-align: left;
    width: 200px;
    position: fixed;
    height: 100%;
    right:0px;
  }
  .nav  ul  li {
    display: block;
  }
  .nav > ul > li ul {
    top:0px!important;
    right:100%;
    left:auto!important;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Nav</title>
</head>

<body>
  <nav class="nav">
    <ul>
      <li><a href="#">Section 1</a></li>
      <li><a href="#">Section 2 ▾</a>
        <ul>
          <li><a href="#">Section 2.1</a></li>
          <li><a href="#">Section 2.2</a></li>
          <li><a href="#">Section 2.3</a></li>
        </ul>
      </li>
      <li><a href="#" class="active">Section 3 ▾</a>
        <ul>
          <li><a href="#" class="active">Section 3.1</a></li>
          <li><a href="#">Section 3.2 ▸</a>
            <ul>
              <li><a href="#">Section 3.2.1</a></li>
              <li><a href="#">Section 3.2.2</a></li>
              <li><a href="#">Section 3.2.3 ▸</a>
                <ul>
                  <li><a href="#">Section 3.2.3.1</a></li>
                  <li><a href="#">Section 3.2.3.2</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Section 3.3</a></li>
        </ul>
      </li>
    </ul>
    </div>

</body>

</html>

关于html - 水平菜单到垂直菜单，无需添加任何额外的 HTML 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55157579/

上一篇：javascript - 在顶部滚动表格以添加新行

下一篇：css - 使用 nth-child 或 nth-of-type 我想选择这种模式 -1,5,9,13,17,19..-

相关文章：

html - 隐藏在父边框后面的 Css div 溢出

jquery - 如何强制 jQuery Validate 在表单元素内部而不是外部显示错误？

javascript - 带有反应路由器的菜单组件未渲染

javascript - 输入带有动态零的文本 html

行的 python pandas 着色

javascript - jQuery : How To Get src Value of Multiple img

CSS:如何隐藏(定位到用户看不到的地方)具有 Z-Index 设置的 div？

ios - 全局更新导航栏按钮项目的颜色

html - 第一个元素菜鸟问题

html - XSL 中的表列拆分问题

©2024 IT工具网  联系我们