我是编码的新手,实际上是学习后端,但是仍然想做一些漂亮的东西。 (并对任何英语错误表示歉意)
无论如何,我要这样做:https://codepen.io/morgane-demesmaeker/pen/QWjPLRx
HTML:
<header>
<nav>
<a href="#" class="logo"><i class="fas fa-globe-asia fa-2x"></i><span>Title<br>Title</span></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="index.php"><i class="fas fa-home mr-2"></i> Accueil</a></li>
<li class="nav-expand"><a href="#" class="nav-link"><span><i class="fas fa-chalkboard-teacher mr-2"></i> Click here for submenu </span></a>
<ul class="nav-expand-content">
<li><a href="">1</a></li>
<li class="nav-expand"><a href="#" class="nav-link">2</a>
<ul class="nav-expand-content">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
</ul>
</li>
<li class="nav-expand"><a href="#" class="nav-link">3</a>
<ul class="nav-expand-content">
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>
</li>
<li class="nav-expand"><a href="#" class="nav-link">4 : click here for another submenu</a>
<ul class="nav-expand-content">
<li><a href="#">4.1</a></li>
<li class="nav-expand"><a href="#" class="nav-link">Test lvl 3</a>
<ul class="nav-expand-content">
<li class="nav-expand"><a href="#" class="nav-link">Test lvl 4</a>
<ul class="nav-expand-content">
<li class="nav-expand"><a href="#">Test lvl 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</li>
</ul>
</nav>
CSS:
/* ----------------------------------------------------------------
ALL
---------------------------------------------------------------- */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
/* ----------------------------------------------------------------
HEADER
---------------------------------------------------------------- */
header {
background-color: rgb(235, 235, 235);
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.5), inset 0px 5px #C44816;
padding-top: 5px;
position: fixed;
width: 100%;
}
header ul {
margin: 0;
padding: 5px;
list-style: none;
overflow: hidden;
background-color: rgb(235, 235, 235);
}
header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid rgb(225, 225, 225);
border-left: 1px solid rgb(225, 225, 225);
text-decoration: none;
color: #333;
}
header li a:hover {
background-color: rgb(225, 225, 225);
}
.logo {
display: block;
float: left;
font-size: 20px;
padding: 10px 20px;
text-decoration: none;
color: #333;
}
.logo span {
vertical-align: bottom;
display: inline-block;
}
header .menu { /* Objectif : cacher le menu par défaut */
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* ----------------- Hamburger menu-icon ----------------- */
header .menu-icon {
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none; /* L'icone du menu ne peut pas être sélectionnée par l'utilisateur */
}
header .menu-icon .navicon { /* Barre du milieu qui disparait en transition */
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
header .menu-icon .navicon:before,
header .menu-icon .navicon:after { /* Les deux autres barres */
background: #333;
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
}
header .menu-icon .navicon:before { /* Barre du bas */
top: 5px;
}
header .menu-icon .navicon:after { /* Barre du haut */
top: -5px;
}
/* ----------------- Hamburger Menu button behavior ----------------- */
header .menu-btn {
display: none;
}
header .menu-btn:checked ~ .menu {
max-height: 100vh;
}
header .menu-btn:checked ~ .menu-icon .navicon { /* Barre du milieu qui disparait*/
background: transparent;
}
header .menu-btn:checked ~ .menu-icon .navicon:before { /* Barre du bas qui tourne */
transform: rotate(-45deg);
}
header .menu-btn:checked ~ .menu-icon .navicon:after { /* Barre du haut qui tourne */
transform: rotate(45deg);
}
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { /* Les deux barres se croisent en leur milieu */
top: 0;
}
/* ----------------- Sous-catégories ----------------- */
.nav-expand-content {
position: absolute;
top: 76px;
left: 0;
width: 100%;
height: 100vh;
overflow-y: auto;
transform: translateX(100%);
transition: 0.3s;
visibility: hidden;
}
.active > .nav-expand-content {
transform: translateX(0);
visibility: visible;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.5);
}
.nav-link {
display: flex;
justify-content: space-between;
}
/* ----------------- Media Queries ----------------- */
@media (min-width: 768px) {
header li {
float: left;
}
header li a {
padding: 20px 30px;
}
header .menu {
clear: none;
float: right;
max-height: none;
}
header .menu-icon {
display: none;
}
}
JS:
/* -------------------------------------
Menu + sub-menu
--------------------------------------*/
let navExpand = document.querySelectorAll('.nav-expand')
let backLink = `<li class="nav-item">
<a class="nav-back-link" href="javascript:;">
<i class="fas fa-caret-left"></i> Back
</a>
</li>`
let forwardIcon = '<i class="fas fa-caret-right"></i>'
navExpand.forEach(item => {
item.querySelector('.nav-expand-content').insertAdjacentHTML('afterbegin', backLink)
item.querySelector('.nav-link').insertAdjacentHTML('beforeend', forwardIcon)
item.querySelector('.nav-link').addEventListener('click', () => item.classList.add('active'))
item.querySelector('.nav-back-link').addEventListener('click', () => item.classList.remove('active'))
})
/* ----------- Close sub-menu when checkbox unchecked ----------- */
let checkBox = document.getElementById('menu-btn');
checkbox.addEventListener('change', e => {
if(e.target.checked==false){
navExpand.forEach(item => {
item.classList.remove('active')
})
}
})
现在知道这一点,我正在研究移动优先技术,因此,您需要调整大小以查看我的问题。
问题1:CSS问题
子菜单的第一层按预期工作,在原始菜单上方,我们仍然可以看到标题和汉堡包徽标。但是在此之后,下一个级别就位于其下,而不是位于其下,依此类推。我不知道如何在没有其他位置的情况下堆叠它们。如果我将其最高位置设为0,则它们将按我的预期工作,但会超过标题和图标。因此,我在此下面放了76px ...我尝试了很多不同的方法,但是这两个方法离我想要的最接近。
有人建议我将所有内容放在另一个div中,作为侧边栏。我开始做这个,但是后来,对于更大的屏幕,它变得很难做,因为那时我要让2个导航仪作为一个。我想这似乎比让一台导航仪在移动设备上同时工作要困难得多。而且我不明白,如果它在同一个导航仪中,为什么它不应该工作,(当我不了解某些内容时,我不喜欢它)所以我停了下来。即使是这样,侧面菜单仍然可以正常工作。所以,我想如果我不能解决问题,那我就去那里。但我很想避免这种情况。
问题2:JS问题
如您所见,这产生了很多子菜单,对于活动类,我们必须将它们一个一个地删除。我编写了一些代码,就好像我们未选中菜单汉堡包一样,他们都应该删除其活动类,但是无论代码如何,它都行不通,而且我什至无法开始理解为什么。
谢谢您的时间和建议提前
PS:我还不知道任何JQuery'^^
CSS问题可能使菜单“位置:相对;”。它们子菜单使用top:0相互覆盖。
js在item.querySelector('XXX')找不到任何东西时无法“ insertAdjacentHTML”,否则会崩溃然后出现未知错误,因此请避免使用它。
ps.s。在js中,checkBox和checkbox是不同的。 :p
搜索“检查此项目”以检查我修改的行。
let navExpand = document.querySelectorAll('.nav-expand')
let backLink = `<li class="nav-item">
<a class="nav-back-link" href="javascript:;">
<i class="fas fa-caret-left"></i> Back
</a>
</li>`
let forwardIcon = '<i class="fas fa-caret-right"></i>'
navExpand.forEach(item => { // check this
if (item.querySelector('.nav-expand-content')) item.querySelector('.nav-expand-content').insertAdjacentHTML('afterbegin', backLink);
if (item.querySelector('.nav-link')) item.querySelector('.nav-link').insertAdjacentHTML('beforeend', forwardIcon);
if (item.querySelector('.nav-link')) item.querySelector('.nav-link').addEventListener('click', () => item.classList.add('active'));
if (item.querySelector('.nav-back-link')) item.querySelector('.nav-back-link').addEventListener('click', () => item.classList.remove('active'));
})
//
/* ----------- Close sub-menu when checkbox unchecked ----------- */
let checkBox = document.getElementById('menu-btn');
checkBox.addEventListener('change', e => { // check this
if (e.target.checked == false) {
let actives = document.querySelectorAll('.active');
actives.forEach(item => {
item.classList.remove('active')
})
}
})
/* ----------------------------------------------------------------
ALL
---------------------------------------------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ----------------------------------------------------------------
HEADER
---------------------------------------------------------------- */
header {
background-color: rgb(235, 235, 235);
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .5), inset 0px 5px #C44816;
padding-top: 5px;
position: fixed;
width: 100%;
}
header ul {
margin: 0;
padding: 5px;
list-style: none;
overflow: hidden;
background-color: rgb(235, 235, 235);
}
header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid rgb(225, 225, 225);
border-left: 1px solid rgb(225, 225, 225);
text-decoration: none;
color: #333;
}
header li a:hover {
background-color: rgb(225, 225, 225);
}
.logo {
display: block;
float: left;
font-size: 20px;
padding: 10px 20px;
text-decoration: none;
color: #333;
}
.logo span {
vertical-align: bottom;
display: inline-block;
}
header .menu {
/* check this */
position: relative;
/* Objectif : cacher le menu par défaut */
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* ----------------- Hamburger menu-icon ----------------- */
header .menu-icon {
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
/* L'icone du menu ne peut pas être sélectionnée par l'utilisateur */
}
header .menu-icon .navicon {
/* Barre du milieu qui disparait en transition */
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
/* Les deux autres barres */
background: #333;
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
}
header .menu-icon .navicon:before {
/* Barre du bas */
top: 5px;
}
header .menu-icon .navicon:after {
/* Barre du haut */
top: -5px;
}
/* ----------------- Hamburger Menu button behavior ----------------- */
header .menu-btn {
display: none;
}
header .menu-btn:checked~.menu {
max-height: 100vh;
/* check this */
overflow: visible;
}
header .menu-btn:checked~.menu-icon .navicon {
/* Barre du milieu qui disparait*/
background: transparent;
}
header .menu-btn:checked~.menu-icon .navicon:before {
/* Barre du bas qui tourne */
transform: rotate(-45deg);
}
header .menu-btn:checked~.menu-icon .navicon:after {
/* Barre du haut qui tourne */
transform: rotate(45deg);
}
header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
/* Les deux barres se croisent en leur milieu */
top: 0;
}
/* ----------------- Sous-catégories ----------------- */
.nav-expand-content {
/* check this */
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100vh;
overflow-y: auto;
transform: translateX(100%);
transition: 0.3s;
visibility: hidden;
}
.active>.nav-expand-content {
transform: translateX(0);
visibility: visible;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .5);
}
.nav-link {
display: flex;
justify-content: space-between;
}
/* ----------------- Media Queries ----------------- */
@media (min-width: 768px) {
header li {
float: left;
}
header li a {
padding: 20px 30px;
}
header .menu {
clear: none;
float: right;
max-height: none;
}
header .menu-icon {
display: none;
}
}
<header>
<nav>
<a href="#" class="logo"><i class="fas fa-globe-asia fa-2x"></i><span>Title<br>Title</span></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="index.php"><i class="fas fa-home mr-2"></i> Accueil</a></li>
<li class="nav-expand"><a href="#" class="nav-link"><span><i class="fas fa-chalkboard-teacher mr-2"></i> Click
here for submenu </span></a>
<ul class="nav-expand-content">
<li><a href="">1</a></li>
<li class="nav-expand"><a href="#" class="nav-link">2</a>
<ul class="nav-expand-content">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
</ul>
</li>
<li class="nav-expand"><a href="#" class="nav-link">3</a>
<ul class="nav-expand-content">
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>
</li>
<li class="nav-expand"><a href="#" class="nav-link">4 : click here for another submenu</a>
<ul class="nav-expand-content">
<li><a href="#">4.1</a></li>
<li class="nav-expand"><a href="#" class="nav-link">Test lvl 3</a>
<ul class="nav-expand-content">
<li class="nav-expand"><a href="#" class="nav-link">Test lvl 4</a>
<ul class="nav-expand-content">
<li class="nav-expand"><a href="#">Test lvl 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</li>
</ul>
</nav>
</header>