قائمة منسدلة بتقنية CSS و javascript رائعة لمدونات بلوجر أحدث أفلام المفاصل المنسدلة

السلام عليكم ورحمة الله وبركاته

أقدم لكم اليوم قائمة منسدلة بتقنية css وجافاسكربت خفيفة وبألوان زاودات مفضلة على جميع الاجهزة الذكية والالكترونية والالكترونية والالكترونية والالكترونية والالكترونية.

صورة الإضافة

كيفية الإضافة إلى مدونتك؟ إنتقل إلىwww.blogger.com ثم أختر القالب ثم إضغط على تحرير html الآن بإستخدام مفتاح الإختصار إبحث عن الرمز ]]> </ b: skin> الآن أضف الكود التالي فوق الرمز ]]> </ b: skin> مباشرة

/ * ---- قائمة منسدلة www.madad2.com ----- * / .ranpost { الخلفية: url ("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj31J7SMXgT5jQgfb5mo4uorG5PVz-KGpa7X9vixsuovlUk44Sl5DdesdBHiPZw5BuAQ9AfPe3nP3vysCORHUTDnyB5NQpItNtD9vBju21GFUnyZvtlNNgJ1lKnG1UUHV2bZEHZM-0Fxo8/s1600/ran-iconz.png") بدون تكرار 12px 13px شفاف ؛ المؤشر: المؤشر. float: left! الهامش الأيسر: 10 بكسل ؛ العرض: 50 بكسل ؛ } .ranpost: hover { لون الخلفية: شفاف! } # main-nav { خلفية: # 2c2c2c. الهامش: 0 تلقائي ؛ الطول: 50px؛ هامش القاع: -20px. } # main-nav .menu-alert { تعويم: الحق؛ المساحة المتروحة: 18 بكسل x 0 0 10 بكسل؛ على غرار الخط: مائل. اللون: # الاتحاد الفرنسي. } # top-menu-mob، # main-menu-mob {display: none؛ } # main-nav ul li { تحويل النص: أحرف كبيرة؛ font-family: Oswald، arial، Georgia، serif؛ FONT-SIZE: 16px؛ موقف: قريب عرض: مضمنة ، كتلة ؛ تعويم: يمين border: 1px solid؛ border-width: 0 0 0 1px؛ الطول: 50px؛ } # main-nav ul ul: first-child، # main-nav ul li: first-child a {border: 0 none؛} # main-nav ul li: last-child a {border-right: 0 none؛} # main-nav ul li a { عرض: مضمنة ، كتلة ؛ الارتفاع: 50 بكسل ؛ خط الطول: 50 بكسل ؛ اللون: #ddd؛ الحشو: 0 14 بكسل ؛ ظل النص: 0 1px 1px # 000؛ border-right: 1px solid # 383838؛ } # main-nav ul ul a .sub-indicator {} # main-nav ul li a: hover {} # main-nav ul ul { عرض لا شيء؛ الحشو: 0؛ الموقع: مطلقة العلوي: 50 بكسل العرض: 180 بكسل z-index: 99999؛ تعويم: يمين الخلفية: # 2d2d2d! -webkit-box-shadow: 0 3px 4px 1px rgba (0، 0، 0، 0.2)؛ box-shadow: 0 3px 4px 1px rgba (0، 0، 0، 0.2)؛ -webkit-border-bottom-right-radius: 3px؛ -webkit-border-bottom-left-radius: 3px؛ -moz-border-radius-bottomright: 3px؛ -moz-border-radius-bottomleft: 3px؛ border-bottom-left-radius: 3px؛ border-bottom-right-radius: 3px؛ } # main-nav ul ul li، # main-nav ul ul li: first-child { الخلفية: لا شيء مهم z-index: 99999؛ الحد الأدنى للعرض: 180 بكسل الحد: 0 لا شيء؛ border-bottom: 1px solid # 222؛ border-top: 1px solid # 383838؛ FONT-SIZE: 13px؛ الطول: السيارات. هامش: 0؛ } # main-nav ul ul li: first-child، # main-nav ul li.current-menu-item ul li: first-child، # main-nav ul li.current-menu-parent ul li: first-child، # main-nav ul li.current-page-ancestor ul li: first-child {border-top: 0 none! important؛} # main-nav ul ul ul، # main-nav ul ul.current-menu-item ul ul، # main-nav ul ul.current-menu-parent ul ul، # main-nav ul li.current-page-ancestor ul ul {right: auto؛ left: 100٪؛ أعلى: 0! z-index: 99999؛ } # main-nav ul.sub-menu a، # main-nav ul ul li.current-menu-item a، # main-nav ul ul li.current-menu-parent a، # main-nav ul ul li.current-page-ancestor a { الحد: 0 لا شيء؛ الخلفية: لا شيء مهم الارتفاع: تلقائي! خط الطول: 1em. مساحة الحبر: 10 بكسل × 10 بكسل ؛ العرض: 160 بكسل ؛ عرض: كتلة! الهامش الأيمن: 0! z-index: 99999؛ اللون: #ccc! الظل النص: 0 1px 1px # 000! important؛ } # main-nav ul ul.current-menu-item ul a، # main-nav ul ul.current-menu-parent ul a، # main-nav ul li.current-page-ancestor ul a {color: #eee! important؛ ظل النص: 0 1px 1px # 222! مهم ؛} # main-nav ul li: hover> a، # main-nav ul: hover> a {color: #FFF؛} # main-nav ul ul li: hover> a، # main-nav ul ul: hover> a {color: #FFF! important؛ الحشوة اليسرى: 15 بكسل! مهم ؛ الحشو على اليمين: 5 بكسل! مهم ؛} # main-nav ul li: hover> ul {display: block؛} # main-nav ul ul.current-menu-item ، # main-nav ul ul.current-menu-parent، # main-nav ul li.current-page-ancestor { هامش قمة: 0؛ الطول: 50px؛ من اليسار إلى اليسار: 0 لا شيء! } # main-nav ul ul.current-menu-item ul.sub-menu a، # main-nav ul li.current-menu-item ul.sub-menu a: hover، # main-nav ul li.current-menu-parent ul.sub-menu a، # main-nav ul li.current-menu-parent ul.sub-menu a: hover # main-nav ul li.current-page-ancestor ul.sub-menu a، # main-nav ul li.current-page-ancestor ul.sub-menu a: hover {background: none! important؛} # main-nav ul li.current-menu-item a، # main-nav ul li.current-menu-item a: hover، # main-nav ul li.current-menu-parent a، # main-nav ul li.current-menu-parent a: hover، # main-nav ul li.current-page-ancestor a، # main-nav ul li.current-page-ancestor a: hover { خلفية: # d01f3c. ظل النص: 0 1px 1px # b43300؛ اللون: # الاتحاد الفرنسي. الطول: 50px؛ خط الطول: 50px؛ border-right: 0 لا شيء! } # main-nav ul.sub-menu li.current-menu-item، # main-nav ul.sub-menu li.current-menu-item a، # main-nav li.current-menu-item ul.sub-menu a، # main-nav ul.sub-menu li.current-menu-parent، # main-nav ul.sub-menu li.current-menu-parent a، # main-nav li.current-menu-parent ul.sub-menu a، # main-nav ul.sub-menu li.current-page-ancestor، # main-nav ul.sub-menu li.current-page-ancestor a، # main-nav li.current-page-ancestor ul.sub-menu a {height: auto! important؛ خط الطول: 12px؛} # main-nav ul li.menu-item-home ul li a، # main-nav ul ul li.menu-item-home a، # main-nav ul li.menu-item-home ul li a: hover { لون الخلفية: شفاف! النص في الهامش: 0؛ صورة الخلفية: لا شيء! الارتفاع: تلقائي! عرض: السيارات. } # الرئيسي-القائمة الغوغاء، # أعلى القائمة الغوغاء { الخلفية: # 222 ؛ العرض: 710 بكسل. الحشو: 5px؛ border: 1px solid # 000؛ اللون: #DDD. الارتفاع: 27 بكسل الهامش: 13 بكسل × 0 × 10 بكسل ؛ } # أعلى القائمة الغوغاء { العرض: 350 بكسل ؛ الهامش: 2 بكسل 0 0 0؛ } # الرئيسي-nav.fixed-الملاحة { الموقف: ثابت؛ أعلى: 0؛ الحق: 0؛ العرض: 100٪! ض مؤشر: 999. التعتيم: 0.9. -webkit-box-shadow: 0 5px 3px rgba (0، 0، 0، .1)؛ -moz-box-shadow: 0 5px 3px rgba (0، 0، 0، .1)؛ box-shadow: 0 5px 3px rgba (0، 0، 0، .1)؛ } # menu-main a.home {text-indent: -9999px؛ padding: 0؛ width: 60px؛ background-image: url (http://3.bp.blogspot.com/-gLyWqvxTm1I/UkxNBw50IQI/AAAAAAAADO8/Qn- VSHK9N1g / S1600 / bhome.png)؛ خلفية موقف: المركز؛ الخلفية تكرار: لا توجد تكرار} / * ------ الصفحة الرئيسية www.madad2.com ----------- * / # محتوى التفاف { تعويم: الحق؛ عرض: 100٪؛ ماكس العرض: 960px؛ } #يحتوى{ تعويم: الحق؛ عرض: 100٪؛ ماكس العرض: 620px؛ } t: 1.4em؛ color: # 0e0e0e؛ display: block؛ margin: 5px 0 0؛ max-height: 36px؛ overflow: hidden} / * ------ نهاية قائمة منسدلة www.madad2.com ----------- * /

ثم قم بالبحث عن الرمز </ head>

ثم إضافة الكود التالي فوقه مباشرةَ

الآن أختر المكان الذي يمكنك الإضافة إليه قابلا أن تكون إضافته داخل القالب أسفل رأس المدونة وهو أنسب مكان أسفل </ header> أو أسفل <header> أو عن طريق الرحلة ثمّة HTML / JavaScript ثم إضافة الكود التالي