linnou
10-30-2013, بتوقيت غرينيتش 09:45 PM
http://www.dzbatna.com/images/icons/smile.gif [ jquery & Css ] : ط®ظ„ظپظٹط© ظˆ ظ‚ط§ط¦ظ…ط© ط£ظپظ‚ظٹط© ط±ظˆط¹ظ‡ ط¨ط§ظ„ط¬ظٹظƒظˆط±ظٹ (http://www.dzbatna.com/t1931901/)
السلام عليكم و رحمة الله و بركاته
وبارك الله لنا فيما تبقى من رمضان و جعلنا يارب من عتقائه من النار
اليوم جبت لكم شيء جديد و إن شاء الله يفيدكم
http://www.ghamdi.info/wp-content/uploads/2014/08/222222.png
لمشاهدة المثال إضغط هنــــــــا (http://www.ghamdi.info/jquery/44/index.html)
لتحميل المفات ‘ضغط هنــــــــا (http://www.ghamdi.info/jquery/44.zip)
للتركيب install بالمنتدى forum
1. ضع الكود code التالي في آخر قالب template الـ [ header ]
رمز Code:
<div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">أتصل بنا</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">منتج pluginاتنا</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">خدماتنا</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> </ul> </li> </ul> </div>
2. ضع الكود code التالي في آخر قالب template الـ [ headinclude ]
رمز Code:
$(function() { /* position of the <li> that is currently shown */ var current = 0; var loaded = 0; for(var i = 1; i <4; ++i) $('<img />').load(function(){ ++loaded; if(loaded == 3){ $('#bg1,#bg2,#bg3').mouseover(function(e){ var $this = $(this); /* if we hover the current one, then don't do anything */ if($this.parent().index() == current) return; /* item is bg1 or bg2 or bg3, depending where we are hovering */ var item = e.target.id; /* this is the sub menu overlay. Let's hide the current one if we hover the first <li> or if we come from the last one, then the overlay should move left -> right, otherwise right->left */ if(item == 'bg1' || current == 2) $('#menu .sub'+parseInt(current+1)).stop().animate({backgro undPosition:"(-266px 0)"},300,function(){ $(this).find('li').hide(); }); else $('#menu .sub'+parseInt(current+1)).stop().animate({backgro undPosition:"(266px 0)"},300,function(){ $(this).find('li').hide(); }); if(item == 'bg1' || current == 2){ /* if we hover the first <li> 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 <li> 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 menu's overlay should also slide, either from left to right or right to left. */ if(current == 2 && item == 'bg1'){ $('#menu .sub'+parseInt(current)).stop().animate({backgroun dPosition:"(-266px 0)"},300); } if(current == 0 && item == 'bg3'){ $('#menu .sub'+parseInt(current+2)).stop().animate({backgro undPosition:"(266px 0)"},300); } /* change the current element */ current = $this.parent().index(); /* let's make the overlay of the current one appear */ $('#menu .sub'+parseInt(current+1)).stop().animate({backgro undPosition:"(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({backgroundPosit ion:"(0 0)"},200); $('#bg2').parent().stop().animate({backgroundPosit ion:"(-266px 0)"},300); $('#bg3').parent().stop().animate({backgroundPosit ion:"(-532px 0)"},400,function(){ $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item); }); } else{ $('#bg1').parent().stop().animate({backgroundPosit ion:"(0 0)"},400,function(){ $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item); }); $('#bg2').parent().stop().animate({backgroundPosit ion:"(-266px 0)"},300); $('#bg3').parent().stop().animate({backgroundPosit ion:"(-532px 0)"},200); } } });
3. ضع الكود codeي التالي في [ تعاريف 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
المصدر
مدونة blog الغامدي (http://www.ghamdi.info)
كل الود
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم و رحمة الله و بركاته
وبارك الله لنا فيما تبقى من رمضان و جعلنا يارب من عتقائه من النار
اليوم جبت لكم شيء جديد و إن شاء الله يفيدكم
http://www.ghamdi.info/wp-content/uploads/2014/08/222222.png
لمشاهدة المثال إضغط هنــــــــا (http://www.ghamdi.info/jquery/44/index.html)
لتحميل المفات ‘ضغط هنــــــــا (http://www.ghamdi.info/jquery/44.zip)
للتركيب install بالمنتدى forum
1. ضع الكود code التالي في آخر قالب template الـ [ header ]
رمز Code:
<div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">أتصل بنا</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">منتج pluginاتنا</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">خدماتنا</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> </ul> </li> </ul> </div>
2. ضع الكود code التالي في آخر قالب template الـ [ headinclude ]
رمز Code:
$(function() { /* position of the <li> that is currently shown */ var current = 0; var loaded = 0; for(var i = 1; i <4; ++i) $('<img />').load(function(){ ++loaded; if(loaded == 3){ $('#bg1,#bg2,#bg3').mouseover(function(e){ var $this = $(this); /* if we hover the current one, then don't do anything */ if($this.parent().index() == current) return; /* item is bg1 or bg2 or bg3, depending where we are hovering */ var item = e.target.id; /* this is the sub menu overlay. Let's hide the current one if we hover the first <li> or if we come from the last one, then the overlay should move left -> right, otherwise right->left */ if(item == 'bg1' || current == 2) $('#menu .sub'+parseInt(current+1)).stop().animate({backgro undPosition:"(-266px 0)"},300,function(){ $(this).find('li').hide(); }); else $('#menu .sub'+parseInt(current+1)).stop().animate({backgro undPosition:"(266px 0)"},300,function(){ $(this).find('li').hide(); }); if(item == 'bg1' || current == 2){ /* if we hover the first <li> 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 <li> 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 menu's overlay should also slide, either from left to right or right to left. */ if(current == 2 && item == 'bg1'){ $('#menu .sub'+parseInt(current)).stop().animate({backgroun dPosition:"(-266px 0)"},300); } if(current == 0 && item == 'bg3'){ $('#menu .sub'+parseInt(current+2)).stop().animate({backgro undPosition:"(266px 0)"},300); } /* change the current element */ current = $this.parent().index(); /* let's make the overlay of the current one appear */ $('#menu .sub'+parseInt(current+1)).stop().animate({backgro undPosition:"(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({backgroundPosit ion:"(0 0)"},200); $('#bg2').parent().stop().animate({backgroundPosit ion:"(-266px 0)"},300); $('#bg3').parent().stop().animate({backgroundPosit ion:"(-532px 0)"},400,function(){ $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item); }); } else{ $('#bg1').parent().stop().animate({backgroundPosit ion:"(0 0)"},400,function(){ $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item); }); $('#bg2').parent().stop().animate({backgroundPosit ion:"(-266px 0)"},300); $('#bg3').parent().stop().animate({backgroundPosit ion:"(-532px 0)"},200); } } });
3. ضع الكود codeي التالي في [ تعاريف 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
المصدر
مدونة blog الغامدي (http://www.ghamdi.info)
كل الود
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
