Question

如果您在移动设备上查看twoguysplayingzelda.com，您会注意到我的子菜单已显示。这使菜单方式太长。我想隐藏这些并将它们作为下拉列表（使用＆＃34; +＆＃34;符号显示有下拉列表）。因此，您可以点击游戏，然后点击您想要的游戏，然后查看每个游戏的选项。我无法想象这一个。我的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%; }    

}

Answer 1

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

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

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

<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中的这些网址将允许您自动提取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

CSS Repsonsive如何将子菜单设为下拉菜单？

1 个答案: