Question

是否可以在顶栏中创建固定宽度按钮（全高）。我需要从另一个行部分catalog button与categories list进行同步。

 .top-bar
    .catalog-button
    ...
 .row
    .column3.sidebar
    .column9.maincontent
 // some elements omitted, just for illustration

.catalog-button应高于.column3.sidebar且宽度相同。（首页目录应始终打开并放在内容部分（第3列），其他页面按悬停打开，在内容部分内容中所有12列宽度但下拉列应具有相同的视图）

Top-bar fixed button

Answer 1

查看此实例，请看看您的想法：http://jsbin.com/razefe/1

<div class="medium-1 columns" id="sidebar">

    <ul class="side-nav">
        <li id="title" class="link-rightbar"><a href="#">Catalog</a></li>
        <li class="link-rightbar"><a href="#">Link 1</a></li>
        <li class="link-rightbar"><a href="#">Link 2</a></li>
        <li class="link-rightbar"><a href="#">Link 3</a></li>
        <li class="link-rightbar"><a href="#">Link 4</a></li>
    </ul>    

</div>
<div class="medium-11 columns" id="content">
      <nav class="top-bar" data-topbar>
        <ul class="title-area">
          <li class="name">
            <h1><a href="#">My Site</a></h1>
          </li>
           <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
          <!-- Right Nav Section -->
          <ul class="right">
            <li class="active"><a href="#">Right Button Active</a></li>
            <li class="has-dropdown">
              <a href="#">Right Button Dropdown</a>
              <ul class="dropdown">
                <li><a href="#">First link in dropdown</a></li>
              </ul>
            </li>
          </ul>

          <!-- Left Nav Section -->
          <ul class="left">
            <li><a href="#">Left Nav Button</a></li>
          </ul>
        </section>
      </nav>

        <div class="content">
                <p>psum dolor sit amet, consectetur adipisicing elit. Illo provident, fugiat reprehenderit, minima nihil odit, quo repudiandae quam magnam est consequatur laudantium voluptas vero excepturi eos a, laboriosam atque rerum?</p>
        </div>
</div>

简单的CSS

#title {
  height:45px;
  background: #6BC369;
}

.side-nav {
  padding:0px;
}

#sidebar {
  padding-right:0px;
}

#content {
  padding-left:0px;
}


.link-rightbar {
  margin: 0px !important;
}


.link-rightbar > a {
  color: black !important;
  padding: 16px 15px !important;
}

固定宽度顶部按钮

1 个答案: