1
<title>Smart Bottom Slide Out Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Smart Bottom Slide Out Menu">
<meta name="keywords" content="jquery, fancy, bottom, navigation, menu">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="header"></div>
<div id="content" style="-webkit-transform: rotate(7deg); transform: rotate(7deg);">
<div id="home" class="text">
<h1>Amazing grungy slide out stuff</h1>
<p>This is an example of some text!</p>
<p>If anybody looks at a picture by Claude Monet from the point of view of
a Raphael, he will see nothing but a meaningless jargon of wild
paint-strokes. And if anybody looks at a Raphael from the point of view
of a Claude Monet, he will, no doubt...</p>
</div>
<div id="about" class="text" style="display:none;">
<h1>Some amazing about section</h1>
<p>This is an example of some text!</p>
<p>In tone drawing there is not only the shape of the masses to be
considered, but their values--that is, their position in an imagined
scale from dark to light. The relation of the different tones in this
way--the values, as it is called--is an extremely important matter in
painting.</p>
</div>
<div id="search" class="text" style="display:none;">
<h1>Search the world!</h1>
<p>This is an example of some text!</p>
<p><label for="searchinput">Search for:</label><input type="text"></p>
</div>
<div id="photos" class="text" style="display:none;">
<h1>Some awesome photos</h1>
<p>This is an example of some text!</p>
<p>
<img alt="img" src="img1.png" width="170" height="120">
<img alt="img" src="img1.png" width="170" height="120">
<img alt="img" src="img1.png" width="170" height="120">
</p>
</div>
<div id="contact" class="text" style="display:none;">
<h1>Get in touch</h1>
<p>This is an example of some text!</p>
<p>Some contact details...</p>
</div>
</div>
<ul id="navigation">
<li class="home"><a title="Home" style="-webkit-transform: rotate(18deg); transform: rotate(18deg); margin-top: -70px;">Home</a></li>
<li class="about"><a title="About" style="-webkit-transform: rotate(14deg); transform: rotate(14deg); margin-top: -70px;">About</a></li>
<li class="search"><a title="Search" style="-webkit-transform: rotate(-1deg); transform: rotate(-1deg); margin-top: -70px;">Search</a></li>
<li class="photos"><a title="Photos" style="-webkit-transform: rotate(-20deg); transform: rotate(-20deg); margin-top: -70px;">Photos</a></li>
<li class="contact"><a title="Contact" style="-webkit-transform: rotate(7deg); transform: rotate(7deg); margin-top: -70px;">Contact</a></li>
</ul>
<div class="info">
<a class="back" href="">back to Codrops</a>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleap...n.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
var $this = $(this);
var r=Math.floor(Math.random()*41)-20;
$this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
$('#content').css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
$this.stop().animate({
'marginTop':'-70px'
},d+=150);
});
$('#navigation > li').hover(
function () {
var $this = $(this);
$('a',$this).stop().animate({
'marginTop':'-40px'
},200);
},
function () {
var $this = $(this);
$('a',$this).stop().animate({
'marginTop':'-70px'
},200);
}
).click(function(){
var $this = $(this);
var name = this.className;
$('#content').animate({marginTop:-600}, 300,function(){
var $this = $(this);
var r=Math.floor(Math.random()*41)-20;
$this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
$('#content div').hide();
$('#'+name).show();
$this.animate({marginTop:-200}, 300);
})
});
});
</script>
</body></html>
как сделать мне такое меню?
тут демо версия
http://www.tympanus....RandomSlideOut/
Прикрепленные изображения
Прикрепленные файлы
-
style.css 1,61К
319 Количество загрузок:
