Использовать положение: абсолютное в трехуровневом меню для отображения двух последних уровней справа друг от друга, избегая их наложения друг на друга - PullRequest
Новая
       11

Использовать положение: абсолютное в трехуровневом меню для отображения двух последних уровней справа друг от друга, избегая их наложения друг на друга

0 голосов
/ 05 октября 2018

Следующий код будет описывать эту ситуацию: 

ul {
  margin: 0 0 1% 5%;
  font-size: 18px;

}
ul li {
  display: inline;
  padding: 10px;
}
.drop-down {
  position: absolute;
  background: dodgerblue;
}
.drop-down .level {
  left: 114px;
  top: 10px;
  position: absolute;
  background: red;
  display: block;
  width: 100%;
}
.drop-down li {
  display: block;
}
ul {
  margin: 0;
  padding: 0;
}
.drop-down .level.grey {
  background: grey;
}
<body>
	<nav>
		<ul>
			<li class="drop">list item 1</li>
			<div class="drop-down">
				<ul>
					<li>list item sub 2</li>
					<div class="drop-down level">
						<ul>
							<li>list item sub-sub 3</li>
							<li>list item sub-sub 3</li>
							<li>list item sub-sub 3</li>
						</ul>
					</div>
					<li>list item sub 3</li>
					<div class="drop-down level grey">
						<ul>
							<li>list item sub-sub 3</li>
							<li>list item sub-sub 3</li>
							<li>list item sub-sub 3</li>
						</ul>
					</div>
					<li>list item sub 4</li>
				</ul>
			</div>
			<li class="drop">list item 2</li>
			<li class="drop">list item 3</li>
			<li class="drop">list item 4</li>
			<li class="drop">list item 5</li>
			<li class="drop">list item 6</li>
			<li class="drop">list item 7</li>
			<li class="drop">list item 8</li>
		</ul>
	</nav>
</body>

Я строю трехуровневое меню, которое, когда вы наводите курсор на каждый элемент на каждом уровне, открывает следующий уровень, соответствующий элементу, который выhover.

Вот чего я хотел бы достичь более или менее:

enter image description here

Я еще не достиг точкигде я добавляю свойство при наведении, потому что имею дело с проблемой позиционирования.Элементы (li) на первом уровне имеют встроенное расположение, элементы второго уровня (li) вместо этого являются блокированными элементами, сложенными друг на друга, и то же самое происходит на третьем уровне.

Теперь третий уровень находится справа от второго уровня, поэтому, если я использую свойство position:absolute, а затем, например, top:0, каждый под-третий уровень (предположим, что у нас более одного пункта меню третьего уровня) будет скрывать следующий подуровень-3, как это происходит на этой картинке:

enter image description here

По сути, я бы хотел избежать этой проблемы, поэтому, если вы наведите курсор мыши на list-item-sub-2 Я хотел бы открыть только div с классом drop-down.level, и когда я наведу курсор на следующий список элементов list-item-sub-3, я хочу открыть div с классом drop-down.level.grey в другой позиции, которая соответствует list-item-sub-3(немного ниже к предыдущему списку).

Я хотел бы использовать только css, но, как я уже сказал, если я использую свойство position:absolute для каждого элемента со значением, таким как top:10px или top:2% каждый элемент поместитдруг на друга, если я вместо этого использую position:relative, каждый элемент будет вложен в своего отца верхнего уровня.

Любое предложение?

1 Ответ

0 голосов
/ 05 октября 2018

Для начала <ul> с может содержать только <li>, <script> и <template> элементов .Подменю <ul> s должно быть детьми их ассоциированных <li> s.С этим изменением мы можем расположить <ul> s абсолютно внутри их <li> s на основе их глубины в иерархии меню и отбросить все классы: 

nav ul {
  margin: 0 0 1% 5%;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

nav li {
  /* All <ul>s are positioned relative to their parent <li> */
  position: relative;
  /* No bullets */
  list-style: none;
  /* Without word wrapping, menus are as wide as they need to be */
  white-space: nowrap;
  padding: 10px;
}

/* Top-level list's items are inline */
nav>ul>li {
  display: inline;
}

/* Second-level lists are below their parent <li> */
nav>ul>li>ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: dodgerblue;
}

/* Third-level lists and deeper are right of their parent <li> */
nav ul ul ul {
  left: 100%;
  top: 0;
  position: absolute;
  background: red;
}

.grey {
  background: grey;
}
<nav>
  <ul>
    <li>File</li>
    <li>Edit</li>
    <li>
      View
      <ul>
        <li>
          Toolbars
          <ul class="grey">
            <li>Menu Bar</li>
            <li>Bookmarks Toolbar</li>
            <li>Customize...</li>
          </ul>
        </li>
        <li>
          Sidebar
          <ul>
            <li>Bookmarks</li>
            <li>History</li>
            <li>Synced Tabs</li>
          </ul>
        </li>
        <li>Zoom</li>
        <li>Page Style</li>
        <li>Text Encoding</li>
        <li>Full Screen</li>
        <li>Enter Reader View</li>
      </ul>
    </li>
    <li>History</li>
    <li>Bookmarks</li>
    <li>Tools</li>
    <li>Help</li>
  </ul>
</nav>

Вам понадобится JavaScript для эффектов наведения, потому что удобные всплывающие меню сложны и псевдокласс CSS :hover isn 't до задачи (испорчен для надоедливого анимированного GIF):

Рассматривали ли вы мегаменю ?

...