Как последовательно увеличить CSS значение для свойства Padding для структуры Hierarchy? - PullRequest
Новая
       8

Как последовательно увеличить CSS значение для свойства Padding для структуры Hierarchy?

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

У меня есть жестко заполняемый отступ для каждого уровня иерархии заполнения.

Мне нужно решение для любого уровня без жесткого кодирования для каждого уровня. 

.jdm-nav li {
    font-size: 16px;
    position: relative;
}

.jdm-nav li a {
    padding-left: 15px;
}

.jdm-nav li li a {
    padding-left: 30px;
}

.jdm-nav li li li a {
    padding-left: 45px;
}

.jdm-nav li li li li a {
    padding-left: 60px;
}

li li li li ... a

Каждый следующий шаг может быть увеличен на 15px.

Пример полного кода. Существует мобильное меню с возможностью раскрытия каждого элемента, щелкнув значок раскрывающегося списка в правом углу элемента. Если есть предметы для расширения. 

.jdm-nav {
  background-color: white;
  width: 100%;
  padding: 0;
}

.jdm-nav ul {
  padding: 0;
}

.jdm-nav {
  list-style: none;
}

.jdm-nav li {
  list-style: none;
}

.jdm-nav ul {
  margin: 0;
}

.jdm-nav a {
  text-align: left;
  display: flex;
  color: rgb(76, 92, 104);
  font-weight: 500;
  padding: .5em 0;
  font-size: 16px;
  border-bottom: 1px solid rgba(76, 92, 104, 0.1);
}

.jdm-nav li {
  font-size: 16px;
  position: relative !important;
}

.jdm-nav li a {
  padding-left: 15px;
}

.jdm-nav li li a {
  padding-left: 30px;
}

.jdm-nav li li li a {
  padding-left: 45px;
}

.jdm-nav li li li li a {
  padding-left: 60px;
}

.jdm-nav li {
  position: relative;
}

.jdm-nav li>[data-jdm-sub-menu-switcher] {
  font-size: 13px;
  display: flex;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgba(76, 92, 104, 0.1);
  position: relative;
}

.jdm-nav li {
  position: relative !important;
}

.jdm-nav li.menu-item-has-children>ul {
  max-height: 0;
  overflow: hidden;
  transition: 150ms max-height ease-out;
}

.jdm-nav li.menu-item-has-children>ul[data-jdm-state="expanded"] {
  max-height: initial;
}

.jdm-nav li.menu-item-has-children> :first-child {
  grid-column: 1;
}

.jdm-nav li.menu-item-has-children>[data-jdm-sub-menu-switcher] {
  grid-column: 2;
}

.jdm-nav li.menu-item-has-children>ul {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

.jdm-nav li>[data-jdm-sub-menu-switcher]::after {
  position: absolute;
}

.jdm-nav li>[data-jdm-sub-menu-switcher]::after {
  position: absolute;
  width: 1em;
  height: 1em;
  content: '';
  clip-path: url(#prefix-mobile-dropdown-clip-mask);
  font-size: 13px;
  background-color: rgb(76, 92, 104);
  display: inline-flex;
  top: 50%;
  right: 50%;
  transform: translateY(-50%) translateX(50%);
}

.jdm-nav li.menu-item-has-children {
  display: grid;
  grid-template-columns: 100fr 15fr;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div id="prefix-mobile-menu" class="mobile-menu-area prefix-mobile-menu" data-prefix-status="collapsed">
  <nav id="mobile-menu" class="jdm-nav">
    <ul id="primary-menu" class="menu-overflow">
      <li id="menu-item-2420" class="menu-item-has-children">
        <a href="1">1</a>
        <button data-jdm-sub-menu-switcher=""></button>
        <ul class="sub-menu" style="" data-jdm-state="expanded">
          <li id="menu-item-2418" class="menu-item-has-children"><a href="#">1.1</a>
            <button data-jdm-sub-menu-switcher=""></button>
            <ul class="sub-menu" style="" data-jdm-state="expanded">
              <li id="menu-item-2434" class="menu-item-has-children"><a href="1.1">1.1.1</a>
                <button data-jdm-sub-menu-switcher=""></button>
                <ul class="sub-menu">
                  <li id="menu-item-2435">
                    <a href="1.1.1.1">1.1.1.1</a>
                  </li>
                  <li id="menu-item-2436"><a href="1.1.1.2">1.1.1.2</a>
                  </li>
                  <li id="menu-item-2437"><a href="1.1.1.3/">1.1.1.3</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-1832"><a href="2/">2</a></li>
    </ul>
  </nav>
  <svg width="0" height="0" viewBox="0 0 448 512">
		<defs>
			<clipPath
					viewbox="0 0 448 512"
					transform="scale(0.00223, 0.00195)"
					clipPathUnits="objectBoundingBox"
					id="prefix-mobile-dropdown-clip-mask">
				<path fill="#000000"
						d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"
						class=""></path>
			</clipPath>
		</defs>
	</svg>
</div>

Ответы [ 3 ]

1 голос
/ 14 марта 2020

Положите отступ на li и растяните левую часть a на большое фиксированное значение.

Иллюстрированный: 

body > ul {
  border: 1px solid #eee;
  border-radius: 2px;
  margin: 1em;
  padding: 1em;
  overflow: hidden;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding-left: 15px;
}

a {
  display: block;
  margin-left: -150px;
  margin-right: -1em;
  padding-left: 150px;
}

a:hover {
    background-color: #cff;
}
<ul>
  <li>
    <a href="javascript:;">nested</a>
    <ul>
      <li>
        <a href="javascript:;">navigation</a>
        <ul>
          <li>
            <a href="javascript:;">forever</a>
            <ul>
              <li>
                <a href="javascript:;">and</a>
                <ul>
                  <li>
                    <a href="javascript:;">ever</a>
                </ul>
            </ul>
        </ul>
      <li>
        <a href="javascript:;">foo</a>
      <li>
        <a href="javascript:;">bar</a>
    </ul>
  <li>
    <a href="javascript:;">baz</a>
</ul>

(Обратите внимание на то, как область щелчка каждой ссылки расширяется полностью влево.)

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

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

.jdm-nav li {
    font-size: 16px;
    position: relative;
}

.jdm-nav li{
   font-size:1.2em;
   padding-left: 3em;
}
.jdm-nav li a {
    
    background-color:red;
    font-size:16px;
}
<ul class="jdm-nav">
  <li>
    <a>Item1</a>
    <ul>
    <li>
      <a>Item2</a>
      <ul>
        <li>
          <a>Item3</a>
          
        </li>
      </ul>
    </li>
    </ul>
  </li>
</ul>
0 голосов
/ 14 марта 2020

используйте псевдо-функцию css, чтобы увеличить отступы каждого ребенка на 15px.

...