Как создать раскрывающееся меню только для CSS (вертикальное)?

Question

Добрый день,

Моя текущая задача - создать несколько таблиц стилей для веб-сайта. Один из стилей веб-сайтов требует, чтобы я создал раскрывающееся меню, однако мне вообще не разрешается изменять HTML-код, поэтому в основном меня просят создать раскрывающееся меню с использованием только CSS.

Вот код HTML, который я должен отобразить в форме раскрывающегося меню:

<div id="global-nav">
<ul>
<li><a href="#products">Products</a>
  <ul>
  <li><a href="#widgets">Widgets</a></li>
  <li><a href="#sites">Sites</a></li>
  <li><a href="#gadgets">Gadgets</a></li>
  </ul>
</li>
</ul>

Однако существуют и другие требования: Не должно быть точек или кружков перед каждым элементом списка.

Мне интересно, возможно ли выполнить эту задачу только с помощью CSS или нет. Есть ли способ сделать это с помощью CSS?

Answer 1

Вертикальное меню с горизонтальным расширением

jsBin demo

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}


/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  width:200px;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  background:#667;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  position:absolute;
  left:0%;
  top:0;
  width:100%;
  visibility:hidden;
  opacity:0;
  transition: transform 0.2s;
  transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  left:100%;
  visibility:visible;
  opacity:1;
  transform: translateX(0px);
}

<nav class="vertical">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="#">Products +</a>
      <ul>
        <li><a href="#">Widgets</a></li>
        <li>
          <a href="#">Sites +</a>
          <ul>
            <li><a href="#">Site 1</a></li>
            <li><a href="#">Site 2</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Gadgets +</a>
          <ul>
            <li><a href="#">Gadget 1</a></li>
            <li><a href="#">Gadget 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

Вертикальное меню (только для мобильных устройств)

этот может лучше всего подойти для мобильных устройств (CSS с меньшими экранами), в противном случае показ / скрытие будет работать с пользовательским опытом

jsBin demo

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}


/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  background:#667;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  background:rgba(0,0,0,0.1);
  padding-left:20px;
  transition: max-height 0.2s ease-out;
  max-height:0;
  overflow:hidden;
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  max-height:500px;
  transition: max-height 0.25s ease-in;
}

<nav class="vertical">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services +</a>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li><a href="#">Products +</a>
      <ul>
        <li><a href="#">Widgets</a></li>
        <li>
          <a href="#">Sites +</a>
          <ul>
            <li><a href="#">Site 1</a></li>
            <li><a href="#">Site 2</a></li>
          </ul>
        </li>
        <li><a href="#">Gadgets +</a>
          <ul>
            <li><a href="#">Gadget 1</a></li>
            <li><a href="#">Gadget 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

Answer 2

В последнем сообщении указан неправильный код.

В документе не может быть более 1 идентификатора с одинаковым именем, поэтому если вы используете код, указанный выше, вам придется изменить1003 *

ID="global-subnav" на class="global-subnav"

и затем измените CSS с

#global-subnav на .global-subnav

Answer 3

Просто слегка улучшенная версия отличного решения выше.