Il convient de noter que la boîte du menu secondaire doit être ouverte à l'intérieur de la plus grande boîte et non d'un div avec la navigation. Voici l'effet obtenu, mais il est un peu bâclé. Le style spécifique doit être ajusté par vous-même.
Le code spécifique est le suivant :
Code HTML:
<div class="Header">
<div class="HeaderBody" @mouseleave="clearActiveIndex">
<div class="headerBox">
<div class="Logo">
<img class="headerLogo" src="@/ assets/logo.png" />
</div>
<div class="menu">
<ul>
<li
v-for="(item, index) in menuItems"
:key="index"
:class="{ active :activeIndex === index }"
@mouseover="setActiveIndex(index)"
>
{
{ item }}
</li>
</ul>
</div>
<!-- 语言切换 -->
<div class="HeaderLanguage">
<span style="padding-right:10px" :class="{ active: isActive1 }" @click="toggleActive(1)" >
中文{
{$t('appHeader.pickerTitle') }}</span
>
<span :class="{ active: isActive2 }" @click="toggleActive(2)"
>Eng</span
>
<!-- <van- nav-bar
:title="$route.name"
:left-text="$t('appHeader.back') || '返回'"
:right-text="$t('appHeader.pickerTitle') || 'Sélection de la langue'"
flèche gauche
@click-left="handleBack"
@click-right="handleSelectLang"
/> -->
</div>
</div>
<
ul class="twoUl" v-if="activeIndexFlag">
<li
class="TwoList"
v-for="(subItem, subIndex) in subMenuItems"
:key="subIndex "
>
{
{ subItem }}
</li>
</ul>
</div>
</div>
Variables déclarées par data :
isActive2 : faux, langue : 'zh' } ; },
méthode js :
méthodes : {
//显示
setActiveIndex(index) {
this.activeIndex = index;
this.activeIndexFlag = true ;
},
//
réglerclearActiveIndex() {
this.activeIndex = null;
this.activeIndexFlag = false;
},
}
style css :
<style lang="less" scoped>
.HeaderBody {
display : flex ;
justifier-contenu : espace-entre ;
align-items : centre ; /* centrage vertical*/
flex-direction : colonne ;
couleur d'arrière-plan : #262d5f ; / * Rouge, la transparence est de 0,5 */
box-sizing: border-box;
}
.HeaderBody:hover {
// background-color: #262d5f; /* Rouge, la transparence est de 0,5 */ //
transition : background-color 1s easy; /* Propriétés de transition*/
// opacité : 0,7 ;
}
.headerBox {
display : flex ;
align-items : center ;
width : 100 % ;
}
.Header {
position : fixe ;
z-index : 50 ;
haut : 0 ;
gauche : 0;
largeur : 100 % ;
}
.Logo {
padding-left : 50px ;
}
.headerLogo {
largeur : 50 px ;
hauteur : 50px ;
}
.menu {
affichage : flex ;
justifier-contenu : centre ;
couleur d'arrière-plan : rgba(0, 0, 0, 0);
largeur : 800 px ;
couleur : #ffffff ;
}
ul
{
affichage : flex ;
style de liste : aucun ;
remplissage : 0 ;
marge : 0 ;
colonnes : 2 ;
}
li
{
position : relative ;
indice z : 2 ;
remplissage : 10px 20px ;
curseur : pointeur ;
transition : facilité de couleur d'arrière-plan de 0,3 s ;
}
li
::après {
contenu: "";
position : absolue ;
bas : 0 ;
gauche : 0 ;
}
li:hover::after {
transform: scaleX(1);
}
ul ul {
position : absolue ;
affichage : aucun ;
couleur d'arrière-plan : #262d5f ; /* 红色，透明度为 0,5 */
list-style-type: disc;
}
li
:hover > ul {
display: bloc;
}
.twoUl {
dimensionnement de la boîte : bordure-boîte ;
largeur : 50 % ;
hauteur : 100 % ;
remplissage à gauche : 4 % ;
couleur : #ffffff ;
affichage : flexible ;
justifier-contenu : centre ;
flex-wrap : envelopper ;
}
.DeuxListe {
largeur : calc(100% / 2 - 30px) ;
affichage : flexible ;
remplissage : 10 px ;
dimensionnement de la boîte : bordure-boîte ;
flex-wrap : envelopper ;
}
.TwoList:hover {
border-bottom: solid 1px #fff;
transition : transformation facile en 0,3 s ;
}
// 语言切换
.HeaderLanguage {
color: rgb(196, 192, 192);
taille de police : 12 px ;
poids de la police : plus gras ;
curseur : pointeur ;
}
.active {
couleur : #ffffff;
bordure inférieure : 3px solide #91d010 ;
}
//
轮播图
.swiper-slide {
width: 100%;
}
.swiper-slide img {
largeur : 100 % ;
hauteur : 4rem ;
}
</style>
Lien effet écran : https://live.csdn.net/v/302286?spm=1001.2014.3001.5501
enfin
Merci d'avoir lu. Si vous avez des lacunes, n'hésitez pas à en discuter dans la zone de commentaires !