当前位置:主页 > JavsScript库 > 菜单 / 导航 >

将导航栏转换为底部导航
栏目分类:菜单 / 导航   发布日期:2021-09-28   浏览次数:

一种适合移动设备的导航系统,可将站点菜单转换为小屏幕上的底部导航栏。

如何使用它。

1. 在您的网站上创建一个普通的导航栏。请注意,此示例使用boxicons作为菜单图标。

<header class="header" id="header">
    <nav class="nav container">
        <a href="#" class="nav__logo">马龙</a>
 
        <div class="nav__menu" id="nav-menu">
            <ul class="nav__list">
                <li class="nav__item">
                    <a href="#home" class="nav__link active-link"><i class='bx bx-home-alt nav__icon'></i><span class="nav__name">首页</span></a>
                </li>
                 
                <li class="nav__item">
                    <a href="#about" class="nav__link"><i class='bx bx-user nav__icon'></i><span class="nav__name">关于</span></a>
                </li>
 
                <li class="nav__item">
                    <a href="#skills" class="nav__link"><i class='bx bx-book-alt nav__icon'></i><span class="nav__name">技能</span></a>
                </li>
 
                <li class="nav__item">
                    <a href="#portfolio" class="nav__link"><i class='bx bx-briefcase-alt nav__icon'></i><span class="nav__name">项目</span></a>
                </li>
 
                <li class="nav__item">
                    <a href="#contactme" class="nav__link"><i class='bx bx-message-square-detail nav__icon'></i><span class="nav__name">联系</span></a>
                </li>
            </ul>
        </div>
        <img src="assets/img/perfil.png" alt="" class="nav__img">
    </nav>
</header>

2. 将导航栏转换为底部导航。

@media screen and (max-width: 320px) {
  .nav__name {
    display: none;
  }
}
 
@media screen and (min-width: 576px) {
  .nav__list {
    justify-content: center;
    column-gap: 3rem;
  }
}
 
@media screen and (min-width: 767px) {
  .nav {
    height: 4.5rem; 
  }
  .nav__img {
    display: none;
  }
  .nav__icon {
    display: none;
  }
  .nav__name {
    font-size: .938rem;
  }
  .nav__link:hover {
    color: hsl(174, 63%, 40%);
  }
 
}



官方网站:https://github.com/bedimcode/responsive-bottom-navigation

相关热词: 底部导航导航栏导航

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库