有一些代码
<aside class="fixed-col">
<div class="fix-wrap cf">
<div class="fixed-col-inner">
<h1>LOREMr</h1>
<div class="menu-button">
<a href="#" onclick="return false" class="close-menu"></a>
</div><!-- menu-button -->
<input type="text" id="search" placeholder="search...">
<button class="search-button"></button>
<div class="fav-wrap">
<a href="#" class="fav">fav (0)</a>
</div><!-- fav-wrap -->
<div class="menu-side">
<div class="main-menu-wrap">
<img src="img/userpic.png" height="31" width="31" alt="">
<a href="#" class="username">username</a>
<a href="#" class="logout">logout</a>
<ul class="main-nav">
<li><a href="#">articles</a></li>
<li class="last-li"></li>
</ul>
</div><!-- main-menu-wrap -->
<ul class="second-nav">
<li class="open-hidden-nav">
<a href="#">HOVER HERE</a>
<div class="hidden-nav">
<h4>123</h4>
<ul class="home-menu-list">
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
</ul>
<h4>222</h4>
<ul class="decor-menu-list">
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
</ul>
</div><!-- hidden-nav -->
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div><!-- menu-side -->
<ul class="social">
<li class="facebook"><a href="#"></a></li>
</ul>
</div><!-- fixed-col-inner -->
</div><!-- fix-wrap -->
</aside><!-- fixed-col -->
<aside class="fixed-col-closed">
<div class="fix-wrap">
<div class="fixed-col-closed-inner">
<div class="menu-button">
<a href="#" onclick="return false" class="open-menu"></a>
</div><!-- menu-button -->
<ul class="closed-fav">
<li class="fav-ico"></li>
<li><a href="#">0</a></li>
</ul>
<ul class="closed-social">
<li class="facebook"><a href="#"></a></li>
<li class="vk"><a href="#"></a></li>
</ul>
</div>
</div><!-- fix-wrap -->
</aside><!-- fixed-col-close -->
<div class="to-top">
<a href="#" class="scrollup">Scroll</a>
</div>
<section class="main-section cf opened-side">
<div class="col">
<article class="item">
<a href="#"><img src="img/img1.jpg" height="286" width="366" alt=""></a>
<h2><a href="#">LOREM IPSUM DOLOR</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum excepturi omnis quae nulla officia asperiores repudiandae ratione labore eius eveniet? Unde architecto omnis itaque doloribus nostrum odit exercitationem ipsum non.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis nemo ut suscipit accusamus minus soluta iure mollitia est aliquam dolores ipsa officia id quia distinctio recusandae eaque ea. Libero cum.</p>
<a href="#" class="read-more">read-more</a>
<div class="hidden-article-item">
<p class="author"><a href="#">author</a></p>
<p class="like-and-view"><span class="view">12</span> <span class="like">5</span></p>
</div><!-- hidden-article-item -->
</article>
</div>
</section>
其固定位置左侧边栏。在.open-hidden-nav
上悬停时,隐藏式菜单会从左向右滑动,并靠近侧边栏定位position: fixed
。
问题
.open-hidden-nav
上时,无法打开任何内容。您可以看到隐藏的菜单从左到右滑动,因为侧边栏背景是透明的,但您无法看到最终形式的菜单。.open-hidden-nav
上从下到上移动鼠标时它的工作正常,但当你尝试悬停文章时(在右侧附近)侧栏)然后.open-hidden-nav
- 您可以在隐藏菜单打开之前看到一些延迟.. 感谢您的帮助。
谁不知道如何进入代码编辑模式 - 只需从链接中删除/show/
。
答案 0 :(得分:0)
.main-section {
margin-left: 290px;
margin-right: 65px;
background: #fff;
box-shadow: 4px 0 5px -2px #d0d0d0;
position: relative;
z-index: -100;
}
.hidden-nav {
width: 206px;
height: 100%;
position: fixed;
top: 0;
left: -290px;
background: black;
transition: .5s;
z-index: 100;
overflow-y: auto;
}
我尝试使用这个css,当从右侧盘旋时没有跳跃的铬。所以你需要两个容器的z-index。