下拉菜单并在bootstrap中添加导航栏选项

时间:2015-12-03 14:14:48

标签: jquery html css twitter-bootstrap

我已经下载了一个主题并根据我的需要定制了它,它是一个boostrap主题,我根据我的需要添加了导航栏选项,但我有两个问题,一个是我无法在其中创建一个下拉菜单,其次是它有限的导航栏选项,如果我尝试添加超出其空间的选项,它会变得混乱并创建一个新的导航栏,我想在右角有一个小选项按钮,如果有更多导航栏而不是限制将出现,它将下拉剩余导航栏选项,我想知道是否有人可以帮我解决这两个问题,请求帮助我这是非常重要的项目,我必须尽快提交,这是我的导航条代码

<div class="row h_menu">
    <nav class="navbar navbar-default navbar-left" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="<?php if($active == 'index') echo 'active'; ?>"><a href="index.php">Home</a></li>
                <li class="<?php if($active == 'academic') echo 'active'; ?>"><a href="academic.php">Academic</a></li>
                <li class="<?php if($active == 'about') echo 'active'; ?>"><a href="about.php">About</a></li>
                <li class="<?php if($active == 'contact') echo 'active'; ?>"><a href="contact.php">Contact</a></li>
                <li class="<?php if($active == 'admission') echo 'active'; ?>"><a href="login.php">Admission</a></li>
                <li class="<?php if($active == 'faculty') echo 'active'; ?>"><a href="faculty_cs.php">Faculty</a></li>
                <li class="<?php if($active == 'downloads') echo 'active'; ?>"><a href="downloads.php">Downloads</a></li>
                <li class="<?php if($active == 'gallery') echo 'active'; ?>"><a href="events.php">Events</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
        <!-- start soc_icons -->
    </nav>
    <div class="soc_icons navbar-right">
        <ul class="list-unstyled text-center">
            <li><a href="https://twitter.com/bbsulsindh"><i class="fa fa-twitter"></i></a></li>
            <li><a href="https://www.facebook.com/BBSULOfficial"><i class="fa fa-facebook"></i></a></li>
        </ul>
    </div>
</div>

导航栏图片:

enter image description here

http://postimg.org/image/s8a6z1j9p/

0 个答案:

没有答案