我有麻烦挂钩关闭帆布导航为基础5.不显示列表和标签栏跳下几个距时关闭帆布导航是有效的。
这是我的HTML标记:
<div class="marketing off-canvas-wrap">
<div class="inner-wrap">
<!--
-->
<div class="fixed">
<nav class="top-bar docs-bar hide-for-small" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="index.html">website</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="#">home</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
</nav>
<!--
-->
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon">
<aside class="left-off-canvas-menu">
<ul class="title-area">
<li class="name">
<h1><a href="index.html">website</a></h1>
<ul class="off-canvas-list">
<li><a href="#">home</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Contact</a></li>
</ul>
</aside>
<a class="exit-off-canvas" href="#"></a>
</nav>
</div>
<!--
-->
CSS:
.top-bar{
padding-top:20px;
padding-right:20px;
padding-left:20px;
}
.top-bar-section ul,
.top-bar-section ul li,
.top-bar-section ul li.active > a,
.top-bar-section li a:not(.button),
.top-bar-section li a:not(.button):hover,
.top-bar-section ul li.active > a:hover {
font-family: 'Playfair Display SC', serif;
background: white;
color: black;
}
.tab-bar,
.tab-bar ul, li{
padding: 0,0;
margin: 0,0;
background:white;
color: black;
}