代码之家  ›  专栏  ›  技术社区  ›  user6780526

小型设备上的水平导航栏滚动

  •  0
  • user6780526  · 技术社区  · 7 年前

    我正在使用bootstrap 4。我使用创建了第二个导航栏

    <div class="nav-active-border b-danger bottom">
        <ul class="nav nav-active-border b-warning flex-row">
           <li class="nav-item">Link 1</li>
           <li class="nav-item">Link 2</li>
           <li class="nav-item">Link 3</li>
           <li class="nav-item">Link 4</li>
           <li class="nav-item">Link 5</li>
           <li class="nav-item">Link 6</li>
           <li class="nav-item">Link 7</li>
           <li class="nav-item">Link 8</li>
           <li class="nav-item">Link 9</li>
        </ul>
    </div>
    

    然而,在手机上显示两行中有多个项目。如何在手机上为这些导航项目创建一个水平滚动条,其中的指示器仅用于手机布局。它在台式机和笔记本电脑上表现完美

    我正试图在谷歌上实现同样的目标 https://www.google.co.in/intl/en/about/products/

    1 回复  |  直到 7 年前
        1
  •  1
  •   Carol Skelly    7 年前

    我使用flexbox实用程序类通过Bootstrap 4创建了类似的内容。

    使用一个小jQuery来切换 justify-content-end 类,该类将导航项目与右侧对齐,而不是与左侧对齐。您可以切换以向任一方向滑动导航。CSS过渡用于滑动动画。

    演示: https://www.codeply.com/go/IHwAx16j14

    <div class="container">
        <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
                <a href="#" class="btn-left btn-link toggle p-2"><i class="ion-chevron-left"></i></a>
            </div>
            <div class="flex-grow-1 w-100 o-hidden">
                <ul class="nav nav-fill text-uppercase position-relative flex-nowrap">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Self</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">World</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Lifestyle</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Bio</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Politics</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Local</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Science</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Tech</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Health</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Food</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Design</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Culture</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Travel</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">More</a>
                    </li>
                </ul>
            </div>
            <div class="flex-shrink-0">
                <a href="#" class="btn-right btn-link toggle p-2"><i class="ion-chevron-right"></i></a>
            </div>
        </div>
    </div>
    

    jQuery

    $('.toggle').click(function(){
        $('.nav').toggleClass("justify-content-end");
    });
    

    CSS

    .o-hidden {
        overflow:hidden;
    }
    
    .nav {
        transition: transform 0.4s;
        transform: translateX(50%);
        left: -50%;
    }
    
    .nav.justify-content-end {
        transform: translateX(0);
        left: 0;
    }