始終顯示Foundation 5 off-canvas菜單
[英]Foundation 5 off-canvas menu always appears
問題描述
我很難在Foundation 5中使用我的非畫布菜單來打開和關閉，或者至少不會總是出現在畫布上。 下面是當前網站的圖片。
這是我到目前為止運行的HTML。 內容不包含在單獨的YAML文件中，但它應該是不必要的。
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/assets/img/logo/sjpminilogo.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }} | Paly SJP</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/syntax.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/foundation/css/foundation.css">
<link rel="stylesheet" href="/assets/foundation/css/normalize.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<script type="text/javascript" src="/assets/foundation/js/custom.modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
</head>
<body>
<div class="site">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="header">
<!-- Top Bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="/">Paly SJP</a></h1>
</li>
</ul>
<!-- All tabs on right side -->
<section class="top-bar-section">
<ul class="right">
<li class="name">
<a href="/about.html">ABOUT US</a>
</li>
<li class="name">
<a href="/calendar.html">CALENDAR</a>
</li>
<li class="has-dropdown not-click"><a href="#">COHORTS</a>
<ul class="dropdown">
<li><a href="/cohorts/one/about.html">COHORT 1</a></li>
<li><a href="/cohorts/two/about.html">COHORT 2</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<!-- Side bar -->
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>
Paly SJP
</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Menu</label>
</li>
<li>
<a href="/">Paly SJP</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="about.html">Calendar</a>
</li>
<li>
<label>Cohorts</label>
</li>
<li style="background-color: #3B3B3B">
<a href="/cohort/one.html">Cohort 1</a>
</li>
</ul>
</aside>
<div class="content">
{{ content }}
</div>
<div class="footer">
<div class="row">
<div class="large-12 columns">
<h6 style="color:#ffffff; margin-top:24px; font-size:14px;">Keep in touch!</h6>
<a href="https://twitter.com/palysocjustice" target="_blank">
<img src="/assets/img/logo/footer/twitter.png" class="logo" /></a>
<a href="https://www.facebook.com/pages/Paly-Social-Justice-Pathway/1481478495402897" target="_blank">
<img src="/assets/img/logo/footer/facebook.png" class="logo" /></a>
<a href="http://palysocialjustice.blogspot.com/" target="_blank">
<img src="/assets/img/logo/footer/blogspot.png" class="logo" /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/assets/foundation/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.clearing.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript" src="/assets/js/custom.js"></script>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
1 個解決方案
解決方案1
2 已采納 2016-01-30 23:50:37
如果您使用Chrome中的開發人員工具或您正在使用的任何瀏覽器檢查aside元素，則不會顯示與left-off-canvas-menu類關聯的樣式。
重新上傳完整的foundation.css文件以確保應用適當的樣式。
Foundation 5畫布菜單最低代碼？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.