Меню «Гаражные двери»
Очень красивое меню, реализованное при помощи Jquery, сравнимое только с меню реализованными на флеше.
Это меню работает за счет изменения background-position наложенных друг на друга слоями изображений.
И так, начнем.
Для начала, нам потребуется задний фон(нижний слой):
Изображение той самой « гаражной двери»(средний слой):
И изображение «дверного проёма(верхний слой):
Создадим сам каркас меню на html:
<ul id="menuback">
<li class="shutter" id="shutter1"><a class="link" href="#1">Ссылка 1</a></li>
<li class="shutter" id="shutter2"><a class="link" href="#2">Ссылка 2</a></li>
<li class="shutter" id="shutter3"><a class="link" href="#3">Ссылка 3</a></li>
<li class="shutter" id="shutter4"><a class="link" href="#4">Ссылка 4</a></li>
</ul>При отключенном css или javascript, меню будет выглядеть как обычный список ссылок, то есть еще будет выполнять свою главную функцию.
Оформим меню при помощи css:
* { margin:0px; padding:0px; }
body { background:#c1c1c1; }
a { outline-style: none; }
ul#menuback {
margin: 50px auto;
list-style: none;
background: url(../images/menu-bg.jpg);
width: 800px;
overflow: auto;
}
ul#menuback li.shutter {
width: 200px;
height: 100px;
display: block;
float: left;
}
ul#menuback li#shutter1 {
background: url(../images/shutter-africanplains.jpg) no-repeat;
}
ul#menuback li#shutter2 {
background: url(../images/shutter-reptiles.jpg) no-repeat;
}
ul#menuback li#shutter3 {
background: url(../images/shutter-aviary.jpg) no-repeat;
}
ul#menuback li#shutter4 {
background: url(../images/shutter-arcticzone.jpg) no-repeat;
}
a.link {
width: 200px;
height: 100px;
display: block;
background: url(../images/window.png) no-repeat bottom center;
text-indent: -9999px;
}И, наконец, дадим ему жизнь при помощи jQuery.
Сам по себе jQuery не может полноценно работать с позицией фона в css, так что мы используем маленький однокилобайтный плагин к нему.
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set css in Firefox (Required to use the backgroundPosition js)
$('#shutter1').css({backgroundPosition: '0px 0px'});
//Animate the shutter
$(".link").hover(function(){
$(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
}, function() {
$(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
});
});
</script>Обновление: в ie6 меню работает некорректно из-за неправильной обработки прозрачности у png изображений.
Для исправления этого глюка используем следующий css код(извиняюсь если использовал это хак неправильно):
<!--[if lt IE 7]>
<style type="text/css">
a.link {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/window.png', sizingMethod='scale');
background: url(images/blank.gif) no-repeat bottom center;
}
</style>
<![endif]-->Результат нашей работы вы можете посмотреть или скачать(вместе с исходниками изображений) ниже.
Спасибо за внимание!
I was looking through some of your blog posts on this site and I believe this website is very informative ! Continue putting up.
Oh my goodness! an amazing article dude. Thank you However I am experiencing issue with ur rss . Don’t know why Unable to subscribe to it. Is there anyone getting identical rss problem? Anyone who knows kindly respond. Thnkx
Меню Гаражные двери» | Чернев.ру Pretty nice post. I just stumbled upon your weblog and wished to say that I have truly enjoyed browsing your blog posts. In any case I will be subscribing to your feed and I hope you write again very soon!
I know this if off topic but I’m looking into starting my own blog and was wondering what all is needed to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet smart so I’m not 100% certain. Any tips or advice would be greatly appreciated. Appreciate it
I think that is an interesting point, it made me think a bit. Thanks for sparking my thinking cap. Sometimes I get so much in a rut that I just feel like a record.
I was suggested this web site by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my problem. You are wonderful! Thanks!
Hello there Nice wewebsite. Do you need to invitee post on my very own someday? In that case you should let me know by means of email or just reply to this kind of remark since We subscribed to announcements and definately will understand should you.
Aw, this was a really nice post. In idea I would like to put in writing like this additionally – taking time and actual effort to make a very good article… but what can I say… I procrastinate alot and by no means seem to get something done.
Very interesting points you have remarked, appreciate it for posting . «Success is a journey, not a destination. The doing is often more important than the outcome.» by Arthur Ashe.
Oh my goodness! an amazing article dude. Thank you However I am experiencing issue with ur rss . Don’t know why Unable to subscribe to it. Is there anyone getting identical rss problem? Anyone who knows kindly respond. Thnkx
I was wondering if you ever considered changing the layout of your blog? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or two images. Maybe you could space it out better?
I’ve been reading a few posts and really and enjoy your writing. I’m just setting up my own blog and only hope that I can write as well and give the reader so significantly insight.
Definitely believe that which you stated. Your favorite justification seemed to be on the net the easiest thing to be aware of. I say to you, I certainly get annoyed while people consider worries that they plainly do not know about. You managed to hit the nail upon the top and defined out the whole thing without having side effect , people can take a signal. Will probably be back to get more. Thanks
Thank you for helping out, excellent information. «Considering how dangerous everything is, nothing is really very frightening.» by Gertrude Stein.
I reckon something truly interesting about your blog so I saved to bookmarks .
Very interesting points you have mentioned , thanks for posting . «Brass bands are all very well in their place – outdoors and several miles away.» by Sir Thomas Beecham.
You made some decent points there. I looked on the internet for the subject and found most people will consent with your website.
I do trust all the concepts you’ve offered on your post. They’re really convincing and will certainly work. Nonetheless, the posts are very short for starters. May you please extend them a bit from next time? Thanks for the post.