html - Dropdown unordered list for mobile view

Question

i've never made a website before so i'm kind of winging it. i'm using html+css+java and i haven't had a problem until now and i'm kind of stumped.

i have this menu for my desktop view (http://puu.sh/H6daI/f9c757571f.png) which functions exactly as i want it to. however in mobile view (http://puu.sh/H6dba/27b97bc952.png), i'd like everything under "categories" to collapse and use the pointer to expand the contents.

i don't really know how to go about this and i'm not finding much help online. i'd imagine i'd have to incorporate javascript like i did for the sidebar nav in mobile view, but it's not coming together.

here's my html and css, if that helps any

<div class="sidemenu">
    <ul>
        <li class="init" > <embed src="images/pointer.svg" style="width: 100%;" ></embed></li>
        <li><a  style="font-weight: 500; pointer-events:none; font-size: 16px">Categories</a></li>
        <span class="line"></span>
        <li><a  href="shop.html" >All Sets</a></li>
        <li><a  href="featured.html" >Featured Sets</a></li>
        <li><a  href="popular.html" >Popular Sets</a></li>
        
       </li>
    </ul>
</div>

.init {
    width: 2.5%;
   
}

  .sidemenu ul li.active a, .sidemenu ul li a:hover {
    text-decoration:none;
    color:rgb(82, 82, 82);
    background:#ffcccc no-repeat center top;
}

  .sidemenu a {
    text-decoration:none;
    color:rgb(0, 0, 0);
    margin: 48px;
    line-height: 48px;
    font-weight: 400;
    cursor: pointer;
    font-size: 14px;
}

@media only screen and (min-width: 950px) {

.line {
        border-bottom: 1.5px solid rgb(58, 58, 58);
        display: block;
        
        width: 140px;
        margin-left: 46px;
        margin-bottom: 12px;
    }

    .sidemenu a {
        text-decoration:none;
        color:rgb(0, 0, 0);
        margin: 48px;
        line-height: 48px;
        font-weight: 400;
        cursor: pointer;
    }
}

Answer 1

you can add the "display: none" property to everything that you'd like to collapse in the css media query. i recommend putting the menu list in a div tag. That way you'll only have to hide the div tag.

Then in javascript you can use the click event on the Categories. When a user clicks the categories, "display: block" property gets added to to the menu list.

Heres some javascript that you can use:

// First get the categories element from html
const categories = document.getElementById('categories');

// Keep track if the menu is opened or not
let menuOpen = false;

// Also get the menu list that you should put in a div tag
const menuList = document.getElementById('menuList');

// Add event to th categories
categories.addEventListener('click', () => {
    // check is the menu is open or not

    if(!menuOpen) {
        // Its not opened than add display block to menu list
        menuList.style.display = 'block'

        // Change menuOpen to true
        menuOpen = true

    } else {
        // Menu is already open

        menuList.style.display = 'none'

        // Change menuOpen to false
        menuOpen = false
    }

});

I assume that you want to add some transitions to the menu list to make it look nice. I recommend using the transition css property.