응답 메뉴에서 좌우로 2 개의 메뉴 결합하기

Question

웹 사이트를 구축 할 것입니다. 기본 메뉴에는 좌우 2 개의 메뉴와 로고가 있지만,이 메뉴들을 어떻게 조합 할 수 있습니까? 하나는 반응 형이다. 당신이 예제 코드를 줄 수 있기를 바랍니다.

내 나쁜 영어 죄송합니다. 미리 감사드립니다.

Answer 1

가장 좋은 방법은 모든 메뉴를 미리 프로그래밍하는 것입니다. 두 개의 개별 메뉴는 처음에는 데스크톱 화면에 표시되지만 CSS에는 display:none이라는 결합 된 메뉴가 있습니다. 그런 다음 반응 형 미디어 쿼리에서 작은 화면 크기에서 결합 된 메뉴를 display:block으로 설정하고 다른 두 세트의 메뉴를 display:none으로 설정합니다.

당신은 HTML과 CSS를 표시하지 않습니다.이 게시물 이후에 더 명확하게하기 위해 질문에 추가하면 좋을 것이므로 원하는 것을 볼 수 있습니다. 그래서 잘 모르겠습니다. 어떻게 메뉴를하고 있는지. 그러나이 개념을 설명하기 위해 두 개의 div에 아주 간단한 의사 HTML을 보여줄 것입니다.

<!-- this is pseudo-markup only! --> 
<div id="menu-large-screen">Home Menu       Features Contact</div> 
<div id="menu-small-screen">Home Menu Features Contact</div> 

을 그리고 당신의 반응 CSS는 다음과 같습니다 : 당신은 그들 내부에 메뉴 마크 업을 넣어

#menu-large-screen { display: block; } 
#menu-small-screen { display: none; } 

@media all and (max-width: 600px) /* 600px is just for an example */ 
{ 
    #menu-large-screen { display: none; } 
    #menu-small-screen { display: block; } 
} 

두 된 div는 HTML 마크 업의 다른 후 하나가 될 것입니다. 단 하나만 표시됩니다. 즉, 이 아닌 표시 : 해당 시점의 특정 화면 크기에 대한 아무 것도 표시되지 않습니다. 다른 하나는 보이지 않으며 화면에 아무 공간도 차지하지 않습니다.