Navigation / Dot

Description of component:

ClickUp Ticket

Component Example

Code Snippets

HTML

CSS

                
                    .nav-dot {
                        
                        .menu-checkbox,
                        .menu {
                            display: none;
                        }
                        
                        .menu-toggle {
                            
                            &:focus {
                                outline: 2px solid;
                            }
                            
                            >span {
                                display: block;
                                width: 3rem;
                                height: 3rem;
                                position: relative;
                                
                                >span {
                                    display: block;
                                    width: 0.75rem;
                                    height: 0.75rem;
                                    border-radius: 50%;;
                                    background-color: black;
                                    position: absolute;
                                    transition: 0.35s ease all;
                                    
                                    &:first-of-type {
                                        top: 0;
                                        left: 50%;
                                        transform: translateX(-50%);
                                    }
                                    
                                    &:nth-of-type(2) {
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                    }
                                    
                                    &:last-of-type {
                                        top: 100%;
                                        left: 50%;
                                        transform: translate(-50%, -100%);
                                    }
                                }
                            }
                            
                            &[aria-expanded="true"] {
                                >span {
                                    >span {
                                        &:first-of-type, &:last-of-type {
                                            top: 50%;
                                            left: 50%;
                                            transform: translate(-50%, -50%);
                                        }
                                        
                                        &:nth-of-type(2) {
                                            top: 50%;
                                            left: 50%;
                                            transform: translate(-50%, -50%);
                                            width: 100%;
                                            border-radius: 0;
                                        }
                                    }
                                }
                            }
                        }
                        
                        .menu a {
                            display: block;
                        }
                        
                        .menu-checkbox:checked + .menu {
                            display: block;
                        }
                        
                        .menu.active {
                            display: block;
                        }
                    }
                
            

JS

                
                    var menuToggle = document.querySelector("#menu-toggle");
                    var menu = document.querySelector("#menu");
                    
                    menuToggle.addEventListener("click", function(event) {
                        var menuOpen = menu.classList.contains("active");
                        var newMenuOpenStatus = !menuOpen;
                        
                        menuToggle.setAttribute("aria-expanded", newMenuOpenStatus);
                        menu.classList.toggle("active");
                    });
                
            

Credits

This example is based off of the tutorial: Making an Accessible Hamburger Menu by Ashley Sheridan posted on 15th February, 2020.