如何实现顶部菜单和左侧菜单

Question

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.如果我们打开Left Side Menu，我们想解决覆盖顶部菜单的问题，所以请给我们一些建议。

index.html code 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/ionicons@5.2.3/dist/ionicons.js"></script>
    <!-- JS -->
    <script src="assets/js/main.js"></script>
</body>
</html>

left_sidemenu.css code 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 code 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 code 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/noonfonts_twelve@1.1/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;
}

Screenshot 1截图一

Screenshot 2截图2

Answer 1

This is happening bcs you've added padding to the top_menu item.发生这种情况是因为您已将填充添加到 top_menu 项。 It can be fixed by reducing the padding you've given in the top_menu.css file like so:它可以通过减少你在 top_menu.css 文件中给出的填充来修复，如下所示：

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.至于覆盖 header 的导航栏一旦展开。 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:我会像这样更改 left_sidemenu.css 文件：

/* 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.我可以建议的另一种选择是更改 z-index，以便导航栏位于 header 后面。

如何实现顶部菜单和左侧菜单

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-11-22 05:31:01

如何实现顶部菜单和左侧菜单

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-11-22 05:31:01

解决方案1
0 已采纳 2022-11-22 05:31:01