文章/答案/技术大牛

发布

社区首页 >问答首页 >刷新后，可折叠的导航条不会最小化

问刷新后，可折叠的导航条不会最小化
EN

Stack Overflow用户

提问于 2022-10-26 08:28:24

回答 2查看 35关注 0票数 0

下面的代码有以下问题。我已经尝试在我的开发中实现一个可折叠的边栏菜单。我在网上研究了很多资源，我在Youtube上的教程之后，尝试为自己定制它。但是，除了刷新页面时，折叠功能似乎还能正常工作。我研究过其他的Stackoverflow解决方案(即会话存储)，但在我的情况下无法实现它。有人能帮忙吗？

这是我的HTML页面

        let arrow = document.querySelectorAll(".arrow");
        
        for (var i = 0; i < arrow.length; i++) {
            arrow[i].addEventListener("click", (e)=>{
                
            let arrowParent = e.target.parentElement.parentElement;
            arrowParent.classList.toggle("showMenu");



            })
        }

        let sidebar = document.querySelector(".sidebar");
        let sidebarBtn = document.querySelector(".bx-menu");
        sidebarBtn.addEventListener("click" , ()=>{
            sidebar.classList.toggle("close");
        });

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed:wght@400;700&display=swap');

html {
  font-size: 100%;
} /*16px*/

:root {
  /* colors */
  --primary-50: #e0fcff;
  --primary-100: #bef8fd;
  --primary-200: #87eaf2;
  --primary-300: #54d1db;
  --primary-400: #38bec9;
  --primary-500: #2cb1bc;
  --primary-600: #14919b;
  --primary-700: #0e7c86;
  --primary-800: #0a6c74;
  --primary-900: #044e54;

  /* grey */
  --grey-50: #f0f4f8;
  --grey-100: #d9e2ec;
  --grey-200: #bcccdc;
  --grey-300: #9fb3c8;
  --grey-400: #829ab1;
  --grey-500: #627d98;
  --grey-600: #486581;
  --grey-700: #334e68;
  --grey-800: #243b53;
  --grey-900: #102a43;
  /* rest of the colors */
  --black: #222;
  --white: #fff;
  --blue: #2336e2;
  --red-light: #f8d7da;
  --red-dark: #842029;
  --green-light: #d1e7dd;
  --green-dark: #0f5132;

  /* fonts  */
  --headingFont: 'Roboto Condensed', Sans-Serif;
  --bodyFont: 'Cabin', Sans-Serif;
  --small-text: 0.875rem;
  --extra-small-text: 0.7em;
  /* rest of the vars */
  --backgroundColor: var(--grey-50);
  --textColor: var(--grey-900);
  --borderRadius: 0.25rem;
  --letterSpacing: 1px;
  --transition: 0.3s ease-in-out all;
  --max-width: 1120px;
  --fixed-width: 500px;
  --fluid-width: 90vw;
  --breakpoint-lg: 992px;
  --nav-height: 6rem;
  /* box shadow*/
  --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
  background: var(--backgroundColor);
  font-family: var(--bodyFont);
  font-weight: 400;
  line-height: 1.75;
  color: var(--textColor);
}

p {
  margin-bottom: 1.5rem;
  max-width: 40em;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  margin-bottom: 1.38rem;
  font-family: var(--headingFont);
  font-weight: 400;
  line-height: 1.3;
  text-transform: capitalize;
  letter-spacing: var(--letterSpacing);
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {
  font-size: 2.441rem;
}

h3 {
  font-size: 1.953rem;
}

h4 {
  font-size: 1.563rem;
}

h5 {
  font-size: 1.25rem;
}

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

a {
  text-decoration: none;
  letter-spacing: var(--letterSpacing);
}
a,
button {
  line-height: 1.15;
}
button:disabled {
  cursor: not-allowed;
}
ul {
  list-style-type: none;
  padding: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--white);
    height: 100%;
    width: 260px;
    z-index: 100;
    transition: var(--transition);
}

.sidebar.close {
    width: 78px;
}



.logo-details {
    width: 100px;
    height: 60px;
    display: flex;
    align-items: center;
}

.logo-details span:first-child {
    font-size: 30px;
    /* color:  #94EB58; */
    color: var(--primary-600);
    height: 50px;
    min-width: 78px;
    text-align: left;
    line-height: 50px;
}

.logo_name img {
    width: 140px;
    height: 100px;
    margin-top: 8px;
    transition: 0.3s ease;
    transition-delay: 0.1s;
}

.logo_name {
    transition-delay: 0s;
    opacity: 0;
    pointer-events: none;
}


