중간에 이미지가있는 WordPress 메뉴

중간에 이미지가있는 메뉴를 만들려고합니다. 예를 들어 이미지의 오른쪽에있는 세 개의 왼쪽에있는 & 링크는 각 하위 항목에 모든 하위 페이지를 나열해야합니다.중간에 이미지가있는 WordPress 메뉴

상위 수준 메뉴 항목은 CMS에 입력 된 내용을 기반으로 텍스트를 동적으로 업데이트해야하지만 사용자가 메뉴에서 항목을 재정렬하거나 항목에 추가/제거 할 필요가 없습니다.

위의 작업을 수행하는 가장 좋은 방법은 무엇입니까? 내 생각에 모든 페이지 &을 사용하여 get_permalink()를 사용하여 변경된 URL을 가져와야했지만 위의 모든 요구 사항을 고려하지는 않았습니다.

2016-07-25 Neil Nand

여기에 원하는 답변이 있습니다. 자세한 내용은 링크를 따르십시오

아래 예제 로고는 ul 클래스 외부에 있지만 다음 li 클래스 사이에 로고를 설정할 수도 있습니다. 그래서 메뉴의 중간에 로고.

HTML

<div id="header"> 
    <a class="logo" href="index.html"><img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" /></a> 
    <ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="index.html">Stats</a></li> 
    <li><a href="index.html">Schedule</a></li> 
    <li><a href="index.html">Store</a></li> 
    <li><a href="index.html">Gallery</a></li> 
    <li><a href="index.html">Roster</a></li> 
    </ul> 
</div><!--end header-->

CSS

body { 
    font-family: Helvetica, Arial, Century; 
    font-size: 12px; 
    margin: 0; 
    background: url('images/bluebg.jpg') repeat-x top center; 
} 


#header { 
    background-color: #ffd727; 
    height: 40px; 
    position: relative; 
    margin: 150px auto 0; 
} 


#header ul { 
    margin: 0 auto; 
    width: 800px; 
    padding: 0; 
    list-style: none; 
} 

#header ul li { 
    float: left; 
    width: 97px; 
} 

#header ul li:nth-of-type(4) { 
    margin-left: 217px; 
} 

#header ul li a { 
    text-transform: uppercase; 
    text-decoration: none; 
    display: block; 
    text-align: center; 
    padding: 12px 0 0 0; 
    height: 28px; 
} 

#header ul li a:hover { 
    background: rgb(235,200,35); 
} 

.logo { 
    position: absolute; 
    left: 50%; 
    margin: -48px 0 0 -108px; 
} 


@media screen and (max-width: 800px) { 
    .logo { 
    bottom: 100%; 
    } 

    #header ul li:nth-of-type(4) { 
    margin-left: 0; 
    } 

    #header ul { 
    width: 600px; 
    position: relative; 
    } 
}

JS는 경우 -이 링크

http://codepen.io/wolfcry911/pen/HyLdg

,369 아래 참조

방법 2도 좌우 다른 menu..but 방법 (1)와 함께 할 수

는 WP

http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar

에 가장 적합

출처

2016-07-25 04:53:29

중간에 이미지가있는 WordPress 메뉴

답변

관련 문제