قائمة منزلقة + منسدلة + متحركة بتاثيرات css 3


السلام عليكم ورحمة الله متابعي المدونة وزوارها
منذ فترة ليست ببعيدة لمحت هذه القائمة وقد تم طرحها في مدونة عرب بلس نقلا عن مدرسة 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>








ثم اضغط زر  استعرض وستظهر لك الاضافة في القسم الايمن من المحرر  قم بتمرير الماوس  لتشاهد تاثير الانزلاق  والانقسام  ثم العودة  السلسة  عند ازالة الماوس




قم بتغيير مايجب تغييره  لتلائم القائمة احتياجاتك   قبل تركيبها على مدونتك   واي استفسارات او مشاكل مع القائمة انا في الخدمة









 

إشترك لتحصل على جديد المواضيع

شارك بتعليق

4 عدد التعليقات

RSS
  1. كالعادة كل ما هو جديد في مدونتك بل والأجمل أنك تضع لمستك عليها ,
    شكراً لك على الاضافه ,, واصل يامبدع

    ردحذف
  2. الشكر ليك اخي العزيز وائل
    هذا بعض مما عندكم يا غالي

    ردحذف
  3. تفسير مميز أخ يوسف مشكور على المجهود

    ردحذف
  4. السلام عليكم

    استفسار بسيط فقط اين اضع الكود الاول والثاني اذا ممكن شرح بسك وجزاك الله خير

    ردحذف