.nav-links {
    height: 100%;
    padding-top: 30px 0 150px 0;
    overflow: auto;
}

.nav-links {
    overflow: visible;

}

.nav-links::-webkit-scrollbar{
    display: none;
}

.nav-links li {
    position: relative;
    transition: var(--transition);
}

.nav-links li:hover {
    background: var(--green-light);
}

.nav-links li span {
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
    color: var(--primary-500);
    font-size: 23px;
    cursor: pointer;
    transition: var(--transition);
}

.nav-links li.showMenu span.arrow {
    transform: rotate(-180deg);
}

.sidebar.close .nav-links span.arrow {
    display: none;
}

.link_name {
    font-size: 18px;
    font-weight: 400;
    color: var(--grey-700);
    transition: var(--transition);
}

.sidebar.close .nav-links li a .link_name{
    opacity: 0;
    pointer-events: none;
  }

.nav-links li a {
    display: flex;
    align-items: center;
}

.icon-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar .nav-links li .sub-menu {
    padding: 6px 6px 14px 80px;
    margin-top: -10px;
    background: var(--green-light);
    display: none;
}

.sidebar .nav-links li.showMenu .sub-menu{
    display: block;
}

.sidebar .nav-links li .sub-menu a {
    color: var(--primary-900);
    font-size: 15px;
    padding: 5px 0;
    white-space: nowrap;
    opacity: 0.6;
    transition: var(--transition);
}

.sidebar .nav-links li .sub-menu a:hover {
    opacity: 1;
}


.sidebar.close .nav-links li .sub-menu {
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: block;
    pointer-events: none;
    transition: 0s;
}

.sidebar.close .nav-links li:hover .sub-menu {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: var(--transition);
}


.sidebar .nav-links li .sub-menu.link_name {
    display: none;

}

.sidebar.close .nav-links li .sub-menu.link_name {
    display: none;

}

.sidebar.close .nav-links li .sub-menu .link_name {
    font-size: 18px;
    opacity: 1;
    display: block;
}

.sidebar .nav-links li .sub-menu.blank {
    opacity: 1;
    pointer-events: auto;
    padding: 3px 20px 6px 16px;
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links li:hover .sub-menu.blank {
    top: 50%;
    transform: translateY(-50%);
}
.sidebar .profile-details {
    position: fixed;
    bottom: 0;
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--green-light);
    padding: 12px 0;
    transition: var(--transition);
}

.sidebar.close .profile-details{
    background: none;
  }

.sidebar.close .profile-details{
    width: 78px;
}

.profile-content {
    display: flex;
    align-items: center;
}

.sidebar .profile-details img {
    height: 52px;
    width: 52px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 14px 0 12px;
    background: var(--white);
    transition: var(--transition);
}

.sidebar.close .profile-details img{
    padding: 10px;
  }

.profile_name, .job {
    color: var(--grey-700);
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
}

.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
  display: none;
}

.job {
    font-size: 12px;

}


.home-section {
    position: relative;
    background: var(--backgroundColor);
    height: 100vh;
    left: 260px;
    width: calc(100%-260px);
    transition: var(--transition);
    
}

.sidebar.close ~ .home-section {
    left: 78px;
    width: calc(100% -78px);
}

.home-content {
    height: 60px;
    display: flex;
    align-items: center;
}

.home-content span:first-child,
.text {
    color: var(--grey-700);
    font-size: 35px;
}

.home-content span:first-child {
    margin: 0 15px;
    cursor: pointer;
}

.home-section .home-content .text{
    font-size: 26px;
    font-weight: 600;
}
@media (max-width: 400px) {
    .sidebar.close .nav-links li .sub-menu{
        display: none;
    }
    .sidebar{
        width: 78px;
    }
    .sidebar.close{
        width: 0;
    }
    .home-section{
        left: 78px;
        width: calc(100% - 78px);
        z-index: 100;
    }
    .sidebar.close ~ .home-section{
        width: 100%;
        left: 0;
    }
}

<!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">
    <link rel="stylesheet" href="admindashcss.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
    <title>Admin Dashboard</title>
