导航 - 鼠标悬停显示/隐藏子菜单 - 使用 CSS / JQuery 时出现问题
Navigation - mouseover show / hide submenus - problems using CSS / JQuery
鼠标悬停时，我有一个垂直侧边菜单和菜单项右侧的子菜单弹出窗口。
主要问题是子菜单项很难 select，因为主菜单项 distance/position。
另一个问题是有时子菜单在不应该显示的时候仍然显示。
这最初是作为点击事件编写的并且运行良好，但现在客户希望它在悬停时运行。
请问我怎样才能很好地完成这项工作？
您可以在此处查看实际效果：https://codepen.io/lol4000/pen/VwMLOMO
主要代码：
$('.nav li > .subnav').parent().hover(function() {
var submenu = $(this).children('.subnav');
if ( $(submenu).is(':hidden') ) {
$(submenu).show(200);
} else {
$(submenu).hide(200);
}
});
你能点击一下吗：
$('.nav li > .subnav').parent().click(function() {
var submenu = $(this).children('.subnav');
if ( $(submenu).is(':hidden') ) {
$(submenu).show(200);
} else {
$(submenu).hide(200);
}
});
您可以慢慢隐藏子菜单，以便用户可以看到。一旦用户抓住它，它就会立即展开。
$('#menu_toggle').click(function() {
var nav2 = $('#nav-bar2').hasClass("show_nav2");
//adjust subnav position as well
$('.subnav').toggleClass('expanded');
$('#canvas').toggleClass("canvas");
$('#nav-bar').toggleClass("show_nav");
if (nav2) {
$('#nav-bar2').removeClass("show_nav2");
$('#canvas').removeClass("canvas");
$('#canvas').removeClass("canvas2");
}
});
$('#nav_link_formations').click(function() {
$('#canvas').toggleClass("canvas");
$('#canvas').toggleClass("canvas2");
$('#nav-bar').addClass("show_nav");
$('#nav-bar2').toggleClass("show_nav2");
});
//show submenu faster
$('.nav li > .subnav').parent().mouseenter(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(1)",
transitionDuration: ".3s",
opacity: "1"
});
});
//take time to hide
$('.nav li > .subnav').parent().mouseleave(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(0)",
transitionDuration: "1.0s",
opacity: "0"
});
});
//quickly expand it when user hovers over sub menu
$('.nav li > .subnav').mouseenter(function() {
$(this).css({
transform: "scaleY(1)",
transitionDuration: "0s"
});
});
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#news_toggle {
width: 68px;
background-color: rebeccapurple;
text-align: center;
white-space: nowrap;
cursor: pointer;
float: left
}
#news-sidebar {
background-color: rebeccapurple;
color: #fff;
}
#sidebar-nav {
width: 160px;
}
#canvas {
float: left;
padding: 0 1rem;
transition: .5s;
padding-left: calc(282px + 2rem);
}
a {
text-decoration: none;
color: rebeccapurple;
}
#menu_toggle {
color: lightblue;
font-size: 1.5rem;
cursor: pointer
}
.l-navbar {
float: left;
left: 68px;
width: 68px;
height: 100vh;
background-color: white;
border-right: 1px solid rebeccapurple;
padding: 1rem 1rem 0 0;
transition: .5s;
z-index: 100
}
.l-navbar2 {
float: left;
left: -30%;
width: 224px;
height: 100vh;
background-color: grey;
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: 90
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
}
.nav_link {
position: relative;
color: rebeccapurple;
margin-bottom: 1.5rem;
transition: .3s
}
.nav_icon {
font-size: 1.25rem;
}
.show_nav {
width: 224px;
}
.show_nav2 {
left: 292px;
}
.show_sidebar {
left: 0 !important;
}
.canvas {
position: absolute;
padding: 0 1rem;
transition: .5s;
left: calc(360px + 2rem);
}
.fas {
color: lightblue
}
.active {
color: rebeccapurple;
}
.active::before {
content: '';
position: absolute;
right: 0;
width: 2px;
height: 32px;
background-color: rebeccapurple
}
.height-100 {
height: 100vh
}
.dropdown-toggle::after {
margin-left: 0
}
nav .subnav {
position: absolute;
z-index: 99999;
display: block;
/*new attributes*/
left: 140px !important;
padding-right: 0.5rem;
opacity: 0.0;
transform: scaleY(0.0);
transition-duration: .5s;
transition-property: transform, opacity;
transition-timing-function: ease-out;
}
/*new rule*/
nav .expanded.subnav {
left: 300px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row flex-nowrap">
<div id="offcanvas" class="col-auto px-0">
<div id="news-sidebar" class="collapse collapse-horizontal min-vh-100">
<div class="news-content">
news news news
</div>
</div>
</div>
<div id="maincontent" class="col-auto px-0">
<div id="news_toggle" data-bs-target="#news-sidebar" data-bs-toggle="collapse" class="min-vh-100">NEWS</div>
<div class="l-navbar" id="nav-bar">
<div id="menu_toggle"><i class="fas fa-bars"></i> </div>
<nav class="nav">
<div>
<div class="nav_list">
<ul>
<li>
<a href="#" class="nav_link active" id="nav_link_formations"> <i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span> </a>
<ul class="subnav">
<i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span>
<li><a href="#" class="sub_nav_link active">Formations 1</a> </li>
<li><a href="#" class="sub_nav_link ">Formations 2</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Users 1</a> </li>
<li><a href="#" class="sub_nav_link ">Users 2</a> </li>
<li><a href="#" class="sub_nav_link ">Users 3</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Messages 1</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 2</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 3</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 4</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Bookmark 1</a> </li>
<li><a href="#" class="sub_nav_link ">Bookmark 2</a> </li>
</ul>
</li>
</div>
</nav>
</div>
<div class="l-navbar2" id="nav-bar2">
[LOGO]
</div>
<div id="canvas">
<div class="height-100 bg-light">
<h1>Homepage</h1>
<h2>What is Lorem Ipsum?</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<h2>Why do we use it?</h2>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>
</div>
我已经修改了 nav .subnav CSS 规则。并且，在 javascript 中，使用 mouseenter 和 mouseleave 函数代替悬停。并为 .subnav 添加了 mouseenter 处理程序。您可以调整过渡时间以使其更加用户友好。
此外，当主导航折叠时，您需要将子导航拉近。请参阅 javascript 代码中新 nav .expanded.subnav CSS 规则的使用。
我想这就是您想要的。您将导航隐藏在徽标 div 下。你应该做的是将导航的显示 属性 设置为 none 然后切换它，以便每次用户单击菜单按钮时导航显示，当用户单击按钮时它再次隐藏。现在我已经完成了我认为你想要的大部分事情。对于子导航的隐藏和重复，您现在已经知道如何操作了。我已经对齐了子导航，我只是不知道 jQuery，否则，我也会那样做。我已经注释掉了额外的 CSS 属性，因此您可以查看导致问题的原因。
$('#menu_toggle').click(function() {
$(".nav_list").toggle();
var nav2 = $('#nav-bar2').hasClass("show_nav2");
$(".subnav").toggle();
//adjust subnav position as well
$('.subnav').toggleClass('expanded');
$('#canvas').toggleClass("canvas");
$('#nav-bar').toggleClass("show_nav");
if (nav2) {
$('#nav-bar2').removeClass("show_nav2");
$('#canvas').removeClass("canvas");
$('#canvas').removeClass("canvas2");
}
});
$('#nav_link_formations').click(function() {
$('#canvas').toggleClass("canvas");
$('#canvas').toggleClass("canvas2");
$('#nav-bar').addClass("show_nav");
$('#nav-bar2').toggleClass("show_nav2");
});
//show submenu faster
$('.nav li > .subnav').parent().mouseenter(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(1)",
transitionDuration: ".3s",
opacity: "1"
});
});
//take time to hide
$('.nav li > .subnav').parent().mouseleave(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(0)",
transitionDuration: "1.0s",
opacity: "0"
});
});
//quickly expand it when user hovers over sub menu
$('.nav li > .subnav').mouseenter(function() {
$(this).css({
transform: "scaleY(1)",
transitionDuration: "0s"
});
});
$('.nav li > .subnav').parent().hover(function() {
var submenu = $(this).children('.subnav');
if ( $(submenu).is(':hidden') ) {
$(submenu).show(200);
} else {
$(submenu).hide(200);
}
});
ul {
list-style: none;
padding: 10px 20px;
margin: 0;
}
#news_toggle {
width: 68px;
background-color: rebeccapurple;
text-align: center;
white-space: nowrap;
cursor: pointer;
float: left
}
#news-sidebar {
background-color: rebeccapurple;
color: #fff;
}
#sidebar-nav {
width: 160px;
}
#canvas {
float: left;
padding: 0 1rem;
transition: .5s;
padding-left: calc(282px + 2rem);
}
a {
text-decoration: none;
color: rebeccapurple;
}
#menu_toggle {
color: lightblue;
font-size: 1.5rem;
cursor: pointer
}
.l-navbar {
float: left;
left: 68px;
width: 68px;
height: 100vh;
background-color: white;
border-right: 1px solid rebeccapurple;
padding: 1rem 1rem 0 0;
transition: .5s;
z-index: 100
}
.l-navbar2 {
float: left;
left: -30%;
width: 224px;
height: 100vh;
background-color: grey;
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: 90
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
/* .nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
} */
.nav_link {
position: relative;
color: rebeccapurple;
/* margin-bottom: 1.5rem; */
transition: .3s
}
.nav_icon {
font-size: 1.25rem;
}
.show_nav {
width: 224px;
}
.show_nav2 {
left: 292px;
}
.show_sidebar {
left: 0 !important;
}
.canvas {
position: absolute;
padding: 0 1rem;
transition: .5s;
left: calc(360px + 2rem);
}
.fas {
color: lightblue
}
.active {
color: rebeccapurple;
}
.active::before {
content: '';
position: absolute;
right: 0;
width: 2px;
height: 32px;
background-color: rebeccapurple
}
.height-100 {
height: 100vh
}
.dropdown-toggle::after {
margin-left: 0
}
nav .subnav {
/* position: absolute; */
/* z-index: 99999; */
display: hidden;
/*new attributes*/
/* left: 140px !important; */
/* margin-left: -4.5rem; */
opacity: 0.0;
transform: scaleY(0.0);
transition-duration: .5s;
transition-property: transform, opacity;
transition-timing-function: ease-out;
}
/*new rule*/
nav .expanded.subnav {
/* left: 300px !important; */
}
.nav_list {
display: none;
}
ul>.subnav {
padding: 0px;
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row flex-nowrap">
<div id="offcanvas" class="col-auto px-0">
<div id="news-sidebar" class="collapse collapse-horizontal min-vh-100">
<div class="news-content">
news news news
</div>
</div>
</div>
<div id="maincontent" class="col-auto px-0">
<div id="news_toggle" data-bs-target="#news-sidebar" data-bs-toggle="collapse" class="min-vh-100">NEWS</div>
<div class="l-navbar" id="nav-bar">
<div id="menu_toggle"><i class="fas fa-bars"></i> </div>
<nav class="nav">
<div>
<div class="nav_list">
<ul>
<li>
<a href="#" class="nav_link active" id="nav_link_formations"> <i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span> </a>
<ul class="subnav">
<i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span>
<li><a href="#" class="sub_nav_link active">Formations 1</a> </li>
<li><a href="#" class="sub_nav_link ">Formations 2</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Users 1</a> </li>
<li><a href="#" class="sub_nav_link ">Users 2</a> </li>
<li><a href="#" class="sub_nav_link ">Users 3</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Messages 1</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 2</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 3</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 4</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Bookmark 1</a> </li>
<li><a href="#" class="sub_nav_link ">Bookmark 2</a> </li>
</ul>
</li>
</div>
</nav>
</div>
<div class="l-navbar2" id="nav-bar2">
[LOGO]
</div>
<div id="canvas">
<div class="height-100 bg-light">
<h1>Homepage</h1>
<h2>What is Lorem Ipsum?</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<h2>Why do we use it?</h2>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我正在添加另一个答案。现在列表对齐了。可以增加隐藏时间。
$('#menu_toggle').click(function() {
$(".nav_list").toggle();
var nav2 = $('#nav-bar2').hasClass("show_nav2");
$(".subnav").toggle();
//adjust subnav position as well
$('.subnav').toggleClass('expanded');
$('#canvas').toggleClass("canvas");
$('#nav-bar').toggleClass("show_nav");
if (nav2) {
$('#nav-bar2').removeClass("show_nav2");
$('#canvas').removeClass("canvas");
$('#canvas').removeClass("canvas2");
}
});
$('#nav_link_formations').click(function() {
$('#canvas').toggleClass("canvas");
$('#canvas').toggleClass("canvas2");
$('#nav-bar').addClass("show_nav");
$('#nav-bar2').toggleClass("show_nav2");
});
//show submenu faster
$('.nav li > .subnav').parent().mouseenter(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(1)",
transitionDuration: ".3s",
opacity: "1"
});
});
//take time to hide
$('.nav li > .subnav').parent().mouseleave(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(0)",
transitionDuration: "2.0s",
opacity: "0"
});
});
//quickly expand it when user hovers over sub menu
$('.nav li > .subnav').mouseenter(function() {
$(this).css({
transform: "scaleY(1)",
transitionDuration: "0s"
});
});
$('.nav li > .subnav').parent().hover(function() {
var submenu = $(this).children('.subnav');
if ($(submenu).is(':hidden')) {
$(submenu).show(500);
}
});
ul {
list-style: none;
padding: 10px 20px;
margin: 0;
}
#news_toggle {
width: 68px;
background-color: rebeccapurple;
text-align: center;
white-space: nowrap;
cursor: pointer;
float: left
}
#news-sidebar {
background-color: rebeccapurple;
color: #fff;
}
#sidebar-nav {
width: 160px;
}
#canvas {
float: left;
padding: 0 1rem;
transition: .5s;
padding-left: calc(282px + 2rem);
}
a {
text-decoration: none;
color: rebeccapurple;
}
#menu_toggle {
color: lightblue;
font-size: 1.5rem;
cursor: pointer
}
.l-navbar {
float: left;
left: 68px;
width: 68px;
height: 100vh;
background-color: white;
border-right: 1px solid rebeccapurple;
padding: 1rem 1rem 0 0;
transition: .5s;
}
.l-navbar2 {
float: left;
left: -30%;
width: 224px;
height: 100vh;
background-color: grey;
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: -10;
}
#nav-bar2 {
z-index: -99999;
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 40px;
overflow: hidden;
z-index: 99999;
}
.nav_link {
display: flex;
align-items: center;
column-gap: 1rem;
}
.nav_link {
position: relative;
color: rebeccapurple;
margin-bottom: 1.5rem;
transition: .3s
}
.nav_icon {
font-size: 1.25rem;
}
.show_nav {
width: 224px;
}
.show_nav2 {
left: 292px;
}
.show_sidebar {
left: 0 !important;
}
.canvas {
position: absolute;
padding: 0 1rem;
transition: .5s;
left: calc(360px + 2rem);
}
.fas {
color: lightblue
}
.active {
color: rebeccapurple;
}
.active::before {
content: '';
position: absolute;
right: -20px;
width: 2px;
height: 32px;
background-color: rebeccapurple;
}
.height-100 {
height: 100vh
}
.dropdown-toggle::after {
margin-left: 0
}
nav .subnav {
position: absolute;
z-index: 99999;
display: hidden;
new attributes left: 0px !important;
margin-left: 10rem;
padding: 0;
opacity: 0.0;
transform: scaleY(0.0);
/* transition-duration: .5s; */
/* transition-property: transform, opacity; */
/* transition-timing-function: ease-out; */
}
/*new rule*/
nav .expanded .subnav {
left: 100px !important;
}
.nav_list {
display: none;
z-index: 4000;
}
li {
display: flex;
margin: 0;
top: 0;
z-index: 90000;
}
.subnav>ul {
/* padding-left: 300px; */
list-style-type: none;
display: flex;
top: 0;
margin-top: 0;
z-index: 9000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row flex-nowrap">
<div id="offcanvas" class="col-auto px-0">
<div id="news-sidebar" class="collapse collapse-horizontal min-vh-100">
<div class="news-content">
news news news
</div>
</div>
</div>
<div id="maincontent" class="col-auto px-0">
<div id="news_toggle" data-bs-target="#news-sidebar" data-bs-toggle="collapse" class="min-vh-100">NEWS</div>
<div class="l-navbar" id="nav-bar">
<div id="menu_toggle"><i class="fas fa-bars"></i> </div>
<nav class="nav">
<div>
<div class="nav_list">
<ul>
<li>
<a href="#" class="nav_link active" id="nav_link_formations"> <i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span> </a>
<ul class="subnav">
<i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span>
<li><a href="#" class="sub_nav_link active">Formations 1</a> </li>
<li><a href="#" class="sub_nav_link ">Formations 2</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Users 1</a> </li>
<li><a href="#" class="sub_nav_link ">Users 2</a> </li>
<li><a href="#" class="sub_nav_link ">Users 3</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Messages 1</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 2</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 3</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 4</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Bookmark 1</a> </li>
<li><a href="#" class="sub_nav_link ">Bookmark 2</a> </li>
</ul>
</li>
</div>
</nav>
</div>
<span class="l-navbar2" id="nav-bar2">
[LOGO]
</span>
<div id="canvas">
<div class="height-100 bg-light">
<h1>Homepage</h1>
<h2>What is Lorem Ipsum?</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<h2>Why do we use it?</h2>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
鼠标悬停时，我有一个垂直侧边菜单和菜单项右侧的子菜单弹出窗口。
主要问题是子菜单项很难 select，因为主菜单项 distance/position。
另一个问题是有时子菜单在不应该显示的时候仍然显示。
这最初是作为点击事件编写的并且运行良好，但现在客户希望它在悬停时运行。
请问我怎样才能很好地完成这项工作？
您可以在此处查看实际效果：https://codepen.io/lol4000/pen/VwMLOMO
主要代码：
$('.nav li > .subnav').parent().hover(function() {
var submenu = $(this).children('.subnav');
if ( $(submenu).is(':hidden') ) {
$(submenu).show(200);
} else {
$(submenu).hide(200);
}
});
你能点击一下吗：
$('.nav li > .subnav').parent().click(function() {
var submenu = $(this).children('.subnav');
if ( $(submenu).is(':hidden') ) {
$(submenu).show(200);
} else {
$(submenu).hide(200);
}
});
您可以慢慢隐藏子菜单，以便用户可以看到。一旦用户抓住它，它就会立即展开。
$('#menu_toggle').click(function() {
var nav2 = $('#nav-bar2').hasClass("show_nav2");
//adjust subnav position as well
$('.subnav').toggleClass('expanded');
$('#canvas').toggleClass("canvas");
$('#nav-bar').toggleClass("show_nav");
if (nav2) {
$('#nav-bar2').removeClass("show_nav2");
$('#canvas').removeClass("canvas");
$('#canvas').removeClass("canvas2");
}
});
$('#nav_link_formations').click(function() {
$('#canvas').toggleClass("canvas");
$('#canvas').toggleClass("canvas2");
$('#nav-bar').addClass("show_nav");
$('#nav-bar2').toggleClass("show_nav2");
});
//show submenu faster
$('.nav li > .subnav').parent().mouseenter(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(1)",
transitionDuration: ".3s",
opacity: "1"
});
});
//take time to hide
$('.nav li > .subnav').parent().mouseleave(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(0)",
transitionDuration: "1.0s",
opacity: "0"
});
});
//quickly expand it when user hovers over sub menu
$('.nav li > .subnav').mouseenter(function() {
$(this).css({
transform: "scaleY(1)",
transitionDuration: "0s"
});
});
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#news_toggle {
width: 68px;
background-color: rebeccapurple;
text-align: center;
white-space: nowrap;
cursor: pointer;
float: left
}
#news-sidebar {
background-color: rebeccapurple;
color: #fff;
}
#sidebar-nav {
width: 160px;
}
#canvas {
float: left;
padding: 0 1rem;
transition: .5s;
padding-left: calc(282px + 2rem);
}
a {
text-decoration: none;
color: rebeccapurple;
}
#menu_toggle {
color: lightblue;
font-size: 1.5rem;
cursor: pointer
}
.l-navbar {
float: left;
left: 68px;
width: 68px;
height: 100vh;
background-color: white;
border-right: 1px solid rebeccapurple;
padding: 1rem 1rem 0 0;
transition: .5s;
z-index: 100
}
.l-navbar2 {
float: left;
left: -30%;
width: 224px;
height: 100vh;
background-color: grey;
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: 90
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
}
.nav_link {
position: relative;
color: rebeccapurple;
margin-bottom: 1.5rem;
transition: .3s
}
.nav_icon {
font-size: 1.25rem;
}
.show_nav {
width: 224px;
}
.show_nav2 {
left: 292px;
}
.show_sidebar {
left: 0 !important;
}
.canvas {
position: absolute;
padding: 0 1rem;
transition: .5s;
left: calc(360px + 2rem);
}
.fas {
color: lightblue
}
.active {
color: rebeccapurple;
}
.active::before {
content: '';
position: absolute;
right: 0;
width: 2px;
height: 32px;
background-color: rebeccapurple
}
.height-100 {
height: 100vh
}
.dropdown-toggle::after {
margin-left: 0
}
nav .subnav {
position: absolute;
z-index: 99999;
display: block;
/*new attributes*/
left: 140px !important;
padding-right: 0.5rem;
opacity: 0.0;
transform: scaleY(0.0);
transition-duration: .5s;
transition-property: transform, opacity;
transition-timing-function: ease-out;
}
/*new rule*/
nav .expanded.subnav {
left: 300px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row flex-nowrap">
<div id="offcanvas" class="col-auto px-0">
<div id="news-sidebar" class="collapse collapse-horizontal min-vh-100">
<div class="news-content">
news news news
</div>
</div>
</div>
<div id="maincontent" class="col-auto px-0">
<div id="news_toggle" data-bs-target="#news-sidebar" data-bs-toggle="collapse" class="min-vh-100">NEWS</div>
<div class="l-navbar" id="nav-bar">
<div id="menu_toggle"><i class="fas fa-bars"></i> </div>
<nav class="nav">
<div>
<div class="nav_list">
<ul>
<li>
<a href="#" class="nav_link active" id="nav_link_formations"> <i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span> </a>
<ul class="subnav">
<i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span>
<li><a href="#" class="sub_nav_link active">Formations 1</a> </li>
<li><a href="#" class="sub_nav_link ">Formations 2</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Users 1</a> </li>
<li><a href="#" class="sub_nav_link ">Users 2</a> </li>
<li><a href="#" class="sub_nav_link ">Users 3</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Messages 1</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 2</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 3</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 4</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Bookmark 1</a> </li>
<li><a href="#" class="sub_nav_link ">Bookmark 2</a> </li>
</ul>
</li>
</div>
</nav>
</div>
<div class="l-navbar2" id="nav-bar2">
[LOGO]
</div>
<div id="canvas">
<div class="height-100 bg-light">
<h1>Homepage</h1>
<h2>What is Lorem Ipsum?</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<h2>Why do we use it?</h2>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>
</div>
我已经修改了 nav .subnav CSS 规则。并且，在 javascript 中，使用 mouseenter 和 mouseleave 函数代替悬停。并为 .subnav 添加了 mouseenter 处理程序。您可以调整过渡时间以使其更加用户友好。
此外，当主导航折叠时，您需要将子导航拉近。请参阅 javascript 代码中新 nav .expanded.subnav CSS 规则的使用。
我想这就是您想要的。您将导航隐藏在徽标 div 下。你应该做的是将导航的显示 属性 设置为 none 然后切换它，以便每次用户单击菜单按钮时导航显示，当用户单击按钮时它再次隐藏。现在我已经完成了我认为你想要的大部分事情。对于子导航的隐藏和重复，您现在已经知道如何操作了。我已经对齐了子导航，我只是不知道 jQuery，否则，我也会那样做。我已经注释掉了额外的 CSS 属性，因此您可以查看导致问题的原因。
$('#menu_toggle').click(function() {
$(".nav_list").toggle();
var nav2 = $('#nav-bar2').hasClass("show_nav2");
$(".subnav").toggle();
//adjust subnav position as well
$('.subnav').toggleClass('expanded');
$('#canvas').toggleClass("canvas");
$('#nav-bar').toggleClass("show_nav");
if (nav2) {
$('#nav-bar2').removeClass("show_nav2");
$('#canvas').removeClass("canvas");
$('#canvas').removeClass("canvas2");
}
});
$('#nav_link_formations').click(function() {
$('#canvas').toggleClass("canvas");
$('#canvas').toggleClass("canvas2");
$('#nav-bar').addClass("show_nav");
$('#nav-bar2').toggleClass("show_nav2");
});
//show submenu faster
$('.nav li > .subnav').parent().mouseenter(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(1)",
transitionDuration: ".3s",
opacity: "1"
});
});
//take time to hide
$('.nav li > .subnav').parent().mouseleave(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(0)",
transitionDuration: "1.0s",
opacity: "0"
});
});
//quickly expand it when user hovers over sub menu
$('.nav li > .subnav').mouseenter(function() {
$(this).css({
transform: "scaleY(1)",
transitionDuration: "0s"
});
});
$('.nav li > .subnav').parent().hover(function() {
var submenu = $(this).children('.subnav');
if ( $(submenu).is(':hidden') ) {
$(submenu).show(200);
} else {
$(submenu).hide(200);
}
});
ul {
list-style: none;
padding: 10px 20px;
margin: 0;
}
#news_toggle {
width: 68px;
background-color: rebeccapurple;
text-align: center;
white-space: nowrap;
cursor: pointer;
float: left
}
#news-sidebar {
background-color: rebeccapurple;
color: #fff;
}
#sidebar-nav {
width: 160px;
}
#canvas {
float: left;
padding: 0 1rem;
transition: .5s;
padding-left: calc(282px + 2rem);
}
a {
text-decoration: none;
color: rebeccapurple;
}
#menu_toggle {
color: lightblue;
font-size: 1.5rem;
cursor: pointer
}
.l-navbar {
float: left;
left: 68px;
width: 68px;
height: 100vh;
background-color: white;
border-right: 1px solid rebeccapurple;
padding: 1rem 1rem 0 0;
transition: .5s;
z-index: 100
}
.l-navbar2 {
float: left;
left: -30%;
width: 224px;
height: 100vh;
background-color: grey;
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: 90
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
/* .nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
} */
.nav_link {
position: relative;
color: rebeccapurple;
/* margin-bottom: 1.5rem; */
transition: .3s
}
.nav_icon {
font-size: 1.25rem;
}
.show_nav {
width: 224px;
}
.show_nav2 {
left: 292px;
}
.show_sidebar {
left: 0 !important;
}
.canvas {
position: absolute;
padding: 0 1rem;
transition: .5s;
left: calc(360px + 2rem);
}
.fas {
color: lightblue
}
.active {
color: rebeccapurple;
}
.active::before {
content: '';
position: absolute;
right: 0;
width: 2px;
height: 32px;
background-color: rebeccapurple
}
.height-100 {
height: 100vh
}
.dropdown-toggle::after {
margin-left: 0
}
nav .subnav {
/* position: absolute; */
/* z-index: 99999; */
display: hidden;
/*new attributes*/
/* left: 140px !important; */
/* margin-left: -4.5rem; */
opacity: 0.0;
transform: scaleY(0.0);
transition-duration: .5s;
transition-property: transform, opacity;
transition-timing-function: ease-out;
}
/*new rule*/
nav .expanded.subnav {
/* left: 300px !important; */
}
.nav_list {
display: none;
}
ul>.subnav {
padding: 0px;
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row flex-nowrap">
<div id="offcanvas" class="col-auto px-0">
<div id="news-sidebar" class="collapse collapse-horizontal min-vh-100">
<div class="news-content">
news news news
</div>
</div>
</div>
<div id="maincontent" class="col-auto px-0">
<div id="news_toggle" data-bs-target="#news-sidebar" data-bs-toggle="collapse" class="min-vh-100">NEWS</div>
<div class="l-navbar" id="nav-bar">
<div id="menu_toggle"><i class="fas fa-bars"></i> </div>
<nav class="nav">
<div>
<div class="nav_list">
<ul>
<li>
<a href="#" class="nav_link active" id="nav_link_formations"> <i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span> </a>
<ul class="subnav">
<i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span>
<li><a href="#" class="sub_nav_link active">Formations 1</a> </li>
<li><a href="#" class="sub_nav_link ">Formations 2</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Users 1</a> </li>
<li><a href="#" class="sub_nav_link ">Users 2</a> </li>
<li><a href="#" class="sub_nav_link ">Users 3</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Messages 1</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 2</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 3</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 4</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Bookmark 1</a> </li>
<li><a href="#" class="sub_nav_link ">Bookmark 2</a> </li>
</ul>
</li>
</div>
</nav>
</div>
<div class="l-navbar2" id="nav-bar2">
[LOGO]
</div>
<div id="canvas">
<div class="height-100 bg-light">
<h1>Homepage</h1>
<h2>What is Lorem Ipsum?</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<h2>Why do we use it?</h2>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我正在添加另一个答案。现在列表对齐了。可以增加隐藏时间。
$('#menu_toggle').click(function() {
$(".nav_list").toggle();
var nav2 = $('#nav-bar2').hasClass("show_nav2");
$(".subnav").toggle();
//adjust subnav position as well
$('.subnav').toggleClass('expanded');
$('#canvas').toggleClass("canvas");
$('#nav-bar').toggleClass("show_nav");
if (nav2) {
$('#nav-bar2').removeClass("show_nav2");
$('#canvas').removeClass("canvas");
$('#canvas').removeClass("canvas2");
}
});
$('#nav_link_formations').click(function() {
$('#canvas').toggleClass("canvas");
$('#canvas').toggleClass("canvas2");
$('#nav-bar').addClass("show_nav");
$('#nav-bar2').toggleClass("show_nav2");
});
//show submenu faster
$('.nav li > .subnav').parent().mouseenter(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(1)",
transitionDuration: ".3s",
opacity: "1"
});
});
//take time to hide
$('.nav li > .subnav').parent().mouseleave(function() {
let submenu = $(this).children('.subnav');
$(submenu).css({
transform: "scaleY(0)",
transitionDuration: "2.0s",
opacity: "0"
});
});
//quickly expand it when user hovers over sub menu
$('.nav li > .subnav').mouseenter(function() {
$(this).css({
transform: "scaleY(1)",
transitionDuration: "0s"
});
});
$('.nav li > .subnav').parent().hover(function() {
var submenu = $(this).children('.subnav');
if ($(submenu).is(':hidden')) {
$(submenu).show(500);
}
});
ul {
list-style: none;
padding: 10px 20px;
margin: 0;
}
#news_toggle {
width: 68px;
background-color: rebeccapurple;
text-align: center;
white-space: nowrap;
cursor: pointer;
float: left
}
#news-sidebar {
background-color: rebeccapurple;
color: #fff;
}
#sidebar-nav {
width: 160px;
}
#canvas {
float: left;
padding: 0 1rem;
transition: .5s;
padding-left: calc(282px + 2rem);
}
a {
text-decoration: none;
color: rebeccapurple;
}
#menu_toggle {
color: lightblue;
font-size: 1.5rem;
cursor: pointer
}
.l-navbar {
float: left;
left: 68px;
width: 68px;
height: 100vh;
background-color: white;
border-right: 1px solid rebeccapurple;
padding: 1rem 1rem 0 0;
transition: .5s;
}
.l-navbar2 {
float: left;
left: -30%;
width: 224px;
height: 100vh;
background-color: grey;
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: -10;
}
#nav-bar2 {
z-index: -99999;
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 40px;
overflow: hidden;
z-index: 99999;
}
.nav_link {
display: flex;
align-items: center;
column-gap: 1rem;
}
.nav_link {
position: relative;
color: rebeccapurple;
margin-bottom: 1.5rem;
transition: .3s
}
.nav_icon {
font-size: 1.25rem;
}
.show_nav {
width: 224px;
}
.show_nav2 {
left: 292px;
}
.show_sidebar {
left: 0 !important;
}
.canvas {
position: absolute;
padding: 0 1rem;
transition: .5s;
left: calc(360px + 2rem);
}
.fas {
color: lightblue
}
.active {
color: rebeccapurple;
}
.active::before {
content: '';
position: absolute;
right: -20px;
width: 2px;
height: 32px;
background-color: rebeccapurple;
}
.height-100 {
height: 100vh
}
.dropdown-toggle::after {
margin-left: 0
}
nav .subnav {
position: absolute;
z-index: 99999;
display: hidden;
new attributes left: 0px !important;
margin-left: 10rem;
padding: 0;
opacity: 0.0;
transform: scaleY(0.0);
/* transition-duration: .5s; */
/* transition-property: transform, opacity; */
/* transition-timing-function: ease-out; */
}
/*new rule*/
nav .expanded .subnav {
left: 100px !important;
}
.nav_list {
display: none;
z-index: 4000;
}
li {
display: flex;
margin: 0;
top: 0;
z-index: 90000;
}
.subnav>ul {
/* padding-left: 300px; */
list-style-type: none;
display: flex;
top: 0;
margin-top: 0;
z-index: 9000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row flex-nowrap">
<div id="offcanvas" class="col-auto px-0">
<div id="news-sidebar" class="collapse collapse-horizontal min-vh-100">
<div class="news-content">
news news news
</div>
</div>
</div>
<div id="maincontent" class="col-auto px-0">
<div id="news_toggle" data-bs-target="#news-sidebar" data-bs-toggle="collapse" class="min-vh-100">NEWS</div>
<div class="l-navbar" id="nav-bar">
<div id="menu_toggle"><i class="fas fa-bars"></i> </div>
<nav class="nav">
<div>
<div class="nav_list">
<ul>
<li>
<a href="#" class="nav_link active" id="nav_link_formations"> <i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span> </a>
<ul class="subnav">
<i class="fas fa-graduation-cap"></i>
<span class="nav_name">Formations</span>
<li><a href="#" class="sub_nav_link active">Formations 1</a> </li>
<li><a href="#" class="sub_nav_link ">Formations 2</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Users 1</a> </li>
<li><a href="#" class="sub_nav_link ">Users 2</a> </li>
<li><a href="#" class="sub_nav_link ">Users 3</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Messages 1</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 2</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 3</a> </li>
<li><a href="#" class="sub_nav_link ">Messages 4</a> </li>
</ul>
</li>
<li>
<a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a>
<ul class="subnav">
<li><a href="#" class="sub_nav_link active">Bookmark 1</a> </li>
<li><a href="#" class="sub_nav_link ">Bookmark 2</a> </li>
</ul>
</li>
</div>
</nav>
</div>
<span class="l-navbar2" id="nav-bar2">
[LOGO]
</span>
<div id="canvas">
<div class="height-100 bg-light">
<h1>Homepage</h1>
<h2>What is Lorem Ipsum?</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<h2>Why do we use it?</h2>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>