السلام عليكم ورحمة الله متابعي المدونة وزوارها
منذ فترة ليست ببعيدة لمحت هذه القائمة وقد تم طرحها في مدونة عرب بلس نقلا عن مدرسة script-tutorial
طبعا الموقع يعتبر مدرسة لمطوري الويب وهو غني عن التعريف
ما قمت انا بعمله هو تطويع القائمة لتناسب مدونات بلوجر
تحميل السورس معاينة
الان انتقل الى المحرر لتقوم بتجربتها مباشرة
محرر اكواد html
كود css قم بطبعه مكان هنا كود css
/* navigation menu styles - main styles */
ul.navi {
position:relative;
z-index:100;
padding:0;
margin:0 0 0 60px;
list-style:none;
width:auto;
height:30px;
}
ul.navi > li {
width:48px;
height:30px;
position:absolute;
left:0;
top:0;
-moz-transition: -moz-transform 0.5s ease-in-out;
-ms-transition: -ms-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
ul.navi a {
display:block;
width:48px;
height:30px;
position:absolute;
left:0;
top:0;
line-height:30px;
text-align:center;
text-decoration:none;
}
ul.navi a img {
border:0;
}
ul.navi a span {
position:absolute;
left:5px;
font-size:11px;
font-weight:bold;
color:#fff;
}
/* top line - hover styles */
ul.navi:hover {
height:100px;
}
ul.navi:hover li#n1 {
-moz-transform: translatex(0px);
-ms-transform: translatex(0px);
-o-transform: translatex(0px);
-webkit-transform: translatex(0px);
transform: translatex(0px);
}
ul.navi:hover li#n2 {
-moz-transform: translatex(70px);
-ms-transform: translatex(70px);
-o-transform: translatex(70px);
-webkit-transform: translatex(70px);
transform: translatex(70px);
}
ul.navi:hover li#n3 {
-moz-transform: translatex(140px);
-ms-transform: translatex(140px);
-o-transform: translatex(140px);
-webkit-transform: translatex(140px);
transform: translatex(140px);
}
ul.navi:hover li#n4 {
-moz-transform: translatex(210px);
-ms-transform: translatex(210px);
-o-transform: translatex(210px);
-webkit-transform: translatex(210px);
transform: translatex(210px);
}
ul.navi:hover li#n5 {
-moz-transform: translatex(280px);
-ms-transform: translatex(280px);
-o-transform: translatex(280px);
-webkit-transform: translatex(280px);
transform: translatex(280px);
}
/* submenus - common styles */
ul.sub {
padding:0;
margin:0;
list-style:none;
width:48px;
height:30px;
position:absolute;
left:0;
top:0;
z-index:-1;
opacity:0;
-moz-transition: opacity 0s linear 1s;
-ms-transition: opacity 0s linear 1s;
-o-transition: opacity 0s linear 1s;
-webkit-transition: opacity 0s linear 1s;
transition: opacity 0s linear 1s;
}
ul.sub li {
width:48px;
height:30px;
position:absolute;
left:0;
top:0;
z-index:-1;
-moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
-ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
-o-transition: -o-transform 0.5s ease-in-out 0.5s;
-webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
transition: transform 0.5s ease-in-out 0.5s;
}
/* submenus - hover styles */
ul.navi > li:hover ul {
opacity:1;
-moz-transition: opacity 0s linear 0.5s;
-ms-transition: opacity 0s linear 0.5s;
-o-transition: opacity 0s linear 0.5s;
-webkit-transition: opacity 0s linear 0.5s;
transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
-moz-transform: translatex(-70px) translatey(60px);
-ms-transform: translatex(-70px) translatey(60px);
-o-transform: translatex(-70px) translatey(60px);
-webkit-transform: translatex(-70px) translatey(60px);
transform: translatex(-70px) translatey(60px);
}
ul.navi li:hover ul li.c {
-moz-transform: translatey(60px);
-ms-transform: translatey(60px);
-o-transform: translatey(60px);
-webkit-transform: translatey(60px);
transform: translatey(60px);
}
ul.navi li:hover ul li.r {
-moz-transform: translatex(70px) translatey(60px);
-ms-transform: translatex(70px) translatey(60px);
-o-transform: translatex(70px) translatey(60px);
-webkit-transform: translatex(70px) translatey(60px);
transform: translatex(70px) translatey(60px);
}
وطبعا كود html مكانه واضح
<div class="example">
<!-- defining top menu elements -->
<ul class="navi">
<li id="n1"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu1</span></a>
<!-- defining sub menu elements -->
<ul class="sub">
<li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu11</span></a></li>
<li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu12</span></a></li>
<li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu13</span></a></li>
</ul>
</li>
<li id="n2"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu2</span></a>
<ul class="sub">
<li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu21</span></a></li>
<li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu22</span></a></li>
<li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu23</span></a></li>
</ul>
</li>
<li id="n3"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu3</span></a>
<ul class="sub">
<li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
<li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
<li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
</ul>
</li>
<li id="n4"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu4</span></a>
<ul class="sub">
<li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
<li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
<li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
</ul>
</li>
<li id="n5"><a href="http://th3experts.com/css3-animated-slide-menu/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Tutorial</span></a>
</li>
</ul>
<div style="clear:both"></div>
</div>
ثم اضغط زر استعرض وستظهر لك الاضافة في القسم الايمن من المحرر قم بتمرير الماوس لتشاهد تاثير الانزلاق والانقسام ثم العودة السلسة عند ازالة الماوس
قم بتغيير مايجب تغييره لتلائم القائمة احتياجاتك قبل تركيبها على مدونتك واي استفسارات او مشاكل مع القائمة انا في الخدمة
إشترك لتحصل على جديد المواضيع
كالعادة كل ما هو جديد في مدونتك بل والأجمل أنك تضع لمستك عليها ,
ردحذفشكراً لك على الاضافه ,, واصل يامبدع
الشكر ليك اخي العزيز وائل
ردحذفهذا بعض مما عندكم يا غالي
تفسير مميز أخ يوسف مشكور على المجهود
ردحذفالسلام عليكم
ردحذفاستفسار بسيط فقط اين اضع الكود الاول والثاني اذا ممكن شرح بسك وجزاك الله خير