WordPress : 동적 메뉴 조건부

Question

헤더의 로고 오른쪽에 메뉴가 떠있는 WordPress 사이트가 있습니다. 로고는 너비의 약 25 %를 차지하고 나머지 75 %는 7 개의 메뉴 옵션을 보유합니다. 여덟 번째 메뉴 옵션이 추가되면 사용 가능한 공간을 초과하고 전체 메뉴가 기본적으로 로고 아래로 이동합니다. 나는 당신들 중 많은 사람들이 이런 종류의 메뉴 응답에 익숙하다고 확신합니다.

로고가 메뉴 아래로 떨어지면 특정 스타일 세트를 구현할 수 있기를 바랍니다. 즉, 이것은 브라우저 크기를 기반으로하는 것이 아니라 클라이언트가 결국 사이트에 추가 할 수있는 메뉴의 수를 기반으로합니다. 누구든지이 구문을 구현하는 적절한 구문이나 방법을 알고 있습니까? 사전에

감사합니다! 나는 당신을 내기

Answer 1

작년 flex 속성의 새로운 업데이트 버전을 릴리스했습니다. 이것은 mo에서 작동합니다. st 브라우저, 그리고 IE10. 인라인 블록을 표시하는 것과 비슷하지만 너비를 보간하고 응답하는 인라인 요소에 유연성을 부여합니다.

여기에 그 기능에 대한 전체 설명이 나와 있습니다. http://css-tricks.com/snippets/css/a-guide-to-flexbox/

체크 아웃

http://jsfiddle.net/yznby99f/3/

은 본질적으로 당신이 당신이 표시 인라인을보고 싶어 무엇이든의 부모에 이러한 표시 속성을 넣어 것이 바이올린.

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -ms-flexbox;/* TWEENER - IE 10 */ 
display: -webkit-flex;/* NEW - Chrome */ 
display: -moz-box; /* MOZILLA */ 
display: flex; /* standard syntax */ 

Answer 2

는

당신이보기

#logo{ 
    width:40%; 
    background:green;  
    height:20px; 
    float:left; 
} 
#menu{ 
    min-width:60%; 
    background:blue;  
    height:20px; 
    display:inline-block; 
} 

을 시도 할 수 있습니다이

LOGOMenu

같은 것이

왼쪽 떠있는 경우 4 월에 결과 ...

Answer 3

이전의 바이올린 예제를 사용하여 문제를 해결할 수있는 작은 스 니펫을 추가했습니다. CSS3가 출시되었을 때

http://jsfiddle.net/yznby99f/4/

반응 형 웹 디자인에 큰 키를 사용할 수 있었다. 즉 미디어 쿼리라고합니다.

@media all and (max-width: 699px){ 

    /* Put any styles here */ 

} 

이 화면 크기는 699px 이하 때 자신의 제약 조건 내에서 어떤 스타일을 실행하는 것을 의미합니다

http://www.w3schools.com/css/css_mediatypes.asp

.

응답 설계에서 문서의 "뷰포트 태그"를 추가하는 것이 중요합니다.태블릿과 스마트 폰 :

@media all and (max-width: 699px) and (min-width: 500px){ 

    /* Put any styles here */ 

} 

: 스타일 2 픽셀 폭 사이에 일어날 때

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

당신은 또한 설정할 수 있습니다이 읽을 수있는 브라우저 사용자 IE의 장치 폭을 수 있습니다

바이올린의 반응을 테스트하려면 브라우저의 오른쪽을 왼쪽으로 드래그하여 너비를 줄이십시오.