Как реализовать верхнее меню и левое боковое меню

Вы хотите реализовать верхнее меню и левое боковое меню.

Верхнее меню фиксируется вверху.

Я хочу реализовать левое боковое меню, чтобы его можно было увидеть прямо под верхним меню, но это не очень хорошо.

Если мы откроем левое боковое меню, мы хотели бы решить проблему закрытия верхнего меню, поэтому, пожалуйста, дайте нам несколько советов.

index.html код

<!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 class = "navbar ">
        <!-- logo_link -->
        <div class = "navbar__logo">
          <i class = "fa-solid fa-laptop-code"></i>
          <a href = "">Project</a>
        </div>

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


    <!-- left_sidemenu -->
    <div class = "l-navbar" id = "navbar">
        <nav class = "nav">
            <div>
                <div class = "nav__brand">
                    <ion-icon name = "menu-outline" class = "nav__toggle" id = "nav-toggle"></ion-icon>
                    <a href = "#" class = "nav__logo">Bedimcode</a>
                </div>
                <div class = "nav__list">
                    <a href = "#" class = "nav__link active">
                        <ion-icon name = "home-outline" class = "nav__icon"></ion-icon>
                        <span class = "nav_name">Dashboard</span>
                    </a>
                    <a href = "#" class = "nav__link">
                        <ion-icon name = "chatbubbles-outline" class = "nav__icon"></ion-icon>
                        <span class = "nav_name">Messenger</span>
                    </a>

                    <div href = "#" class = "nav__link collapse">
                        <ion-icon name = "folder-outline" class = "nav__icon"></ion-icon>
                        <span class = "nav_name">Projects</span>

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

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

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

                    <div href = "#" class = "nav__link collapse">
                        <ion-icon name = "people-outline" class = "nav__icon"></ion-icon>
                        <span class = "nav_name">Team</span>

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

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

                    <a href = "#" class = "nav__link">
                        <ion-icon name = "settings-outline" class = "nav__icon"></ion-icon>
                        <span class = "nav_name">Settings</span>
                    </a>
                </div>
                <a href = "#" class = "nav__link">
                    <ion-icon name = "log-out-outline" class = "nav__icon"></ion-icon>
                    <span class = "nav_name">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 код

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

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

/* 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%3D&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;
}

Скриншот 1

Скриншот 2

javascript html css bootstrap-5

22.11.2022 06:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это происходит потому, что вы добавили отступ к элементу top_menu. Это можно исправить, уменьшив отступ, который вы указали в файле top_menu.css, например так:

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

Что касается панели навигации, покрывающей заголовок, когда-то расширенный. Причина, по которой это происходит, заключается в том, что вы добавляете дополнение к существующему элементу. Я бы изменил файл left_sidemenu.css следующим образом:

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

Либо так, либо вы можете просто не добавлять верхний отступ, чтобы панель навигации расширялась только в сторону. Вместо этого я мог бы предложить еще один вариант: изменить z-индекс так, чтобы панель навигации располагалась за заголовком.

Большое спасибо. Это было решено. У меня есть еще один вопрос. Если я решу проблему, когда верхнее меню закрывается, когда я открываю левое боковое меню, где мне его изменить?

— 22.11.2022 06:41

Так что это снова происходит, потому что вы добавляете дополнение к расширенному элементу. поэтому быстрым решением будет удаление класса .body-pd из left_sidemenu.css. Либо так, либо вы можете закомментировать css в этом блоке или просто добавить боковое дополнение. Я отредактирую ответ, чтобы включить это.

— 22.11.2022 06:57

22.11.2022 06:31