文章预览
标题导航的响应下拉菜单,该菜单利用CSS3媒体查询来检测屏幕尺寸,并在达到最大屏幕宽度时将水平菜单项折叠为全屏滑动切换菜单。
点击下载
如何使用它:
1.从嵌套的导航列表创建多级标题导航,如下所示:
<header>
<div class="logo">YOUR LOGO HERE</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="sub-menu"><a href="#">Services</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Team</a></li>
<li class="sub-menu"><a href="#"><a href="https://www.jqueryscript.net/tags.php?/Portfolio/">Portfolio</a></a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<a href="https://www.jqueryscript.net/menu/">Menu</a> Toggler Here
</div>
</header>
2.常规下拉菜单的CSS样式。
/* Header */
header {
position: absolute;
top: 0;
left: 0;
padding: 0 100px;
background: #262626;
width: 100%;
box-sizing: border-box;
}
/* LOGO */
header .logo {
color: #FFF;
height: 50px;
line-height: 50px;
font-size: 24px;
float: left;
font-weight: bold;
}
/* Dropdown Nav */
header nav {
float: right;
}
/* UL */
header nav ul {
margin: 0;
padding: 0;
display: flex;
}
/* Nav Items */
header nav ul li {
list-style: none;
position: relative;
}
/* Sub-menu */
header nav ul li.sub-menu:before {
content: '\f0d7';
font-family: fontAwesome;
position: absolute;
line-height: 50px;
color: #FFF;
right: 5px;
cursor: pointer;
}
header nav ul li.active.sub-menu:before {
content: '\f0d8';
}
header nav ul li ul {
position: absolute;
left: 0;
background: #333;
display: none;
}
header nav ul li.active ul {
display: block;
}
header nav ul li ul li {
display: block;
width: 200px;
}
header nav ul li a {
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #FFF;
text-decoration: none;
display: block;
}
header nav ul li a:hover, header nav ul li a.active {
color: #FFF;
background: #2196f3;
}
3.切换菜单的CSS样式。
/* Toggle Button */
.menu-toggle {
color: #FFF;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
/* Media Queries */
@media (max-width: 991px) {
header {
padding: 0 20px;
}
.menu-toggle {
display: block;
}
header nav {
position: absolute;
width: 100%;
height: calc(100vh - 50px);
background: #333;
top: 50px;
left: -100%;
transition: 0.5s;
}
header nav.active {
left: 0;
}
header nav ul {
display: block;
text-align: center;
}
header nav ul li a {
border-bottom: 1px solid rgba(0,0,0,.2);
}
header nav ul li.active ul {
position: relative;
background: #003e6f;
}
header nav ul li ul li {
width: 100%;
}
}
4.在小屏幕上运行时,用于启用切换按钮以打开/关闭菜单的核心JavaScript。
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('nav').toggleClass('active');
});
$('ul li').click(function(){
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
})
})
………………………………