</head>
<body>
    <div class="sidebar">
        <div class="logo-details">
            <span class="material-icons-sharp">radio_button_checked</span>
            <span class="logo_name"><img src="images/logowhite.svg" alt=""></span>   
        </div>
        <ul class="nav-links">
            <li>
                <a href="#">
                    <span class="material-icons-sharp">grid_view</span>
                      <span class="link_name">Dashboard</span>
                </a>
                <!-- <ul class="sub-menu blank">
                    <li><a class="link_name" href="#">Category</a></li>
                </ul> -->
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <span class="material-icons-sharp">contact_page</span>
                          <span class="link_name">Contacts</span>
                    </a>
                    <span class="material-icons-sharp arrow">expand_more</span>
                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Category</a></li>
                    <li><a href="#">Customer</a></li>
                    <li><a href="#">Resources</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <span class="material-icons-sharp">task</span>
                          <span class="link_name">Projects</span>
                    </a>
                    <span class="material-icons-sharp arrow">expand_more</span>
                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Projects</a></li>
                    <li><a href="#">Project details</a></li>
                    <li><a href="#">Job</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <span class="material-icons-sharp">payments</span>
                          <span class="link_name">Invoices</span>
                    </a>
                    <span class="material-icons-sharp arrow">expand_more</span>
                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Invoices</a></li>
                    <li><a href="#">Recivables</a></li>
                    <li><a href="#">Paybles</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <span class="material-icons-sharp">query_stats</span>
                          <span class="link_name">Queries</span>
                    </a>
                    <span class="material-icons-sharp arrow">expand_more</span>
                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Categories</a></li>
                    <li><a href="#">Recivables</a></li>
                    <li><a href="#">Payables</a></li>
                    <li><a href="#">Gross Profit</a></li>
                    <li><a href="#">Gross Profit Summary</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <span class="material-icons-sharp">admin_panel_settings</span>
                          <span class="link_name">Admin</span>
                    </a>
                    <span class="material-icons-sharp arrow">expand_more</span>
                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Categories</a></li>
                    <li><a href="#">Settings</a></li>
                    <li><a href="#">Users</a></li>
                    <li><a href="#">Documents</a></li>
                </ul>
            </li>
        <li>
            <div class="profile-details">
                <div class="profile-content">
                    <img src="images/messi.jpg" alt="profile">
                </div>
                    <div class="name-job">
                        <div class="profile_name">Brook Beyene</div>
                        <div class="job">Project Manager</div>
                    </div>
                    <span class="material-icons-sharp">logout</span>
            </div>
        </li>       
    </ul>
    </div>
    <section class="home-section">
        <div class="home-content">
            <span class="material-icons-sharp bx-menu">menu</span>
            <span class="text">Drop Down Sidebar</span>
        </div>
    </section>
   
</body>
</html>

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-10-26 09:03:13

您所要做的就是在下面一行中添加接近类的列表：

<div class="sidebar close">

另外，如果您需要保持navbar的最后状态，您可以将其存储在本地存储中，并在加载时通过js追加它。

        let arrow = document.querySelectorAll(".arrow");
        
        for (var i = 0; i < arrow.length; i++) {
            arrow[i].addEventListener("click", (e)=>{
                
            let arrowParent = e.target.parentElement.parentElement;
            arrowParent.classList.toggle("showMenu");



            })
        }

        let sidebar = document.querySelector(".sidebar");
        let sidebarBtn = document.querySelector(".bx-menu");
        sidebarBtn.addEventListener("click" , ()=>{
            sidebar.classList.toggle("close");
        });

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed:wght@400;700&display=swap');

html {
  font-size: 100%;
} /*16px*/

:root {
  /* colors */
  --primary-50: #e0fcff;
  --primary-100: #bef8fd;
  --primary-200: #87eaf2;
  --primary-300: #54d1db;
  --primary-400: #38bec9;
  --primary-500: #2cb1bc;
  --primary-600: #14919b;
  --primary-700: #0e7c86;
  --primary-800: #0a6c74;
  --primary-900: #044e54;

  /* grey */
  --grey-50: #f0f4f8;
  --grey-100: #d9e2ec;
  --grey-200: #bcccdc;
  --grey-300: #9fb3c8;
  --grey-400: #829ab1;
  --grey-500: #627d98;
  --grey-600: #486581;
  --grey-700: #334e68;
  --grey-800: #243b53;
  --grey-900: #102a43;
  /* rest of the colors */
  --black: #222;
  --white: #fff;
  --blue: #2336e2;
  --red-light: #f8d7da;
  --red-dark: #842029;
  --green-light: #d1e7dd;
  --green-dark: #0f5132;

  /* fonts  */
  --headingFont: 'Roboto Condensed', Sans-Serif;
  --bodyFont: 'Cabin', Sans-Serif;
  --small-text: 0.875rem;
  --extra-small-text: 0.7em;
  /* rest of the vars */
  --backgroundColor: var(--grey-50);
  --textColor: var(--grey-900);
  --borderRadius: 0.25rem;
  --letterSpacing: 1px;
  --transition: 0.3s ease-in-out all;
  --max-width: 1120px;
  --fixed-width: 500px;
  --fluid-width: 90vw;
  --breakpoint-lg: 992px;
  --nav-height: 6rem;
  /* box shadow*/
  --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
  background: var(--backgroundColor);
  font-family: var(--bodyFont);
  font-weight: 400;
  line-height: 1.75;
  color: var(--textColor);
}

