多个导航栏配置？

时间：2015-09-17 05:36:49

标签： html css twitter-bootstrap-3

我是css的新手，我做了一个简单的项目，我在我的网站上放了2个导航栏。第一个导航栏是默认导航栏。当我点击第一个导航栏中的按钮时，第二个传递给它。由于css文件的配置不佳，我已经覆盖了下面的一个。某些链接无效（登录链接）。我该如何分开它们。我用两个例子来做这件事。

这是css文件。

第一个Navbar 

.navbar-default {
  background-color: #022436;
  border-color: #2b4156;
}
.navbar-default .navbar-brand {
  color: #fdfdff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #029fe5;
}
.navbar-default .navbar-text {
  color: #fdfdff;
}
.navbar-default .navbar-nav > li > a {
  color: #fdfdff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #029fe5;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #022436;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #fdfdff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #029fe5;
  background-color: #2b4156;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #022436;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #029fe5;
  background-color: #2b4156;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #029fe5;
  background-color: #2b4156;
}
.navbar-default .navbar-toggle {
  border-color: #2b4156;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #2b4156;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fdfdff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #fdfdff;
}
.navbar-default .navbar-link {
  color: #fdfdff;
}
.navbar-default .navbar-link:hover {
  color: #029fe5;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #fdfdff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #029fe5;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #029fe5;
    background-color: #2b4156;
  }
}

这是代码用于登录css代码

#login-dp{
    min-width: 250px;
    padding: 14px 14px 0;
    overflow:hidden;
    background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
    font-size:12px    
}
#login-dp .bottom{
    background-color:rgba(255,255,255,.8);
    border-top:1px solid #ddd;
    clear:both;
    padding:14px;
}
#login-dp .social-buttons{
    margin:12px 0    
}
#login-dp .social-buttons a{
    width: 49%;
}
#login-dp .form-group {
    margin-bottom: 10px;
}
.btn-fb{
    color: #fff;
    background-color:#3b5998;
}
.btn-fb:hover{
    color: #fff;
    background-color:#496ebc; 
}
.btn-tw{
    color: #fff;
    background-color:#55acee;
}
.btn-tw:hover{
    color: #fff;
    background-color:#59b5fa;
}
@media(max-width:768px){
    #login-dp{
        background-color: inherit;
        color: #fff;
    }
    #login-dp .bottom{
        background-color: inherit;
        border-top:0 none;
    }
}

这是第二个导航栏（当按钮被锁定时，落在第一个navabar上）

.navbar-brand { position: relative; z-index: 2; }

.navbar-nav.navbar-left .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }

.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-left > li:last-child { padding-left: 100px; }

.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0px; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 50%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: left; }

.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }

.navbar-nav.navbar-left .btn:not(.collapsed) {
    background-color: rgb(111, 84, 153);
    border-color: rgb(111, 84, 153);
    color: rgb(255, 255, 255);
}

.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
    height: auto !important;
    transition: transform 0.3s;
    transform: translate(0px,-50px);
}

.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
    transform: translate(0px,0px);
}


@media screen and (max-width: 767px) {
    .navbar .navbar-collapse .navbar-left > li:last-child { padding-left: 15px; padding-right: 15px; } 

    .navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
    .navbar .nav-collapse .navbar-form { margin: 0; }
    .nav-collapse>li { float: none; }

    .navbar.navbar-default .nav-collapse,
    .navbar.navbar-inverse .nav-collapse {
        transform: translate(-100%,0px);
    }
    .navbar.navbar-default .nav-collapse.in,
    .navbar.navbar-inverse .nav-collapse.in {
        transform: translate(0px,0px);
    }

    .navbar.navbar-default .nav-collapse.slide-down,
    .navbar.navbar-inverse .nav-collapse.slide-down {
        transform: translate(0px,-100%);
    }
    .navbar.navbar-default .nav-collapse.in.slide-down,
    .navbar.navbar-inverse .nav-collapse.in.slide-down {
        transform: translate(0px,0px);
    }
}

如果我有人能解释如何使用姓名或数字将它们分开，那将不胜感激。

这些导航栏都包含在标头标签

中

                      

      <div class="navbar-header">

            <a class="navbar-brand" href="#/">Web Name</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#/"><span class="glyphicon glyphicon-home"> Home</span></a></li>
                <li><a href="#/about"><span class="glyphicon glyphicon-star"> About us</span></a></li>
                <li><a href="#/contact"><span class="glyphicon glyphicon-phone-alt"> Contact us</span></a></li>
                <li><a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Categories</a></li>
            </ul>
            <ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1"> <!--The 2nd Navbar-->
                <li><a href="#">Action 1</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
                <li><a href="#">Action 4</a></li>
            </ul>
            <!--</div>-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/signup"><span class="glyphicon glyphicon-user"> Sign up</span></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-log-in"></span> Log-in <b class="caret" style="color:white"></b></a>
                    <ul id="login-dp" class="dropdown-menu">
                        <li>
                            <div class="row">
                                <div class="col-md-12">
                                    Login via,

                                    <div class="social-buttons">
                                        <a href="#" class="btn btn-fb"><i class="fa fa-facebook"> Facebook</i></a>
                                        <a href="#" class="btn btn-tw"><i class="fa fa-twitter"> Twitter</i></a>
                                    </div>

                                    or

                                    <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                                        <div class="form-group">
                                            <label class="sr-only" for="inputEmail">E-mail</label>
                                            <input type="email" class="form-control" id="inputEmail" placeholder="E-mail address" required />
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="inputPassword">Password</label>
                                            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required />
                                            <div class="help-block text-right"><a href="#">Forgot password?</a></div>
                                        </div>
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary btn-block"> Sign in </button>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" /> Keep me logged-in
                                            </label>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>
</nav>

1 个答案:

答案 0 :(得分：0)

不确定您是指第二个导航栏还是导航栏中的下拉菜单。您构建导航栏的方式我假设您想要一个导航栏和该导航栏中的下拉列表。

这是一个有用的版本http://plnkr.co/edit/EDogb0HQhRzqOlaLng7J 希望这是你想要实现的目标。

您的代码中缺少一些内容。 我已添加了移动全部折叠的按钮菜单。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

您希望在第一个内插入第二个以创建下拉列表。

<ul class="nav navbar-nav navbar-left">
    <li>
        <a href="#/">
            <span class="glyphicon glyphicon-home"> Home</span>
        </a>
    </li>
    <li>
        <a href="#/about">
            <span class="glyphicon glyphicon-star"> About us</span>
        </a>
    </li>
    <li>
        <a href="#/contact">
            <span class="glyphicon glyphicon-phone-alt"> Contact us</span>
        </a>
    </li>
    <li class="dropdown">
        <a class="btn btn-default btn-outline btn-circle dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Categories</a>
        <ul class="dropdown-menu" id="nav-collapse2">
          <!--The 2nd Navbar-->
        <li>
            <a href="#">Action 1</a>
        </li>
        <li>
            <a href="#">Action 2</a>
        </li>
        <li>
            <a href="#">Action 3</a>
        </li>
        <li>
            <a href="#">Action 4</a>
        </li>
    </ul>
    </li>
</ul>
相关问题
最新问题