Есть картинка,по нажатию на которую nav плавно выезжает слева на право.
html
<div class="navbar">
<img src="http://m.liveperson.com/themes/images/menu-icon-hd-36-off.png" />
<nav id="menu">
<ul>
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="work.html">Work</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="about.html">About</a>
</li>
</ul>
</nav>
</div>
css
img {
float:left;
z-index:10;
}
nav {
float:left;
z-index:9;
overflow:hidden;
}
ul {
margin-left:-100%;
/* just a quick clearfix */
overflow:hidden;
-webkit-transition: margin-left 1s ease-in-out;
-moz-transition: margin-left 1s ease-in-out;
-ms-transition: margin-left 1s ease-in-out;
-o-transition: margin-left 1s ease-in-out;
transition: margin-left 1s ease-in-out;
}
li {
float:left;
margin-right:10px;
}
ul.active {
margin-left:0;
}
js
$(".navbar img").click(function() {
var menu = $("ul").toggleClass('active');
});
Пытаюсь сделать наоборот,но не выходит,что бы картинка была справа,а nav
также плавно с другой стороны выезжал,но безуспешно http://jsfiddle.net/ymsHb/21/ (наработка справа налево) код выше это слева направо