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

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

0 голосов
/ 14 марта 2019

Какую часть 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>

Ответы [ 2 ]

2 голосов
/ 14 марта 2019

Добавьте CSS в медиазапрос для 767px, поэтому, когда экран уменьшится ниже 767px, тогда nav nav станет 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>
1 голос
/ 14 марта 2019

Да, определенно только незначительные изменения в 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>
...