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ベースのソリューションを見つけました。

あなたはjqueryの携帯ルートに行きたい場合はそうでない場合は、あなたのhtmlファイル内<head>タグは次のようになりますことを確認してください：scriptとlinkで

<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は、あなたが引くことができますファイル/コードをダウンロードして明示的にプロジェクトに追加する必要はありません。次に、あなたのbodyタグ内で、このように、ページ全体を包み込むようにdiv要素を追加します。

<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どのようにしてサブメニューにドロップダウンを作成できますか？

答えて

関連する問題