p {
  margin-bottom: 1.5rem;
  max-width: 40em;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  margin-bottom: 1.38rem;
  font-family: var(--headingFont);
  font-weight: 400;
  line-height: 1.3;
  text-transform: capitalize;
  letter-spacing: var(--letterSpacing);
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {
  font-size: 2.441rem;
}

h3 {
  font-size: 1.953rem;
}

h4 {
  font-size: 1.563rem;
}

h5 {
  font-size: 1.25rem;
}

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

a {
  text-decoration: none;
  letter-spacing: var(--letterSpacing);
}
a,
button {
  line-height: 1.15;
}
button:disabled {
  cursor: not-allowed;
}
ul {
  list-style-type: none;
  padding: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--white);
    height: 100%;
    width: 260px;
    z-index: 100;
    transition: var(--transition);
}

.sidebar.close {
    width: 78px;
}



.logo-details {
    width: 100px;
    height: 60px;
    display: flex;
    align-items: center;
}

.logo-details span:first-child {
    font-size: 30px;
    /* color:  #94EB58; */
    color: var(--primary-600);
    height: 50px;
    min-width: 78px;
    text-align: left;
    line-height: 50px;
}

.logo_name img {
    width: 140px;
    height: 100px;
    margin-top: 8px;
    transition: 0.3s ease;
    transition-delay: 0.1s;
}

.logo_name {
    transition-delay: 0s;
    opacity: 0;
    pointer-events: none;
}


.nav-links {
    height: 100%;
    padding-top: 30px 0 150px 0;
    overflow: auto;
}

.nav-links {
    overflow: visible;

}

.nav-links::-webkit-scrollbar{
    display: none;
}

.nav-links li {
    position: relative;
    transition: var(--transition);
}

.nav-links li:hover {
    background: var(--green-light);
}

.nav-links li span {
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
    color: var(--primary-500);
    font-size: 23px;
    cursor: pointer;
    transition: var(--transition);
}

.nav-links li.showMenu span.arrow {
    transform: rotate(-180deg);
}

.sidebar.close .nav-links span.arrow {
    display: none;
}

.link_name {
    font-size: 18px;
    font-weight: 400;
    color: var(--grey-700);
    transition: var(--transition);
}

.sidebar.close .nav-links li a .link_name{
    opacity: 0;
    pointer-events: none;
  }

.nav-links li a {
    display: flex;
    align-items: center;
}

.icon-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar .nav-links li .sub-menu {
    padding: 6px 6px 14px 80px;
    margin-top: -10px;
    background: var(--green-light);
    display: none;
}

.sidebar .nav-links li.showMenu .sub-menu{
    display: block;
}

.sidebar .nav-links li .sub-menu a {
    color: var(--primary-900);
    font-size: 15px;
    padding: 5px 0;
    white-space: nowrap;
    opacity: 0.6;
    transition: var(--transition);
}

.sidebar .nav-links li .sub-menu a:hover {
    opacity: 1;
}


.sidebar.close .nav-links li .sub-menu {
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: block;
    pointer-events: none;
    transition: 0s;
}

.sidebar.close .nav-links li:hover .sub-menu {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: var(--transition);
}


.sidebar .nav-links li .sub-menu.link_name {
    display: none;

}

.sidebar.close .nav-links li .sub-menu.link_name {
    display: none;

}

.sidebar.close .nav-links li .sub-menu .link_name {
    font-size: 18px;
    opacity: 1;
    display: block;
}

.sidebar .nav-links li .sub-menu.blank {
    opacity: 1;
    pointer-events: auto;
    padding: 3px 20px 6px 16px;
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links li:hover .sub-menu.blank {
    top: 50%;
    transform: translateY(-50%);
}
.sidebar .profile-details {
    position: fixed;
    bottom: 0;
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--green-light);
    padding: 12px 0;
    transition: var(--transition);
}

.sidebar.close .profile-details{
    background: none;
  }

.sidebar.close .profile-details{
    width: 78px;
}

.profile-content {
    display: flex;
    align-items: center;
}

.sidebar .profile-details img {
    height: 52px;
    width: 52px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 14px 0 12px;
    background: var(--white);
    transition: var(--transition);
}

