CSS Repsonsive How do I make sub-menus a dropdown?

Question

If you view twoguysplayingzelda.com on a mobile device, you will notice that my sub-menus are displayed. This makes the menu way too long. I would like to hide these and make them a dropdown (with a "+" symbol showing there is a dropdown). So you would click on games, then click on which game you wanted, and then see the options for each game. I just can't figure this one out. My CSS is below. Thanks for your help!

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

}

DarkyTheOdd · Answer 1 · 2017-09-28T18:49:27.623

You could try jQuery mobile collapsible menus: http://demos.jquerymobile.com/1.4.0/collapsible/

I've also found a css-based solution here that might work for you: Pure CSS collapse/expand div.

Otherwise, if you want to go with the jquery mobile route, make sure the <head> tag in your html file looks something like this:

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

These urls in script and link will allow you to pull the jQuery mobile code automatically without you needing to download any files/code and add them to your project explicitly. Then, within your body tag, add a div to wrap around the entire page, like this:

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

Then, you can add collapsible lists to your page, within that data-role = "page" div, like so:

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

Great tutorials you can look at for jQuery mobile: https://www.tutorialspoint.com/jquery_mobile/jquery_mobile_setup.htm http://demos.jquerymobile.com/1.4.0/collapsible/#&ui-state=dialog

It's just a hobby, not a class assignment or learning experiment. I am a little confused though. I haven't worked at all with jQuery. Are you saying on each page that I want to collapse on the mobile menu, I need to add — Two Guys Playing Zelda, Sep 28 '17 at 14:53

CSS Repsonsive How do I make sub-menus a dropdown?

1 Answers1