CSS Repsonsive Comment faire des sous-menus une liste déroulante?

Si vous affichez twoguysplayingzelda.com sur un appareil mobile, vous remarquerez que mes sous-menus sont affichés. Cela rend le menu trop long. Je voudrais les cacher et en faire une liste déroulante (avec un symbole "+" montrant qu'il y a une liste déroulante). Donc, vous cliqueriez sur les jeux, puis cliquez sur le jeu que vous vouliez, puis voir les options pour chaque jeu. Je ne peux pas comprendre ça. Mon CSS est ci-dessous. Merci de votre aide!CSS Repsonsive Comment faire des sous-menus une liste déroulante?

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

}

Source

2017-09-27 Two Guys Playing Zelda

Vous pouvez essayer des menus pliables jQuery mobile: http://demos.jquerymobile.com/1.4.0/collapsible/

J'ai aussi trouvé une solution ici-css qui pourrait fonctionner pour vous: Pure CSS collapse/expand div.

Sinon, si vous voulez aller avec la route mobile jquery, assurez-vous que la balise <head> dans votre fichier html ressemble à quelque chose comme ceci:

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

Ces urls script et link vous permettra de tirer le jQuery code mobile automatiquement sans que vous ayez besoin de télécharger des fichiers/code et les ajouter à votre projet explicitement. Ensuite, dans votre balise body, ajoutez un div à enrouler autour de la page entière, comme ceci:

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

Ensuite, vous pouvez ajouter des listes réductibles à votre page, dans ce data-role = "page"div, comme ceci:

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

tutoriels grands que vous pouvez regarder pour jQuery mobile: https://www.tutorialspoint.com/jquery_mobile/jquery_mobile_setup.htm http://demos.jquerymobile.com/1.4.0/collapsible/#&ui-state=dialog

Source

2017-09-27 19:51:35 DarkyTheOdd

Il est juste un passe-temps, pas un devoir de classe ou de l'expérience d'apprentissage. Je suis un peu confus cependant. Je n'ai pas travaillé du tout avec jQuery. Voulez-vous dire sur chaque page que je veux réduire sur le menu mobile, je dois ajouter

@TwoGuysPlayingZelda s'il vous plaît voir ma réponse mise à jour – DarkyTheOdd

CSS Repsonsive Comment faire des sous-menus une liste déroulante?

Répondre

Questions connexes