How to implement the Top Menu and Left Side Menu-CodePudding

You want to implement the Top Menu and Left Side Menu.

The top menu is fixed to the top.

I want to implement the Left Side Menu so that it can be seen right below the Top Menu, but it is not going well.

If we open the Left Side Menu, we would like to solve the problem of covering the top menu, so please give us some advice.

index.html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS Link -->
    <link rel="stylesheet" href="assets/css/left_sidemenu.css">
    <link rel="stylesheet" href="assets/css/top_menu.css">

    <!---Fontawsome CDN Link---->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">

    <!----Jquery CDN Link---->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>


    <title>SideBar sub menus</title>
</head>
<body id="body-pd">
    
    <!-- top_menu -->
    <nav >
        <!-- logo_link -->
        <div >
          <i ></i>
          <a href="">Project</a>
        </div>

        
        <!-- menu_link -->
        <ul >
          <li><a href="#">Login</a></li>
          <li><a href="#">Sign</a></li>
        </ul>
    </nav>
    <!-- top_menu -->


    <!-- left_sidemenu -->
    <div  id="navbar">
        <nav >
            <div>
                <div >
                    <ion-icon name="menu-outline"  id="nav-toggle"></ion-icon>
                    <a href="#" >Bedimcode</a>
                </div>
                <div >
                    <a href="#" >
                        <ion-icon name="home-outline" ></ion-icon>
                        <span >Dashboard</span>
                    </a>
                    <a href="#" >
                        <ion-icon name="chatbubbles-outline" ></ion-icon>
                        <span >Messenger</span>
                    </a>

                    <div href="#" >
                        <ion-icon name="folder-outline" ></ion-icon>
                        <span >Projects</span>

                        <ion-icon name="chevron-down-outline" ></ion-icon>

                        <ul >
                            <a href="#" >Data</a>
                            <a href="#" >Group</a>
                            <a href="#" >Members</a>
                        </ul>
                    </div>

                    <a href="#" >
                        <ion-icon name="pie-chart-outline" ></ion-icon>
                        <span >Analytics</span>
                    </a>

                    <div href="#" >
                        <ion-icon name="people-outline" ></ion-icon>
                        <span >Team</span>

                        <ion-icon name="chevron-down-outline" ></ion-icon>

                        <ul >
                            <a href="#" >Data</a>
                            <a href="#" >Group</a>
                            <a href="#" >Members</a>
                        </ul>
                    </div>

                    <a href="#" >
                        <ion-icon name="settings-outline" ></ion-icon>
                        <span >Settings</span>
                    </a>
                </div>
                <a href="#" >
                    <ion-icon name="log-out-outline" ></ion-icon>
                    <span >Log out</span>
                </a>
            </div>
        </nav>
    </div>
    <!-- left_sidemenu -->

    <h1>Componentes</h1>
    <!-- IONICONS -->
    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
    <!-- JS -->
    <script src="assets/js/main.js"></script>
</body>
</html>

left_sidemenu.css code

/* left_sidemenu.css */

/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

/* VARIABLES CSS */
:root {
    --nav--width: 92px;

    /* Colores */
    --first-color: #0c5df4;
    --bg-color: #12192c;
    --sub-color: #b6cefc;
    --white-color: #fff;

    /* Fuente y tipografia */
    --body-font: 'Poppins', sans-serif;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;

    /* z index */
    --z-fixed: 100;
}

/* BASE */
*, ::before, ::after {
    box-sizing: border-box;
}

body {
    position: relative;
    margin: 0;
    padding: 2rem 0 0 6.75rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: .5s;
}

