CSS菜单浮动半左半右

时间：2014-01-14 14:40:48

标签： jquery html css css3

我想要一种方法让我的菜单左半边和右半边。这样导航栏中间的徽标就像它一样浮动中心，然后一半菜单项位于菜单左侧，另一半位于右侧。

这是我目前代码的工作目录：http://theaamgroup.com/david-programs/brandit/

基本上如果那不明确我想在这里制作这个导航栏： enter image description here

看起来像这样：

enter image description here

HTML 

    <!-- Carousel
    ================================================== -->
    <div id="Carousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <img src="lib/img/carousel/slide-01.jpg" alt="">
        </div>
        <div class="item">
          <img src="lib/img/carousel/slide-02.jpg" alt="">
        </div>
        <div class="item">
          <img src="lib/img/carousel/slide-03.jpg" alt="">
        </div>
      </div>
      <a class="left carousel-control" href="#Carousel" data-slide="prev">&lsaquo;</a>
      <a class="right carousel-control" href="#Carousel" data-slide="next">&rsaquo;</a>
    </div><!-- /.carousel -->    
    <!-- NAVBAR
    ================================================== -->
    <div class="navbar-wrapper">
    <img src="lib/img/logos/Brandit_Logo.png" width="303" height="228" alt="Logos" class="MainLogo"/>
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
      <div class="container">

        <div class="navbar navbar-inverse">
          <div class="navbar-inner">
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#"></a>
            <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
            <div class="nav-collapse collapse">
              <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>

                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="nav-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!--/.nav-collapse -->
          </div><!-- /.navbar-inner -->
        </div><!-- /.navbar -->

      </div> <!-- /.container -->
    </div><!-- /.navbar-wrapper -->

CSS 

/* GLOBAL STYLES
-------------------------------------------------- */
body { padding-bottom: 40px; -webkit-text-size-adjust: none; -webkit-appearance: none; font-family: sans-serif; min-height: 416px; background-image: url('../img/bkg.png'); background-repeat: repeat; }

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper { position: absolute; z-index: 5; margin-top: -85px; width: 100% }
.navbar-wrapper .navbar { }
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner { border: 0; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
/* Downsize the brand/project name a bit */
.navbar .brand { padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */ font-size: 16px; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
.navbar .nav > li > a { padding: 15px 20px }
/* Offset the responsive button for proper vertical alignment */
.MainLogo { position: absolute; left: 50%; right: 0; margin-top: -90px; margin-left: -152px; }

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel { margin-bottom: 60px }
.carousel .container { position: relative; z-index: 10; }
.carousel-control { height: 80px; margin-top: 0; font-size: 120px; text-shadow: 0 1px 1px rgba(0,0,0,.4); background-color: transparent; border: 0; z-index: 10; }
.carousel .item { height: 500px }
.carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; }
.carousel-caption { background-color: transparent; position: static; max-width: 550px; padding: 0 20px; margin-top: 200px; }
.carousel-caption h1,
.carousel-caption .lead { margin: 0; line-height: 1.25; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.carousel-caption .btn { margin-top: 10px }


/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) { 
    .container.navbar-wrapper { margin-bottom: 0; width: auto; }
    .navbar-wrapper { height: 50px; margin-top: -60px; }
    .navbar-inner { margin: -20px 0; }
    .navbar .nav > li { z-index: 0; }
    .MainLogo { margin-top: -115px; }
    .carousel .item { height: 500px }
    .carousel img { width: auto; height: 500px; }
    .marketing { margin-top: 30px; }
    .featurette { height: auto; padding: 0; }
    .featurette-image.pull-left,
    .featurette-image.pull-right { display: block; float: none; max-width: 40%; margin: 0 auto 20px; }
}

@media (max-width: 767px) { 
    .navbar-inner { border-radius: 0; }
    .btn-navbar { position: absolute; left: 85%; z-index: 5; }
    .MainLogo { margin-top: -185px; }
    .carousel .container { }
    .carousel .item { height: 300px }
    .carousel img { height: 300px }
    .carousel-caption { width: 65%; padding: 0 70px; margin-top: 100px; }
    .carousel-caption h1 { font-size: 30px }
    .carousel-caption .lead,
    .carousel-caption .btn { font-size: 18px }
    .marketing .span4 + .span4 { margin-top: 40px }
    .featurette-heading { font-size: 30px }
    .featurette .lead { font-size: 18px; line-height: 1.5; }
}

向我指出正确方向的一点帮助会很棒。提前谢谢！

2 个答案:

答案 0 :(得分：2)

我摆弄了萤火虫中的菜单，并将图片从原始位置移除，并将其作为菜单li中的新元素放置：

<div class="nav-collapse collapse">
  <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><img width="303" height="228" src="lib/img/logos/Brandit_Logo.png" alt="Logos" class="MainLogo"></li>
      <li><a href="#contact">Contact</a></li>
      <li class="dropdown">
         ...

Ans然后我调整了li的css调用，添加：

.navbar .nav > li {
  display: inline-block;

这应该让您在正确的轨道上根据需要完成样式设计。

此外，您可以从float:left;移除.nav，因为position:relative;

不需要{{1}}

答案 1 :(得分：0)

使用2个li元素制作2个ul元素。

<ul>
<li>Home</li>
<li>About></li>
</ul>

<ul>
<li>Contact</li>
<li>Dropdown</li>
</ul>

将第1个放在徽标的左侧（之前），将第2个放在右侧（在＆gt;之后。浮动：需要左侧。

相关问题
最新问题