CSS3 animate slide/hide navigation to influence other elements
I would like to have a smooth animated transition of 1 & 2, when 1 is triggered to display. I have accomplished this here: http://codepen.io/jacksonbeale/pen/epjcs using a negative top margin, but the problem is that the height of 1 will vary depending on the number of items in the navigation, so this will not work for me.
nav {
margin-top:-95px;
width:100%;
box-sizing:border-box;
z-index:5;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
&.showmenu {
margin-top:0;
}
}
My current project does not allow me to use jQuery, and any js needs to be written by another developer. I only have control over html & css. I seem to be running in to this issue a bit so it would be great if someone could offer a suggestion on a pure css method to accomplish what I need.
You could do this :
position:absolute;
) you can use translateY to togggle the menu in and out with translateY(-100%)
/ translateY(0)
DEMO
HTML :
<div class="test">
<div><span class="menulink">Menu</span></div>
<div class="content">
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Three</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Three</li>
</ul>
</nav>
<div>content</div>
</div>
</div>
CSS : (sorry I'm not used to SCSS)
.test {
width:400px;
position:relative;
> div, nav {
border:3px solid #CCC;
}
> div:first-child {
height:30px;
z-index:10;
background:teal;
position:relative;
z-index:1;
span {
float:right;
display:table;
height:100%;
&:hover {
cursor:pointer;
}
}
}
nav {
width:100%;
box-sizing:border-box;
z-index:5;
&.showmenu {
margin-top:0;
}
}
}
.content > div{
min-height:200px;
position:absolute;
left:-3px; top:100%;
width:100%;
border:3px solid #ccc;
}
.content{
z-index:0;
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.content.showmenu{
transform: translateY(0);
-webkit-transform: translateY(0);
}
jQuery :
$( ".menulink" ).click(function() {
$( ".content" ).toggleClass( "showmenu" );
});
Add This code in your project.
jsfiddle Demo
Set css style like this.
<style>
.menu {
max-width: 500px;
background-color: #000;
}
.menu a{
color: #fff;
text-decoration: none;
}
.menu ul{
padding:0px;
position:relative;
z-index:999;
}
.menu > ul > li{
display: inline;
position: relative;
}
.menu > ul > li a{
display: inline-block;
padding: 8px 15px;
}
.menu li ul{
top: 120%;
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
width:100%;
max-width: 150px;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
background-color: rgba(0, 0, 0, 0.8);
}
.menu li ul li{
position: relative;
list-style: none;
}
.menu li:hover > ul{
opacity:1;
visibility:visible;
top:100%;
}
.menu ul ul > li > ul{
top: 0% !important;
left: 120%;
}
.menu ul ul li:hover > ul{
left: 100%;
}
.no-padding{
padding-left: 0px;
padding-right: 0px;
}
</style
And Set HTML Code Like this.
<nav class="menu">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a>
<ul>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
链接地址: http://www.djcxy.com/p/82080.html
上一篇: 慢委托创建
下一篇: CSS3动画滑动/隐藏导航以影响其他元素