html5css3多级导航栏,简洁的js和CSS3多级导航菜单

最新推荐文章于 2025-05-14 10:11:02 发布

转载最新推荐文章于 2025-05-14 10:11:02 发布 · 842 阅读

文章标签：

#html5css3多级导航栏

这篇博客介绍了如何使用JS和CSS3对基于Bootsnav的多级导航菜单进行美化，包括HTML结构、CSS样式代码示例，以及在不同屏幕尺寸下的响应式设计。通过这段代码，可以为网页创建一款炫酷的导航菜单效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一款基于bootsnav的js和CSS3多级导航菜单效果。该多级导航菜单效果在bootsnav菜单的基础上进行了美化，使效果更加炫酷。

使用方法

在页面中引入bootstrap相关文件,jquery和bootsnav文件。

HTML结构

该js和CSS3多级导航菜单的HTML结构如下：

CSS样式

然后通过下面的CSS代码来对该js和CSS3多级导航菜单进行美化。

nav.navbar.bootsnav{

border: none;

background: none;

margin-bottom: 150px;

}

nav.navbar.bootsnav ul.nav > li{

margin-right: 10px;

}

nav.navbar.bootsnav ul.nav > li:before{

content: "";

width: 2px;

height: 0;

background: #fff;

margin: 0 auto;

position: absolute;

bottom: 0;

left: 0;

right: 0;

transition: all 0.5s ease 0s;

}

nav.navbar.bootsnav ul.nav > li:hover:before{ height: 25px; }

nav.navbar.bootsnav ul.nav > li.megamenu-fw:before{ left: 11.3%; }

nav.navbar.bootsnav ul.nav > li:after{

content: "";

width: 10px;

height: 10px;

border-radius: 50%;

background: #fff;

margin: 0 auto;

position: absolute;

bottom: 70px;

left: 0;

right: 0;

opacity: 0;

transition: all 0.5s ease 0s;

}

nav.navbar.bootsnav ul.nav > li:hover:after{

bottom: 20px;

opacity: 1;

}

nav.navbar.bootsnav ul.nav > li.megamenu-fw:after{ left: 11.3%; }

nav.navbar.bootsnav ul.nav > li > a{

padding: 15px 15px 35px 15px;

margin: 0;

color: #fff;

text-transform: uppercase;

z-index: 1;

transition: all 0.5s ease 0s;

}

nav.navbar.bootsnav ul.nav > li.dropdown > a{

padding: 15px 30px 35px 15px;

}

nav.navbar.bootsnav ul.nav > li > a:hover{ color: #fff; }

nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{

position: absolute;

margin: 0 0 0 7px;

}

nav.navbar.bootsnav ul.nav > li.dropdown > ul{

top: 120%;

transition: all 0.8s ease 0s;

}

nav.navbar.bootsnav ul.nav > li.dropdown.on > ul{

top: 100%;

}

.dropdown-menu.multi-dropdown{

position: absolute;

left: -100% !important;

}

nav.navbar.bootsnav li.dropdown ul.dropdown-menu{

box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

border: none;

}

nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li{

font-size: 14px;

color: #6f6f6f;

}

nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{

font-size: 16px;

font-weight: bold;

color: #3f3f3f;

}

@media only screen and (max-width:990px){

.dropdown-menu.multi-dropdown{ left: 0 !important; }

nav.navbar.bootsnav .navbar-toggle{

background: none;

color: #fff;

}

nav.navbar.bootsnav ul.nav > li{

margin-right: 0;

}

nav.navbar.bootsnav ul.nav > li:before{

width: 0;

height: 2px;

background: #dca342;

margin: 0;

bottom: 50%;

left: 0;

}

nav.navbar.bootsnav ul.nav > li:hover:before{

width: 25px;

height: 2px;

}

nav.navbar.bootsnav ul.nav > li.megamenu-fw:before{

left: 0;

bottom: 52%;

}

nav.navbar.bootsnav ul.nav > li:after,

nav.navbar.bootsnav ul.nav > li.megamenu-fw:after{

background: #dca342;

margin: 0;

bottom: 50%;

left: auto;

right: 0;

}

nav.navbar.bootsnav ul.nav > li:hover:after{

bottom: 42%;

right: 90%;

}

nav.navbar.bootsnav ul.nav > li:hover.megamenu-fw:after{

bottom: 51.3%;

}

nav.navbar.bootsnav.navbar-mobile ul.nav > li > a{

padding: 15px;

text-align: center;

}

nav.navbar.bootsnav ul.nav > li > a,

nav.navbar.bootsnav ul.nav > li > a:hover{

color: #333;

}

nav.navbar.bootsnav ul.nav > li.dropdown > ul{ top: 100%; }

nav.navbar.bootsnav ul.nav > li.dropdown.on:before,

nav.navbar.bootsnav ul.nav > li.dropdown.on:after{

display: none;

}

nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{

font-size: 14px;

font-weight: normal;

}

html5css3多级导航栏,简洁的js和CSS3多级导航菜单

Title Menu One

Title Menu Two

Title Menu Three

Title Menu Four