해당 컨테이너에있는 부모와 유사한 요소의 수에 따라 자식 요소에 다른 ID를 지정하는 방법

Question

Wordpress 테마 (http://www.dev.visualvisual.com)를 개발 중입니다. .menu-items이 상단에 표시되고 두 번째 바닥 글 메뉴는 .menu-items이 전체에 걸쳐 펼쳐질 헤더 메뉴가 있습니다.

이러한 .menu-items 요소를 각각 다르게 배치했습니다.

의 첫 번째 메뉴 항목. 헤더은 왼쪽 상단에 있습니다. 두 번째 .menu-item이있는 경우 오른쪽 상단에 정렬됩니다. 세 번째 메뉴 항목이 있으면 두 번째 메뉴 항목이 가운데에 표시됩니다. 등등. 메뉴 항목이 많을수록 페이지의 전체 너비에 따라 "압축"됩니다. 이것은 .headermenu와 .footermenu 모두에서 작동합니다. 지금까지

.headermenu { 
    position: fixed; 
    top:0vh; 
    left:0vw; 
    width: 95vw; 
    padding-right: 5vw; 
} 

.headermenu ul { 
    justify-content: space-between; 
    display: flex; 
} 

.footermenu { 
    bottom:0vh; 
    left:0vw; 
    position: fixed; 
    width: 95vw; 
    padding-right: 5vw; 
} 

.footermenu ul { 
    justify-content: space-between; 
    display: flex; 
} 

너무 좋은 : 은 내가 .menu-항목 위치를 이러한 CSS 규칙을 사용했다. 내 문제는 내가 페이지에서 부모 위치에 따라 자녀 요소의 스타일을 지정하려는 것입니다. 미래의 사용자가 추가 할 메뉴 항목의 수 (1, 2, 3, 4 또는 그 이상의 "메뉴 항목")를 모르기 때문에 CSS로 이것을 수행하는 것은 불가능하다고 생각합니다.

나는 나의 .SUB 메뉴 항목을 표시하는 규칙이 스케치 세트를 썼다 :

.menu-item > ul.sub-menu { 
    padding: 1vh; 
    text-align: center; 
    flex-direction: column; 
    visibility: hidden; 
    opacity: 0; 
    transition: 0.5s ease-out; 
} 

.menu-item:hover > ul.sub-menu { 
    visibility: visible; 
    opacity: 1; 
} 

규칙 세트를 중심으로 .SUB 메뉴 항목을 정렬되지만, 텍스트 경우 예상보다 길다면, 부모는 자연스럽게 넓어 져서 "가장 큰 아이"를위한 공간을 허용 할 것입니다. 그래서 지금은 최고의 옵션에 믿고 :

• 항상의 첫 번째 .menu 항목에서 아이들을 맞 춥니 다 왼쪽 상단 왼쪽에;
• , 3 .menu-항목이 경우 권리
• 에 오른쪽 상단에있는 마지막 .menu 항목에서 아이들을 정렬 오른쪽으로 마지막 .menu 항목에서 아이들을 정렬하고 두 번째 메뉴 항목의 하위 항목은 입니다.
• 4 개의 메뉴 항목이있는 경우 마지막으로 .menu-item의 하위 항목과 가운데에있는 .menu-item의 하위 항목을 가운데에 정렬하십시오. 이 제는 #header 구조입니다

반복 지점 3의 논리) 및 4) ... :

<div id="footer"> 
    <h1> 
     <div class="footermenu"> 
      <ul id="menu-footer-menu" class="menu"> 
       <li class="menu-item"><a href="url_4">Contact</a></li> 
       <li class="menu-item"><a href="url_5">Links</a></li> 
       <li class="menu-item"><a href="url_6">About</a> 
        <ul class="sub-menu"> 
         <li class="menu-item"><a href="url_6_a">More Landscapes</a></li> 
         <li class="menu-item"><a href="url_6_b">Collection</a></li> 
         <li class="menu-item"><a href="url_6_c">Brave New</a></li> 
         <li class="menu-item"><a href="url_6_d">Line Three</a></li> 
         <li class="menu-item"><a href="url_6_e">Mary's World</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </h1> 
</div><!-- end of #footer --> 

I :

<div id="header"> 
    <h1> 
     <div class="headermenu"> 
      <ul class="menu"> 
       <li class="menu-item"><a href="url_1">News</a></li> 
       <li class="menu-item"><a href="url_2">Portfolio</a> 
        <ul class="sub-menu"> 
         <li class="menu-item"><a href="url_2_a">Alternative Landscapes</a></li> 
         <li class="menu-item"><a href="url_2_b">Collection</a></li> 
         <li class="menu-item"><a href="url_2_c">Brave</a></li> 
         <li class="menu-item"><a href="url_2_d">Abstract Posters</a></li> 
         <li class="menu-item"><a href="url_2_e">Pedro, O Mau</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </h1> 
