, - . - ! , HTML5, CSS3, PHP MySql .
- .
.
, . , .
  • , 7 2011, 14:12 |
  • : karpovi4 |
  • : 1950 |
  • : 1 |
  • :
, "" .
    jQuery

CSS3, ( ie).
. !! ) , , , , 7-8 ... 6!!) ..
- ..
- ..
, !


01<div id="menuWrapper" class="menuWrapper bg1">
02<ul class="menu" id="menu">
03<li class="bg1" style="background-position:0 0;">
04<a id="bg1" href="#">Our Passion</a>
05<ul class="sub1" style="background-position:0 0;">
06<li><a href="#">Submenu 1</a></li>
07<li><a href="#">Submenu 2</a></li>
08<li><a href="#">Submenu 3</a></li>
09</ul>
10</li>
11<li class="bg1" style="background-position:-266px 0px;">
12<a id="bg2" href="#">Our Brands</a>
13<ul class="sub2" style="background-position:-266px 0;">
14<li><a href="#">Submenu 1</a></li>
15<li><a href="#">Submenu 2</a></li>
16<li><a href="#">Submenu 3</a></li>
17</ul>
18</li>
19<li class="last bg1" style="background-position:-532px 0px;">
20<a id="bg3" href="#">Contact</a>
21<ul class="sub3" style="background-position:-266px 0;">
22<li><a href="#">Submenu 1</a></li>
23<li><a href="#">Submenu 2</a></li>
24<li><a href="#">Submenu 3</a></li>
25</ul>
26</li>
27</ul>
28</div>

, .

The CSS
"menuWrapper", :
01.menuWrapper{
02font-family: "Trebuchet MS", Arial, sans-serif;;
03font-size: 15px;
04font-style: normal;
05font-weight: normal;
06text-transform:uppercase;
07letter-spacing: normal;
08line-height: 1.45em;
09position:relative;
10margin:20px auto;
11height:542px;
12width:797px;
13background-position:0 0;
14background-repeat:no-repeat;
15background-color:transparent;
16}


3 :
01ul.menu{
02list-style:none;
03width:797px;
04}
05ul.menu > li{
06float:left;
07width:265px;
08height:542px;
09border-right:1px solid #777;
10background-repeat:no-repeat;
11background-color:transparent;
12}
13ul.menu > li.last{
14border:none;
15}


:
1.bg1{
2background-image: url(../images/1.jpg);
3}
4.bg2{
5background-image: url(../images/2.jpg);
6}
7.bg3{
8background-image: url(../images/3.jpg);
9}


. li , . :
01ul.menu > li > a{
02float:left;
03width:265px;
04height:50px;
05margin-top:450px;
06text-align:center;
07line-height:50px;
08color:#ddd;
09background-color:#333;
10letter-spacing:1px;
11cursor:pointer;
12text-decoration:none;
13text-shadow:0px 0px 1px #fff;
14}


, )
01ul.menu > li ul{
02list-style:none;
03float:left;
04margin-top:-180px;
05width:100%;
06height:110px;
07padding-top:20px;
08background-repeat:no-repeat;
09background-color:transparent;
10}



Li .
1ul.menu > li ul li{
2display:none;
3}



:
1ul.menu > li ul.sub1{
2background-image:url(../images/bg1sub.png);
3}
4ul.menu > li ul.sub2{
5background-image:url(../images/bg2sub.png);
6}
7ul.menu > li ul.sub3{
8background-image:url(../images/bg3sub.png);
9}



li- :
01ul.menu > li ul li a{
02color:#fff;
03text-decoration:none;
04line-height:30px;
05margin-left:20px;
06text-shadow:1px 1px 1px #444;
07font-size:11px;
08}
09
10ul.menu > li ul li a:hover{
11border-bottom:1px dotted #fff;
12}



1 :
1ul.menu > li ul.sub1 li{
2display:block;
3}


)
javascript.

javascript
001$(function() {
003var current = 0;
004
005$('#bg1,#bg2,#bg3').mouseover(function(e){
006
007var $this = $(this);
009if($this.parent().index() == current)
010return;
013var item = e.target.id;
021if(item == 'bg1' || current == 2)
022$('#menu .sub'+parseInt(current+1))
023.stop()
024.animate({backgroundPosition:"(-266px 0)"},300,function(){
025$(this).find('li').hide();
026});
027else
028$('#menu .sub'+parseInt(current+1))
029.stop()
030.animate({backgroundPosition:"(266px 0)"},300,function(){
031$(this).find('li').hide();
032});
033
034if(item == 'bg1' || current == 2){
035/*
036if we hover the first <li> or if we come from
037the last one, then the images should move left -> right
038*/
039$('#menu > li')
040.animate({backgroundPosition:"(-800px 0)"},0)
041.removeClass('bg1 bg2 bg3')
042.addClass(item);
043move(1,item);
044}
045else{
051$('#menu > li')
052.animate({backgroundPosition:"(800px 0)"},0)
053.removeClass('bg1 bg2 bg3')
054.addClass(item);
055move(0,item);
056}
064if(current == 2 && item == 'bg1'){
065$('#menu .sub'+parseInt(current))
066.stop()
067.animate({backgroundPosition:"(-266px 0)"},300);
068}
069if(current == 0 && item == 'bg3'){
070$('#menu .sub'+parseInt(current+2))
071.stop()
072.animate({backgroundPosition:"(266px 0)"},300);
073}
074
075/* */
076current = $this.parent().index();
077
078/* let's make the overlay of the current one appear */
079
080$('#menu .sub'+parseInt(current+1))
081.stop().animate({backgroundPosition:"(0 0)"},300,function(){
082$(this).find('li').fadeIn();
083});
084});
085/*
086dir:1 - ->
087dir:0 - ->
088 */
089function move(dir,item){
090if(dir){
091$('#bg1').parent()
092 .stop()
093 .animate({backgroundPosition:"(0 0)"},200);
094$('#bg2').parent()
095 .stop()
096 .animate({backgroundPosition:"(-266px 0)"},300);
097$('#bg3').parent()
098 .stop()
099 .animate({backgroundPosition:"(-532px 0)"},400,function(){
100$('#menuWrapper').removeClass('bg1 bg2 bg3')
101 .addClass(item);
102 });
103}
104else{
105$('#bg1').parent()
106 .stop()
107 .animate({backgroundPosition:"(0 0)"},400,function(){
108$('#menuWrapper').removeClass('bg1 bg2 bg3')
109 .addClass(item);
110 });
111$('#bg2').parent()
112 .stop()
113 .animate({backgroundPosition:"(-266px 0)"},300);
114$('#bg3').parent()
115 .stop()
116 .animate({backgroundPosition:"(-532px 0)"},200);
117}
118}
119});


!
.
  •  jQuery,