قائمة منزلقة + منسدلة + متحركة بتاثيرات 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="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu1</span></a>
            <!-- defining sub menu elements -->
            <ul class="sub">
                <li class="l"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu11</span></a></li>
                <li class="c"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu12</span></a></li>
                <li class="r"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu13</span></a></li>
            </ul>
        </li>
        <li id="n2"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu2</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu21</span></a></li>
                <li class="c"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu22</span></a></li>
                <li class="r"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu23</span></a></li>
            </ul>
        </li>
        <li id="n3"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu3</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
                <li class="c"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
                <li class="r"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
            </ul>
        </li>
        <li id="n4"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu4</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
                <li class="c"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
                <li class="r"><a href="#"><img src="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/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="http://4.bp.blogspot.com/-UI1Ss7M5a6E/T0EZzuOCGfI/AAAAAAAAA50/vtgv1ZYchF8/s1600/btn.png" alt="" /><span>Tutorial</span></a>
        </li>
    </ul>

    <div style="clear:both"></div>
</div>








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




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









 

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

شارك بتعليق

8 عدد التعليقات

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

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

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

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

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

    ردحذف

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

    شركة تنظيف منازل بالقطيف
    شركة تنظيف بالقطيف

    شركة تنظيف مسابح بالخبر
    شركة صيانة مسابح بالخبر
    شركة تنظيف كنب بالخبر
    شركة تنظيف مطابخ بالخبر
    شركة تنظيف مكيفات بالخبر

    شركة تنظيف مسابح بالدمام
    شركة تنظيف مسابح بالقطيف
    شركة صيانة مسابح بالقطيف

    ردحذف
  6. نقدم لكم شركة المثالية للتنظيف بالاحساء الشركة الرائدة في تقديم جميع خدمات التنظيف الشاملة للمنازل والشقق والفلل والمجالس والكنب والسجاد والموكيت والمفروشات بجميع مدن ومحافظات المنطقة الشرقية بالمملكة العربية السعودية فتعد شركة المثالية للتنظيف بالاحساء افضل شركة تنظيف بالاحساء حيث تقوم بجميع خدماتها بالاعتماد علي كافة الادوات والاساليب والحديثة بالاضافة الي خبرة عشرات السنوات بمجالات التنظيف ومكافحة الحشرات ورش افضل انواع المبيدات الامتة والفعالة فلدينا شركة المثالية لمكافحة الحشرات بالاحساء والمتخصصة في مكافحة جميع انواع الحشرات وابادتها ابادة تامة بالضمان باستخدام اقوي انواع المبيدات الامنة والفعالة وذات الجودة الدقة العالية فتقدم ابادة الحشرات بافضل جودة وارخص الاسار فحقا هي الشركة المثالية للتنظيف بالاحساء فهي حقا افضل شركة تنظيف ومكافحة حشرات بالاحساء والجبيل وباقي محافظات المنطقة الشرقية بالمملكة العربية السعودية فلدينا شركة مكافحة حشرات بالجبيل المتخصصة بتقديم خدمات مكافحة الحشرات بالجبيل

    شركة مكافحة حشرات بالجبيل
    شركة تنظيف شقق بالجبيل
    شركة تنظيف فلل بالجبيل
    شركة تنظيف مجالس بالجبيل
    شركة تنظيف بيوت بالجبيل

    شركة نقل عفش بالاحساء
    شركة نقل اثاث بالاحساء

    ردحذف