始终可见的汉堡包,并在汉堡包中隐藏一些导航项目,有些应该在汉堡包旁边

时间:2019-05-29 06:26:43

标签: javascript html css bootstrap-4

导航栏的组件,包括一些链接或项目,一个汉堡包,一条垂直线,两个或三个字形图标。

在这些组件中,只有一些物品会被隐藏在汉堡包中,而这些物品会在单击汉堡包后立即显示出来。

所有这些都将在调整为sm的同时一键折叠。

请帮助我

    <div class="container">
        <a class="navbar-brand" href="#"><img src="img/Prothom-alo-logo.png" alt="logo" style="width:40px;"></a>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a href="#">বাংলাদেশ</a>
            </li>
            <li class="nav-item">
                <a href="#">আন্তর্জাতিক</a>

            <li class="nav-item">
                <a href="#">অর্থনীতি</a>
            </li>
            <li class="nav-item">
                <a href="#">মতামত</a>
            </li>
            <li class="nav-item">
                <a href="#">খেলা</a>
            </li>
            <li class="nav-item">
                <a href="#">বিনোদন</a>
            </li>
            <li class="nav-item">
                <a href="#">ছবি</a>
            </li>
            <li class="nav-item">
                <a href="#">ইপেপার</a>
            </li>
            <li class="nav-item">
                <a href="#">উত্তর আমেরিকা</a>
            </li>
        </ul>
        </div>
        <div>
            <button class="btn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                        <a href="#">সব</a>
            </button>
        </div>
        <li class="nav-item">
                <a href="#">ছবি</a>
            </li>
            <li class="nav-item">
                <a href="#">ইপেপার</a>
            </li>
            <li class="nav-item">
                <a href="#">উত্তর আমেরিকা</a>
            </li>
            <li class="nav-item">
                <a href="#">ছবি</a>
            </li>
            <li class="nav-item">
                <a href="#">ইপেপার</a>
            </li>
            <li class="nav-item">
                <a href="#">উত্তর আমেরিকা</a>
            </li>
        <div class="vl"></div>
        <a class ="english" href="#">English</a>
        <span class="glyphicon glyphicon-user"></span>
        <span class="glyphicon glyphicon-search"></span> 
        <span class="glyphicon glyphicon-thumbs-up"></span>
        </div>
    </nav>

写在按钮后面的链接将被隐藏在该按钮中。

0 个答案:

没有答案