CSS Responsive 如何使子菜单成为下拉菜单？答案

【问题标题】：CSS Repsonsive How do I make sub-menus a dropdown?CSS Responsive 如何使子菜单成为下拉菜单？
【发布时间】：2017-09-29 02:49:27
【问题描述】：

如果您在移动设备上查看 twoguysplayingzelda.com，您会注意到显示了我的子菜单。这使得菜单太长了。我想隐藏这些并使它们成为下拉列表（带有“+”符号表示存在下拉列表）。所以你会点击游戏，然后点击你想要的游戏，然后查看每个游戏的选项。我就是想不通这个。我的 CSS 在下面。感谢您的帮助！

@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%; }    

}

【问题讨论】：

标签： css responsive submenu

【解决方案1】：

你可以试试 jQuery 移动折叠菜单：http://demos.jquerymobile.com/1.4.0/collapsible/

我还在这里找到了一个可能适合您的基于 css 的解决方案：Pure CSS collapse/expand div。

否则，如果您想使用 jquery 移动路由，请确保您的 html 文件中的 <head> 标签看起来像这样：

<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>

script 和 link 中的这些 url 将允许您自动提取 jQuery 移动代码，而无需下载任何文件/代码并将它们显式添加到您的项目中。然后，在您的 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 mobile 的精彩教程： https://www.tutorialspoint.com/jquery_mobile/jquery_mobile_setup.htm http://demos.jquerymobile.com/1.4.0/collapsible/#&ui-state=dialog

【讨论】：

这只是一种爱好，不是课堂作业或学习实验。我有点困惑。我根本没有使用过 jQuery。你是说在每个页面上我想在移动菜单上折叠，我需要添加