Javascript 基于运动UI的TopBar动画6 使用基础6,我尝试得到一个响应性的TopBar,它涉及到一个动画(小屏幕)。p>
我有这个:Javascript 基于运动UI的TopBar动画6 使用基础6,我尝试得到一个响应性的TopBar,它涉及到一个动画(小屏幕)。p>,javascript,html,css,css-animations,zurb-foundation-6,Javascript,Html,Css,Css Animations,Zurb Foundation 6,我有这个: <div class="top-bar"> <div class="top-bar-title"> <strong>MyTitle</strong> <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="responsive-menu">
<div class="top-bar">
<div class="top-bar-title">
<strong>MyTitle</strong>
<span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="responsive-menu">
<span class="menu-icon" data-toggle></span>
</span>
</div>
<div id="responsive-menu" data-toggler data-animate="hinge-in-from-top spin-out"> <!-- no matter the type of animation is -->
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="#">1</a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>
</div>
MyTitle
-
但即使在导入运动ui库后,也不会发生转换。只需将菜单的大致
display:none
切换到display:block
,反之亦然
当我用数据切换
替换数据响应切换
时,它可以工作,但我会失去响应
是关于基金会6的一个错误吗?< /P> < P>我也有同样的问题。通过在第一个div中添加数据切换和数据响应切换解决了此问题:
<div class="top-bar" data-toggle="navmenu" data-responsive-toggle="navmenu" data-hide-for="medium">
<button class="menu-icon" type="button" ></button>
<div class="title-bar-title">Menu</div>
</div>
<nav class="top-bar" id="navmenu" data-toggler data-animate="fade-in fade-out">
<div class="top-bar-left">
<ul class="menu">
<li>Left Item 1</li>
<li>Left Item 2</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>Right Item 1</li>
<li>Right Item 2</li>
</ul>
</div>
</nav>
菜单
- 左项1
- 左项目2
- 右项1
- 右项目2