السلام عليكم و رحمة الله و بركاته
وبارك الله لنا فيما تبقى من رمضان و جعلنا يارب من عتقائه من النار
اليوم جبت لكم شيء جديد و إن شاء الله يفيدكم
لمشاهدة المثال إضغط هنــــــــا
لتحميل المفات ‘ضغط هنــــــــا
للتركيب بالمنتدى
1. ضع الكود التالي في آخر قالب الـ [header ]
رمز Code:
2. ضع الكود التالي في آخر قالب الـ [headinclude ]
رمز Code:
$(function() {
/* position of the that is currently shown */
var current = 0;
var loaded = 0;
for(var i = 1; i right,
otherwise right->left
*/
if(item == bg1 || current == 2)
$(#menu .sub+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
$(this).find(li).hide();
});
else
$(#menu .sub+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
$(this).find(li).hide();
});
if(item == bg1 || current == 2){
/* if we hover the first or if we come from the last one, then the images should move left -> right */
$(#menu > li).animate({backgroundPosition:"(-800px 0)"},0).removeClass(bg1 bg2 bg3).addClass(item);
move(1,item);
}
else{
/* if we hover the first or if we come from the last one, then the images should move right -> left */
$(#menu > li).animate({backgroundPosition:"(800px 0)"},0).removeClass(bg1 bg2 bg3).addClass(item);
move(0,item);
}
/*
We want that if we go from the first one to the last one (without hovering the middle one),
or from the last one to the first one, the middle menus overlay should also slide, either
from left to right or right to left.
*/
if(current == 2 && item == bg1){
$(#menu .sub+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
}
if(current == 0 && item == bg3){
$(#menu .sub+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
}
/* change the current element */
current = $this.parent().index();
/* lets make the overlay of the current one appear */
$(#menu .sub+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
$(this).find(li).fadeIn();
});
});
}
}).attr(src, images/+i+.jpg);
/*
dir:1 - move left->right
dir:0 - move right->left
*/
function move(dir,item){
if(dir){
$(#bg1).parent().stop().animate({backgroundPosition:"(0 0)"},200);
$(#bg2).parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
$(#bg3).parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
$(#menuWrapper).removeClass(bg1 bg2 bg3).addClass(item);
});
}
else{
$(#bg1).parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
$(#menuWrapper).removeClass(bg1 bg2 bg3).addClass(item);
});
$(#bg2).parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
$(#bg3).parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
}
}
});
3. ضع الكودي التالي في [تعاريف CSS الإضافية/Additional CSS Definitions ]
رمز Code:
.menuWrapper{
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 17px;
font-style: normal;
font-weight: normal;
text-transform:uppercase;
letter-spacing: normal;
line-height: 1.45em;
position:relative;
margin:20px auto;
height:542px;
width:797px;
background-position:0 0;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu{
list-style:none;
width:797px;
}
ul.menu > li{
float:left;
width:265px;
height:542px;
border-right:1px solid #777;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu > li.last{
border:none;
}
.bg1{
background-image: url(images/1.jpg);
}
.bg2{
background-image: url(images/2.jpg);
}
.bg3{
background-image: url(images/3.jpg);
}
ul.menu > li > a{
float:left;
width:265px;
height:50px;
margin-top:450px;
text-align:center;
line-height:50px;
color:#ddd;
background-color:#333;
letter-spacing:1px;
cursor:pointer;
text-decoration:none;
text-shadow:0px 0px 1px #fff;
}
ul.menu > li ul{
list-style:none;
float:left;
margin-top:-180px;
width:100%;
height:110px;
padding-top:20px;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu > li ul li{
display:none;
}
ul.menu > li ul.sub1{
background-image:url(images/bg1sub.png);
}
ul.menu > li ul.sub2{
background-image:url(images/bg2sub.png);
}
ul.menu > li ul.sub3{
background-image:url(images/bg3sub.png);
}
ul.menu > li ul li a{
color:#fff;
text-decoration:none;
line-height:30px;
margin-left:20px;
text-shadow:1px 1px 1px #444;
font-size:16px;
}
ul.menu > li ul.sub1 li{
display:block;
}
ul.menu > li ul li a:hover{
border-bottom:1px dotted #fff;
}
لتغير الصور
تجد الصور في ملف images ويجب أن تكون مقاسات الصور 800*542
المصدر
مدونة الغامدي
كل الود
وبارك الله لنا فيما تبقى من رمضان و جعلنا يارب من عتقائه من النار
اليوم جبت لكم شيء جديد و إن شاء الله يفيدكم
لمشاهدة المثال إضغط هنــــــــا
لتحميل المفات ‘ضغط هنــــــــا
للتركيب بالمنتدى
1. ضع الكود التالي في آخر قالب الـ [header ]
رمز Code:
2. ضع الكود التالي في آخر قالب الـ [headinclude ]
رمز Code:
$(function() {
/* position of the that is currently shown */
var current = 0;
var loaded = 0;
for(var i = 1; i right,
otherwise right->left
*/
if(item == bg1 || current == 2)
$(#menu .sub+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
$(this).find(li).hide();
});
else
$(#menu .sub+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
$(this).find(li).hide();
});
if(item == bg1 || current == 2){
/* if we hover the first or if we come from the last one, then the images should move left -> right */
$(#menu > li).animate({backgroundPosition:"(-800px 0)"},0).removeClass(bg1 bg2 bg3).addClass(item);
move(1,item);
}
else{
/* if we hover the first or if we come from the last one, then the images should move right -> left */
$(#menu > li).animate({backgroundPosition:"(800px 0)"},0).removeClass(bg1 bg2 bg3).addClass(item);
move(0,item);
}
/*
We want that if we go from the first one to the last one (without hovering the middle one),
or from the last one to the first one, the middle menus overlay should also slide, either
from left to right or right to left.
*/
if(current == 2 && item == bg1){
$(#menu .sub+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
}
if(current == 0 && item == bg3){
$(#menu .sub+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
}
/* change the current element */
current = $this.parent().index();
/* lets make the overlay of the current one appear */
$(#menu .sub+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
$(this).find(li).fadeIn();
});
});
}
}).attr(src, images/+i+.jpg);
/*
dir:1 - move left->right
dir:0 - move right->left
*/
function move(dir,item){
if(dir){
$(#bg1).parent().stop().animate({backgroundPosition:"(0 0)"},200);
$(#bg2).parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
$(#bg3).parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
$(#menuWrapper).removeClass(bg1 bg2 bg3).addClass(item);
});
}
else{
$(#bg1).parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
$(#menuWrapper).removeClass(bg1 bg2 bg3).addClass(item);
});
$(#bg2).parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
$(#bg3).parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
}
}
});
3. ضع الكودي التالي في [تعاريف CSS الإضافية/Additional CSS Definitions ]
رمز Code:
.menuWrapper{
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 17px;
font-style: normal;
font-weight: normal;
text-transform:uppercase;
letter-spacing: normal;
line-height: 1.45em;
position:relative;
margin:20px auto;
height:542px;
width:797px;
background-position:0 0;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu{
list-style:none;
width:797px;
}
ul.menu > li{
float:left;
width:265px;
height:542px;
border-right:1px solid #777;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu > li.last{
border:none;
}
.bg1{
background-image: url(images/1.jpg);
}
.bg2{
background-image: url(images/2.jpg);
}
.bg3{
background-image: url(images/3.jpg);
}
ul.menu > li > a{
float:left;
width:265px;
height:50px;
margin-top:450px;
text-align:center;
line-height:50px;
color:#ddd;
background-color:#333;
letter-spacing:1px;
cursor:pointer;
text-decoration:none;
text-shadow:0px 0px 1px #fff;
}
ul.menu > li ul{
list-style:none;
float:left;
margin-top:-180px;
width:100%;
height:110px;
padding-top:20px;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu > li ul li{
display:none;
}
ul.menu > li ul.sub1{
background-image:url(images/bg1sub.png);
}
ul.menu > li ul.sub2{
background-image:url(images/bg2sub.png);
}
ul.menu > li ul.sub3{
background-image:url(images/bg3sub.png);
}
ul.menu > li ul li a{
color:#fff;
text-decoration:none;
line-height:30px;
margin-left:20px;
text-shadow:1px 1px 1px #444;
font-size:16px;
}
ul.menu > li ul.sub1 li{
display:block;
}
ul.menu > li ul li a:hover{
border-bottom:1px dotted #fff;
}
لتغير الصور
تجد الصور في ملف images ويجب أن تكون مقاسات الصور 800*542
المصدر
مدونة الغامدي
كل الود
