修复Zurb Foundation 4中的宽度和粘性导航以及顶部栏

时间:2013-07-21 16:08:51

标签: jquery navigation zurb-foundation sticky fixed-width

我遇到的问题是无法使我的左侧导航栏具有固定的宽度,同时不仅使顶栏,而且还使侧导航栏变粘。

我尝试了所有谷歌搜索结果以及我能找到的所有stackoverflow提示,但仍然没有运气。

我的HTML:

    <!-- Navigation bar -->
<div class="sticky">
    <nav class="top-bar">
            <ul class="title-area">
            <!-- Title Area -->
            <li class="name"><h1><a href="#"><img src="img/logo.png"> </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">
         <ul class="left"></ul>
         <ul class="right">
           <li class="has-form">
              <form>
                  <div class="row collapse">
                      <div class="small-8 columns">
                      <input type="text" name="searchfield">
                      </div>
                      <div class="small-4 columns">
                      <a href="#" class="tiny button">Search</a>
                      </div>
                 </div>
             </form>
           </li>
         </ul>
    </nav>
</section>
</div>

<!-- Main content -->
 <!-- Nav Sidebar -->
<div class="row">
        <div class="large-2 columns">
            <div class="ad">
                      <ul class="side-nav"> 
                                  <li><a class="tnav" href="#">Nachrichten</a></li>
                                  <li><a class="tnav" href="#">Kultur</a></li>
                                  <li><a class="tnav" href="#">Wirtschaft</a></li>
                                  <li><a class="tnav" href="#">Sport</a></li>
                                  <li><a class="tnav" href="#">Wissenschaft</a></li>
                                  <li><a class="tnav" href="#">Englisch</a></li>
                                  <li><a class="tnav" href="#">Technologie</a></li>
                      </ul>   
            </div>    
    </div>
<!-- Start Tiles -->
<div id="tiles" class="large-10 columns"s></div>
</div>

我的代码在这里: http://jsfiddle.net/TPbhD/2/

在此处查看预览: http://jsfiddle.net/TPbhD/2/embedded/result/

想法模板:

Template of idea

0 个答案:

没有答案