</div> <!-- end of header --> 

이 내 글의 구조 솔루션은 자바 스크립트 루프와 다소 관련이 있어야한다고 생각합니다.이 루프는 메뉴에 몇 개의 아이템이 있고 다른 경우에 속성 ID가 있는지 확인합니다. 내 자바 스크립트는 루디 멘털하지만 나는 논리 뭔가처럼되고있다 감지 해요 :

(this is not any type of code) 
a) count menu-items 
b) if 1 menu-item > id#left 
c) if 2 menu-items > id#left to menu 1 > id#right to menu 2 
d) if 3 menu-items > id#left to menu 1 > id#center to menu 2 > id#right to menu 3 
e) if 4 menu-items > id#left to menu 1 > id#center to menu 2 and 3 > id#right to menu 4 
f) if 5 menu-items > id#left to menu 1 > id#center to menu 2, 3 & 4 > id#right to menu 5... 

당신이 내가 적어도 자바 스크립트에서이 같이 분석 시작할 수있는 방법을 알아?

감사합니다.

Answer 1

CSS 의사 요소 인 :not() :first-child and :last-child을 사용하여 원하는 것을 수행 할 수 있다고 생각합니다. 코드를 사용하여 샘플을 만들었습니다. 이것은 당신이 찾고있는 것입니까? .menu-항목에서

http://codepen.io/Nasir_T/pen/pEBpRw?editors=1100

Answer 2

모든 어린이는 중앙에 정렬 된 상태로 유지됩니다. 그러나 첫 번째 메뉴 아이템 아이는 왼쪽에 정렬되고 마지막 메뉴 아이템 아이는 오른쪽에 정렬됩니다.

편집 :

이제는 더 좋을 것 같습니다. 이전 코드에서 작은 실수가 있었고 몇 줄을 추가했습니다. 0과 마지막 자식 .menu 항목의 아이는 권리입니다 : 첫째 .menu 항목 아이 (ul.sub 메뉴)의 위치는 남아이 큰 나시 0입니다

.headermenu { 
 
    position: fixed; 
 
    top:0vh; 
 
    left:0vh; 
 
    width: 95%; 
 
    padding-right: 5vw; 
 
} 
 

 
.headermenu ul { 
 
    justify-content: space-between; 
 
    display: flex; 
 
    list-style: none; 
 
} 
 

 
ul.menu > .menu-item { 
 
    position: relative; 
 
} 
 

 
.headermenu ul.sub-menu { 
 
    position: absolute; 
 
    top: 70px; 
 
} 
 

 
.headermenu ul .menu-item:first-child ul.sub-menu { 
 
    left: 0; 
 
} 
 

 
.headermenu ul .menu-item:last-child ul.sub-menu { 
 
    right: 0; 
 
} 
 

 

 
.menu-item > ul.sub-menu { 
 
    padding: 1vh; 
 
    text-align: center; 
 
    flex-direction: column; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: 0.5s ease-out; 
 
} 
 

 
.headermenu ul .menu-item:first-child .sub-menu li { 
 
    text-align: left; 
 
} 
 

 
.headermenu ul .menu-item:last-child .sub-menu li { 
 
    text-align: right; 
 
} 
 

 
.menu-item:hover > ul.sub-menu { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<body> 
 
<div id="header"> 
 
    <h1> 
 
     <div class="headermenu"> 
 
      <ul class="menu"> 
 
       <li class="menu-item"><a href="url_1">News</a> 
 
\t \t \t \t \t <ul class="sub-menu"> 
 
         <li class="menu-item"><a href="url_2_a">Great News!</a></li> 
 
         <li class="menu-item"><a href="url_2_b">News2</a></li> 
 
         <li class="menu-item"><a href="url_2_c">News3</a></li> 
 
         <li class="menu-item"><a href="url_2_d">News4</a></li> 
 
         <li class="menu-item"><a href="url_2_e">Very Last News</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="menu-item"><a href="url_1">Contact</a> 
 
       \t \t <ul class="sub-menu"> 
 
         <li class="menu-item"><a href="url_2_a">AAAAA</a></li> 
 
         <li class="menu-item"><a href="url_2_b">BBB</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="menu-item"><a href="url_2">Portfolio</a> 
 
        <ul class="sub-menu"> 
 
         <li class="menu-item"><a href="url_2_a">Alternative Landscapes</a></li> 
 
         <li class="menu-item"><a href="url_2_b">Collection</a></li> 
 
         <li class="menu-item"><a href="url_2_c">Brave</a></li> 
 
         <li class="menu-item"><a href="url_2_d">Abstract Posters</a></li> 
 
         <li class="menu-item"><a href="url_2_e">Pedro, O Mau</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </h1> 
 
</div> 
 
</body> 
 
</html>