h1 {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

/* l NAV */
.l-navbar {
    position: fixed;
    /* top: 0; */
    left: 0;
    width: var(--nav--width);
    height: 100vh;
    background-color: var(--bg-color);
    color: var(--white-color);
    padding: 1.5rem 1.5rem 2rem;
    transition: .5s;
    z-index: var(--z-fixed);
}

/* NAV */
.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.nav__brand {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.nav__toggle {
    font-size: 1.25rem;
    padding: .75rem;
    cursor: pointer;
}

.nav__logo {
    color: var(--white-color);
    font-weight: 600;
}

.nav__link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: .75rem;
    padding: .75rem;
    color: var(--white-color);
    border-radius: .5rem;
    margin-bottom: 1rem;
    transition: .3s;
    cursor: pointer;
}

.nav__link:hover {
    background-color: var(--first-color);
}

.nav__icon {
    font-size: 1.25rem;
}

.nav_name {
    font-size: var(--small-font-size);
}

/* Expander menu */
/* width: calc(var(--nav--width)   9.25rem); */
.expander {
    width: calc(var(--nav--width)   12rem);
}

/* Add padding body*/
.body-pd {
    padding: 2rem 0 0 16rem;
}

/* Active links menu */
.active {
    background-color: var(--first-color);
}

/* COLLAPSE */
.collapse {
    grid-template-columns: 20px max-content 1fr;
}

.collapse__link {
    justify-self: flex-end;
    transition: .5;
}

.collapse__menu {
    display: none;
    
    padding: .75rem 2.25rem;
    
    /*
    padding: 0px;
    margin: 0px;
    overflow: auto;
    position: fixed;
    */
}

.collapse__sublink {
    color: var(--sub-color);
    font-size: var(--small-font-size);
}

.collapse__sublink:hover {
    color: var(--white-color);
}

/* Show collapse */
.showCollapse {
    display: block;
}

/* Rotate icon */
.rotate {
    transform: rotate(180deg);
    transition: .5s;
}

left_sidemenu.js code

/* left_sidemenu.js */

/* EXPANDER MENU */
const showMenu = (toggleId, navbarId, bodyId) => {
    const toggle = document.getElementById(toggleId),
    navbar = document.getElementById(navbarId),
    bodypadding = document.getElementById(bodyId)

    if( toggle && navbar ) {
        toggle.addEventListener('click', ()=>{
            navbar.classList.toggle('expander');

            bodypadding.classList.toggle('body-pd')
        })
    }
}

showMenu('nav-toggle', 'navbar', 'body-pd')

/* LINK ACTIVE */
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
    linkColor.forEach(l=> l.classList.remove('active'))
    this.classList.add('active')
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))

/* COLLAPSE MENU */
const linkCollapse = document.getElementsByClassName('collapse__link')
var i

for(i=0;i<linkCollapse.length;i  ) {
    linkCollapse[i].addEventListener('click', function(){
        const collapseMenu = this.nextElementSibling
        collapseMenu.classList.toggle('showCollapse')

        const rotate = collapseMenu.previousElementSibling
        rotate.classList.toggle('rotate')
    });
}

top_menu.css code

/* top_menu.css */

:root {
  --text-color: #f0f4f5;
  --background-color: #12192c;
  --accent-color: orange;
  --icons-color: rgb(152, 187, 201);
  --bodybackground-color: rgb(255, 255, 255);
}

body { 
  margin: 0;
  background-color: var(--bodybackground-color);
  font-family: 'STIX Two Math';
  padding-top: 75px;
}

a {
  font-size: 20px;
  text-decoration: none;
  color: var(--text-color);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-color);
  padding: 8px 12px;
  font-family: 'STIX Two Math';
  position: fixed;
  /* width: 100% */
  top: 0;
  left: 0;
  right: 0;
}

.navbar__logo i {
  color: var(--accent-color);
  padding-left: 0;
}

.navbar__menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding-left: 0;
}

.navbar__menu li {
  padding: 8px 30px;
}



.navbar__menu li:hover {
  background-color: var(--accent-color);
  border-radius: 3px;
}

@media screen and (max-width: 700px) {

}

@font-face {
  font-family: 'Cafe24Oneprettynight';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Cafe24Oneprettynight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 100vw;
  height: 100vh;
  font: normal 1rem/1.5rem 'Cafe24Oneprettynight', serif;
  background: url('https://images.unsplash.com/photo-1505312926838-645f295a20e1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1234&q=80')no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  padding: 50px;
  background: rgba(0, 0, 0, .4);
}
p {
  color: #aaa;
  margin-bottom: 10px;
}
p:hover {
  color: #fff
}

p:hover {
  width: 100%;
  transition: width .3s;
}

Screenshot 1

Screenshot 2

CodePudding user response：

This is happening bcs you've added padding to the top_menu item. It can be fixed by reducing the padding you've given in the top_menu.css file like so:

body { 
    margin: 0;
    background-color: var(--bodybackground-color);
    font-family: 'STIX Two Math';
    padding-top: 45px;
}

As for the nav bar covering the header once expanded. The reason it is happening is because you're adding padding to the existing element. I would change the left_sidemenu.css file like so:

/* Add padding body*/
.body-pd {
    /* padding: rem 0 0 16rem; */
}

Either that or you can simply not add top padding so that the nav bar only expands to the side. One other option I could suggest instead, is to change the z-index so that the nav bar comes behind the header.