基金會f6頂欄似乎沒有工作

我下載了基礎6「基本」。這裏：http://foundation.zurb.com/sites/download.html/基金會f6頂欄似乎沒有工作

此下載的index.html文件是示例頁面的條目。

我決定，我想這個模塊被稱爲「F6頂吧」融入例如基礎index.html頁面的頂部： http://zurb.com/building-blocks/f6-top-bar

要做到這一點，我做了以下內容：

我複製「F6頂吧」，這裏的HTML代碼：

http://zurb.com/building-blocks/f6-top-bar

到基座6下載index.html頁面的index.html文件。

我再複製的「F6頂吧」的CSS這裏：

http://zurb.com/building-blocks/f6-top-bar

到基座6 index.html頁面

最終的結果是的app.css文件不是具有漢堡風格圖標的響應式菜單。它只是一個靜態的無序列表。

我在做什麼錯？

HTML

<!doctype html> 
<html class="no-js" lang="en" dir="ltr"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Foundation for Sites</title> 
    <link rel="stylesheet" href="css/foundation.css"> 
    <link rel="stylesheet" href="css/app.css"> 
    </head> 
    <body> 
    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium"> 
    <button class="menu-icon" type="button" data-toggle></button> 
    <div class="title-bar-title">Menu</div> 
</div> 

<div class="top-bar" id="main-menu"> 
    <div class="top-bar-left"> 
    <ul class="dropdown menu" data-dropdown-menu> 
     <li class="menu-text">Site Title</li> 
    </ul> 
    </div> 
    <div class="top-bar-right"> 
    <ul class="menu" data-responsive-menu="drilldown medium-dropdown"> 
     <li class="has-submenu"> 
     <a href="#">One</a> 
     <ul class="submenu menu vertical" data-submenu> 
      <li><a href="#">One</a></li> 
      <li><a href="#">Two</a></li> 
      <li><a href="#">Three</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></li> 
    </ul> 
    </div> 
</div> 
    <script src="js/vendor/jquery.js"></script> 
    <script src="js/vendor/what-input.js"></script> 
    <script src="js/vendor/foundation.js"></script> 
    <script src="js/app.js"></script> 
    </body> 
</html>

CSS/app.css

body { 
    margin-top: 2rem; 
} 

.title-bar { 
    background: #333; 
    padding: 0.9rem; 
} 

.top-bar { 
    background: #333; 
} 

.top-bar ul { 
    background: #333; 
} 

.top-bar ul li { 
    background: #333; 
} 

.top-bar ul li a { 
    color: #fff; 
} 

.menu-text { 
    color: #fff; 
} 

@media only screen and (max-width:40em) { 
    .menu-text { 
    display: none !important; 
    } 

} 

@media only screen and (min-width:40em) { 
    .menu:last-child { 
    border-left: 1px solid #4e4e4e; 
    } 

    .menu:first-child { 
    border-left: none; 
    } 

    .menu li:not(:last-child) { 
    border-right: 1px solid #4e4e4e; 
    } 

} 

.dropdown.menu .submenu { 
    border: none; 
} 

.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after { 
    border-color: #fff transparent transparent; 
} 

.is-drilldown-submenu-parent > a::after { 
    border-color: transparent transparent transparent #fff; 
} 

.js-drilldown-back::before { 
    border-color: transparent #fff transparent transparent; 
}

最終結果:(

來源

2016-09-17 William

答案是這需要基礎「完整」。基礎「必不可少」是行不通的。

來源

2016-09-17 02:18:33 William

基金會f6頂欄似乎沒有工作

回答

相關問題