Горизонтальное меню в вертикальное меню без добавления каких-либо дополнительных атрибутов HTML

Какую часть CSS нужно изменить, чтобы преобразовать это горизонтальное меню CSS в меню левой боковой панели? Можно ли это сделать только в CSS без добавления дополнительных атрибутов в HTML? Можно ли это сделать на чистом 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>

html css navbar

14.03.2019 09:04

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Да, определенно, просто небольшие изменения в CSS, и вы получите то, что хотите. Просто обновите css

    /*adapted from https://www.andrewnoske.com/wiki/CSS_-_Multilevel_Navigation_Bar */
    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: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: 0;
      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 {}

.nav > ul {
  display: flex;
  flex-direction: column;
}
.nav {
  width: 200px;
  height: 100vh;
}
.nav > ul > li > ul {
  z-index: 9999999;
  right: 0;
  left: 200px;
}

<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>
</nav>

14.03.2019 09:41

Ответ принят как подходящий

Добавьте css в медиа-запрос для 767 пикселей, поэтому, когда экран уменьшится ниже 767 пикселей, тогда ширина навигации становится 200px и position:fixed и height: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>

Чтобы я лучше понял, как все это работает, как бы это изменилось, если бы вместо этого я хотел боковое меню с правой стороны?

— 15.03.2019 02:58

14.03.2019 10:17