Вложенное меню clip-path

253

23 ноября 2017, 01:41

fiddle

Как можно реализовать подобное меню?

Изначально видно только первый верхний блок с элементами, при клике на элемент - открывается нижний, при клике на один элемент из второго блока - открывается правый блок Cверстал пока что так:

<ul class="first">
        <li class="first-link">
          <a href="#">
            <span>Умная страна</span>
          </a>
          <ul class="second">
            <li class="second-link">
              <a href="#">
                <span>Развитие</span>
              </a>
              <ul class="third">
                <li><a href="#"><span>Уровень шума</span></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
              </ul>
            </li>
            <li>
              <a href="#"><span>Взаимодействия</span></a>
            </li>
            <li>
              <a href="#"><span>Расширение</span></a>
            </li>
            <li>
              <a href="#"><span>Информация</span></a>
            </li>
            <li>
              <a href="#"><span>Контроль</span></a>
            </li>
            <li>
              <a href="#"><span>Экология</span></a>
            </li>
            <li>
              <a href="#"><span>Энергия</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">
            <span>Умный город</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Умное предприятие</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Умный дом</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Я</span>
          </a>
        </li>
      </ul>

Использовал маску в виде:

-webkit-clip-path: polygon(100% 1%, 0 0, 50% 100%);
clip-path: polygon(100% 1%, 0 0, 50% 100%);

Получилось примерно следующее:

Т.к. второе и третье меню будет вложено, то маска обрезает и внутренние элементы. absolute/relative/z-index конечно же, не помогает

Answer 1

Учитывая, что все равно будете использовать JS, прикрутил наведение на него. Принцип поймете. Можно использовать пседвоелемнты и делать треугольники фоном.

$(document).ready(function() { 
 
  $('li').click(function() { 
    $('li').removeClass('active'); 
    $(this).toggleClass('active'); 
  }); 
 
});

* { 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
} 
 
body, 
ul { 
  margin: 0; 
  padding: 0; 
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
} 
 
li { 
  list-style: none; 
  position: relative; 
  cursor: pointer; 
} 
 
span { 
  position: absolute; 
  text-align: center; 
  left: 50%; 
  top: -34px; 
  width: 120px; 
  line-height: 20px; 
  margin-left: -60px; 
  color: inherit; 
  display: block; 
  z-index: 2; 
} 
 
[class^="level-"] { 
  border-top: 50px solid #ffdbcb; 
  border-left: 40px solid transparent; 
  border-right: 40px solid transparent; 
  margin-right: auto; 
  margin-left: auto; 
  color: #483939; 
} 
 
[class^="level-"].active { 
  border-top: 50px solid #ff3920; 
  color: #fff; 
} 
 
.level-1 { 
  width: 0; 
} 
 
.level-2 { 
  width: 160px; 
} 
 
.level-3 { 
  width: 240px; 
} 
 
.level-4 { 
  width: 320px; 
} 
 
.level-5 { 
  width: 400px; 
} 
 
.level-6 { 
  width: 480px; 
} 
 
.level-7 { 
  width: 560px; 
} 
 
.level-8 { 
  width: 640px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="top"> 
  <li class="level-8"><span>Умная страна</span></li> 
  <li class="level-7"><span>Взаимодействия</span></li> 
  <li class="level-6"><span>Расширение</span></li> 
  <li class="level-5"><span>Информация</span></li> 
  <li class="level-4"><span>Контроль</span></li> 
  <li class="level-3"><span>Экология</span></li> 
  <li class="level-2"><span>Энергия</span></li> 
  <li class="level-1"></li> 
</ul>

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Bootstrap 4 dropdown menu не под кнопкой

Не могу понять как сделать вывод dropdown-menu не под кнопкой а под самим меню, чтобы ширина этого dropdown-menu была равна ширине основной строки дабы...

439

CSS

Тег в атрибуте (alt=“html tag”)

У меня есть вопрос по HTML

254

CSS

Как задать медиа-запрос для процентного масштабирования?

Как задать медиа-запрос для масштабирования? На масштабе окна браузера 90% едет заголовокКак узнать, какова ширина экрана на 90% (и так далее),...

251

CSS

Как задать два background?

Привет подскажите пожалуйста такой кодИменно код ибо суть я знаю а вот код неправильно пишу

363