.sidebar.close .profile-details img{
    padding: 10px;
  }

.profile_name, .job {
    color: var(--grey-700);
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
}

.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
  display: none;
}

.job {
    font-size: 12px;

}


.home-section {
    position: relative;
    background: var(--backgroundColor);
    height: 100vh;
    left: 260px;
    width: calc(100%-260px);
    transition: var(--transition);
    
}

.sidebar.close ~ .home-section {
    left: 78px;
    width: calc(100% -78px);
}

.home-content {
    height: 60px;
    display: flex;
    align-items: center;
}

.home-content span:first-child,
.text {
    color: var(--grey-700);
    font-size: 35px;
}

.home-content span:first-child {
    margin: 0 15px;
    cursor: pointer;
}

.home-section .home-content .text{
    font-size: 26px;
    font-weight: 600;
}
@media (max-width: 400px) {
    .sidebar.close .nav-links li .sub-menu{
        display: none;
    }
    .sidebar{
        width: 78px;
    }
    .sidebar.close{
        width: 0;
    }
    .home-section{
        left: 78px;
        width: calc(100% - 78px);
        z-index: 100;
    }
    .sidebar.close ~ .home-section{
        width: 100%;
        left: 0;
    }
}

<!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">
    <link rel="stylesheet" href="admindashcss.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
    <title>Admin Dashboard</title>
</head>
<body>
    <div class="sidebar close">
        <div class="logo-details">
            <span class="material-icons-sharp">radio_button_checked</span>
            <span class="logo_name"><img src="images/logowhite.svg" alt=""></span>   
        </div>
        <ul class="nav-links">
            <li>
                <a href="#">
                    <span class="material-icons-sharp">grid_view</span>
                      <span class="link_name">Dashboard</span>
                </a>
                <!-- <ul class="sub-menu blank">
                    <li><a class="link_name" href="#">Category</a></li>
                </ul> -->
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <span class="material-icons-sharp">contact_page</span>
                          <span class="link_name">Contacts</span>
                    </a>
                    <span class="material-icons-sharp arrow">expand_more</span>
                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Category</a></li>
                    <li><a href="#">Customer</a></li>
                    <li><a href="#">Resources</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <span class="material-icons-sharp">task</span>
                          <span class="link_name">Projects</span>
                    </a>
                    <span class="material-icons-sharp arrow">expand_more</span>
                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Projects</a></li>
                    <li><a href="#">Project details</a></li>
                    <li><a href="#">Job</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <span class="material-icons-sharp">payments</span>
                          <span class="link_name">Invoices</span>
                    </a>
                    <span class="material-icons-sharp arrow">expand_more</span>
                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Invoices</a></li>
                    <li><a href="#">Recivables</a></li>
                    <li><a href="#">Paybles</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <span class="material-icons-sharp">query_stats</span>
                          <span class="link_name">Queries</span>
                    </a>
                    <span class="material-icons-sharp arrow">expand_more</span>
                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Categories</a></li>
                    <li><a href="#">Recivables</a></li>
                    <li><a href="#">Payables</a></li>
                    <li><a href="#">Gross Profit</a></li>
                    <li><a href="#">Gross Profit Summary</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <span class="material-icons-sharp">admin_panel_settings</span>
                          <span class="link_name">Admin</span>
                    </a>
                    <span class="material-icons-sharp arrow">expand_more</span>
                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Categories</a></li>
                    <li><a href="#">Settings</a></li>
                    <li><a href="#">Users</a></li>
                    <li><a href="#">Documents</a></li>
                </ul>
            </li>
        <li>
            <div class="profile-details">
                <div class="profile-content">
                    <img src="images/messi.jpg" alt="profile">
                </div>
                    <div class="name-job">
                        <div class="profile_name">Brook Beyene</div>
                        <div class="job">Project Manager</div>
                    </div>
                    <span class="material-icons-sharp">logout</span>
            </div>
        </li>       
    </ul>
    </div>
    <section class="home-section">
        <div class="home-content">
            <span class="material-icons-sharp bx-menu">menu</span>
            <span class="text">Drop Down Sidebar</span>
        </div>
    </section>
   
</body>
</html>

票数 0

Stack Overflow用户

发布于 2022-10-26 08:56:08

我的建议是使用cookie来存储和读取更改上的值。它将保持数据在重新加载方式下的持久性。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74204721

复制

相似问题

问刷新后，可折叠的导航条不会最小化
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问刷新后，可折叠的导航条不会最小化EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问刷新后，可折叠的导航条不会最小化
EN