Zurb Foundation的顶栏在小屏幕上不起作用
Zurb Foundation top-bar not working on small screens
我刚刚开始使用基金会,坦率地说,自从我建立我的最后一个网站已经有一段时间了。所以请对我耐心点。
我处理我的菜单(顶部栏)的一个问题,现在超过一天,找不到一个线索是什么问题。
问题是,我真的只需要一个基本的菜单,这是切换到小屏幕上的标准汉堡菜单,到目前为止还不错,它应该像文档中演示的那样工作,对吗?但不幸的是,它没有,我不知道为什么。
我希望你能帮助我。我在下面添加了没有内容的代码。文件位于子目录中,这就是为什么所有的目录引用都带有..非常感谢!在
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inas | Ernährungs Coaching</title>
<link rel="stylesheet" href="../css/foundation.css" />
<link rel="stylesheet" href="../css/additionals.css" />
<script src="../js/vendor/modernizr.js"></script>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="row">
<div class="large-12 columns clearfix">
<!-- a header -->
</div>
</div>
<br>
<div class="row">
<div class="small-12 columns">
<!-- Navigation -->
<div class="contain-to-grid sticky">
<nav class="top-bar data-topbar" >
<ul class="title-area" >
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menü</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul>
<li><a href="index.php">Start</a></li>
<li class="divider"><li>
<li><a href="index.php?page=angebot">Angebot</a></li>
<li class="divider"><li>
<li><a href="index.php?page=aktuelles">Aktuelles</a></li>
<li class="divider"><li>
<li><a href="index.php?page=mich">Über Mich</a></li>
<li class="divider"><li>
<li><a href="index.php?page=kontakt">Kontakt</a></li>
</ul>
</section>
</nav>
</div><!-- /navigation -->
</div>
</div>
</div>
<div id="main">
<!-- some content -->
</div>
<div id="footer">
<!-- a footer -->
</div>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.js"></script>
<script src="../js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
比较你的代码行:
<nav class="top-bar data-topbar" >
和Foundation的文档中相应的
<nav class="top-bar" data-topbar role="navigation">
你的错误现在应该很明显,可以阻止顶部栏正常工作。
附加建议:下次您想要使用Foundation的预定义特性时,复制并粘贴代码,然后,然后应用您的更改。似乎你重写了它,并意外地认为"data-topbar"是一个类。附加:在小屏幕(640px范围内)将导航放在顶部
" sticky_on:[小];scrolltop: false"
和显示父链接在移动视图,你将需要
" mobile_show_parent_link:真;"
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: [small]; scrolltop: false; mobile_show_parent_link: true;">
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- 为不同的屏幕分辨率加载css样式的Javascript不起作用
- 为什么引导程序在小屏幕上不起作用
- 基于屏幕大小的动态包含文件不起作用
- 屏幕键盘在 Internet Explorer 中不起作用
- 捕获iframe的屏幕截图 - html2canvas不起作用
- 屏幕宽度检测在internet explorer中不起作用
- 在屏幕调整大小时为引导程序元素分配新类不起作用
- Jquery show hide在大屏幕上不能正常工作.而且在移动设备上完全不起作用
- 检测全屏幕变化在某些android设备上不起作用
- query .js在页面加载时不起作用,仅在屏幕<= 480px时起作用
- Zurb Foundation的顶栏在小屏幕上不起作用
- Javascript屏幕保护程序动画不起作用
- 用javascript在屏幕大小上添加类不起作用
- ng点击在手机屏幕上不起作用