/ / Obere Taste mit fester Breite - zurb-foundation

Obere Schaltfläche mit fester Breite - zurb-foundation

Ist es möglich, feste Breite Schaltfläche in der oberen Leiste (mit voller Höhe) zu erstellen. Ich brauche eine Synchronisierung catalog button mit categories list aus einem anderen Zeilenabschnitt.

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

.catalog-button sollte oben sein .column3.sidebar und haben die gleiche Breite. (Auf der ersten Seite Katalog sollte immer geöffnet sein und haben Sie im Content-Bereich (Spalte3), auf anderen Seiten öffnet sich mit dem Mauszeiger und im Content-Bereich Inhalt haben alle 12 Spalten Breite aber Dropdown sollte die gleiche Ansicht haben)

Feststehender Knopf an der oberen Leiste

Antworten:

1 für die Antwort № 1

Schau dir dieses Live-Beispiel an, tel, was denkst du: 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>

Und einfaches 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;
}

Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen