CSS Repsonsive 하위 메뉴를 드롭 다운으로 만들려면 어떻게해야합니까?

모바일 장치에서 twoguysplayingzelda.com을 볼 경우 내 하위 메뉴가 표시됩니다. 이렇게하면 메뉴가 너무 길어집니다. 나는 이것을 숨기고 그들에게 드롭 다운을 보이기를 원한다. ("+"기호는 드롭 다운을 보여준다.) 따라서 게임을 클릭 한 다음 원하는 게임을 클릭하고 각 게임의 옵션을 확인하십시오. 나는 이걸 알아낼 수 없다. 내 CSS는 아래 있습니다. 당신의 도움을 주셔서 감사합니다!CSS Repsonsive 하위 메뉴를 드롭 다운으로 만들려면 어떻게해야합니까?

@media (max-width: 1000px) { 

    /* navigation */  

    .main-menu { display: none; } 

    .search-toggle { width: 24px; } 

    .nav-toggle { 
     display: block; 
     padding: 25px 0; 
    } 

    .nav-toggle .bar { 
     display: block; 
     width: 26px; 
     height: 3px; 
     margin-top: 5px; 
     background: #8E8E8E; 
     border-radius: 1px; 
    } 

    .nav-toggle .bar:first-child { margin-top: 0; } 

    .nav-toggle:hover { cursor: pointer; } 
    .nav-toggle.active .bar { background: #fff; } 

    .mobile-menu li { border-top: 1px solid rgba(255,255,255, 0.1); } 
    .mobile-menu > li:first-child { border-top: none; } 

    .mobile-menu a {  
     display: block; 
     padding: 25px 5%; 
     font-size: 0.9em; 
     text-transform: uppercase; 
     color: #999; 
     letter-spacing: 1px; 
    } 

    .mobile-menu a:hover { color: #fff; } 

    .mobile-menu ul a { padding-left: 10%; }  
    .mobile-menu ul ul a { padding-left: 15%; }  
    .mobile-menu ul ul ul a { padding-left: 20%; } 
    .mobile-menu ul ul ul ul a { padding-left: 25%; } 
    .mobile-menu ul ul ul ul ul a { padding-left: 30%; }  

}

출처

2017-09-27 Two Guys Playing Zelda

당신은 jQuery를 모바일 접을 수있는 메뉴를 시도해 볼 수도 있습니다 : Pure CSS collapse/expand div : http://demos.jquerymobile.com/1.4.0/collapsible/

는 또한 당신을 위해 작동 할 수 있습니다 여기에 CSS 기반의 솔루션을 발견했습니다. script에

<head> 
    <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
    <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head>

이 URL과 link 당신이 당겨 할 수 있습니다 : 당신이 JQuery와 이동 경로와 이동하려는 경우

그렇지 않으면, 당신의 html 파일에서 확인 <head> 태그를 만들이 같이 보입니다 모든 파일/코드를 다운로드하고 명시 적으로 프로젝트에 추가 할 필요없이 자동으로 jQuery 모바일 코드를 사용할 수 있습니다. 그런 다음 body 태그 내에서 다음과 같이 전체 페이지의 주위에 포장 사업부를 추가

<div data-role = "page"> 
... 
</div>

을 그런 다음과 같이 그 data-role = "page"div 내 페이지에 접을 수있는 목록을 추가 할 수 있습니다

<div data-role="collapsible"> 
    <h4>Heading</h4> 
    <ul data-role="listview"> 
    <li><a href="#">List item 1</a></li> 
    <li><a href="#">List item 2</a></li> 
    <li><a href="#">List item 3</a></li> 
    </ul> 
</div>

당신의 jQuery 모바일에서 볼 수

위대한 자습서 : https://www.tutorialspoint.com/jquery_mobile/jquery_mobile_setup.htm http://demos.jquerymobile.com/1.4.0/collapsible/#&ui-state=dialog

출처

2017-09-27 19:51:35 DarkyTheOdd

그냥 취미가 아닌 클래스 할당 또는 실험을 학습합니다. 나는 조금 혼란 스럽다. 나는 jQuery로 전혀 일하지 않았다. 각 페이지에서 모바일 메뉴에서 축소하려는 경우 해당 페이지에

@TwoGuysPlayingZelda 내 업데이트 된 답변을 참조하십시오. – DarkyTheOdd

CSS Repsonsive 하위 메뉴를 드롭 다운으로 만들려면 어떻게해야합니까?

답변

관련 문제