مرحبا ! لابد وانك تتصفح احدى المدونات بلوجر ولاحضة هناك قوائم منسدلة CSS جديدة بشكل احترافي اثارة اعجابك بجماليتها ، لابئس اليوم اتيتك باحدث و افضل و اجمل قائمة منسدلة يمكنك تركيبها بكل سهولة على المدونة الخاص بك، لتصبح احترافية من جهة و تحسن من استخدام الزوار لموقع الخاص بك من جهة اخرى، ادن كيفية تركيب قائمة منسدلة احترافية لمدونات بلوجر ؟ هذا ما سنتطرق اليه في هذه التدوينة على مدونة المحترف العربي اليوم بادن الله.
قائمة منسدلة لمدونات بلوجر احترافية CSS : معاينة من هنا
 |
| قائمة منسدلة احترافية لمدونات بلوجر |
قائمة متجاوبة تحتاج تعديل الروابط و التسميات بكل سهولة و لاضافتها تابع التالي :
توجه الى 👈 لوحة تحكم بلوجر ثم 👈 قالب 👈 ثم تحرير html :
ابحث عن <body> ثم حدد مكان الدي تريد اضافت اليه القائمة اضف الكود التالي فوقه :
<nav dir='rtl'>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>
<ul class="menu">
<li><a class="homer" href="#"><i class="fa fa-home"></i> الرئيسية</a></li>
<li><a href="#"><i class="fa fa-user"></i> عنا</a></li>
<li><a href="#"><i class="fa fa-camera"></i> المدونة</a>
<ul class="sub-menu">
<li><a href="#">تسمية</a></li>
<li><a href="#">تسمية</a>
<ul>
<li><a href="#">تسمية 1</a></li>
<li><a href="#">تسمية 2</a></li>
<li><a href="#">تسمية 3</a></li>
<li><a href="#">تسمية 4</a></li>
<li><a href="#">تسمية 5</a></li>
</ul>
</li>
<li><a href="#">تسمية 3</a>
<ul>
<li><a href="#">تسمية 1</a></li>
<li><a href="#">تسمية 2</a></li>
<li><a href="#">تسمية 3</a></li>
<li><a href="#">تسمية 4</a></li>
<li><a href="#">تسمية 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-android"></i> اندرويد</a>
<ul class="sub-menu">
<li><a href="#">تطبيقات 1</a></li>
<li><a href="#">العاب 2</a>
<ul>
<li><a href="#">اكشن 1</a></li>
<li><a href="#">رياضة 2</a></li>
<li><a href="#">طبخ 3</a></li>
<li><a href="#">اللغة 4</a></li>
<li><a href="#">تعلم 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-envelope"></i> اتصال</a></li>
<li><a href="#"><i class="fa fa-sitemap"></i> الفهرس</a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i> اتفاقية</a></li>
</ul>
</nav>الان بعد اضافة الكود السابق ابحث من جديد عن ]]></b:skin> و اضف الكود css التالي فوقه :
ابحث عن </body> ثم اضف الكود التالي فوقه :
nav{display:block;margin-top:100px;background:#374147}
.menu{display:block}
.menu li{display:inline-block;position:relative;z-index:100}
.menu li:first-child{margin-left:0}
.menu li a{font-weight:600;text-decoration:none;padding:20px 15px;display:block;color:#fff;transition:all 0.2s ease-in-out 0s}
.menu li a:hover,.menu li:hover>a{color:#fff;background:#9ca3da}
.menu ul{visibility:hidden;opacity:0;margin:0;padding:0;width:150px;position:absolute;right:0;background:#fff;z-index:99;transform:translate(0,20px);transition:all 0.2s ease-out}
.menu ul:after{bottom:100%;right:20%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:6px;margin-right:-6px}
.menu ul li{display:block;float:none;background:none;margin:0;padding:0}
.menu ul li a{font-size:12px;font-weight:normal;display:block;color:#797979;background:#fff}
.menu ul li a:hover,.menu ul li:hover>a{background:#9ca3da;color:#fff}
.menu li:hover>ul{visibility:visible;opacity:1;transform:translate(0,0)}
.menu ul ul{right:149px;top:0;visibility:hidden;opacity:0;transform:translate(20px,20px);transition:all 0.2s ease-out}
.menu ul ul:after{right:-6px;top:10%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-left-color:#fff;border-width:6px;margin-top:-6px}
.menu li>ul ul:hover{visibility:visible;opacity:1;transform:translate(0,0)}
.responsive-menu{display:none;width:100%;padding:20px 15px;background:#374147;color:#fff;text-transform:uppercase;font-weight:600}
.responsive-menu:hover{background:#374147;color:#fff;text-decoration:none}
a.homer{background:#9ca3da}
@media (min-width:768px) and (max-width:979px){.mainWrap{width:768px}.menu ul{top:37px}.menu li a{font-size:12px}a.homer{background:#374147}}
@media (max-width:767px){.mainWrap{width:auto;padding:50px 20px}.menu{display:none}.responsive-menu{display:block;margin-top:100px}nav{margin:0;background:none}.menu li{display:block;margin:0}.menu li a{background:#fff;color:#797979}.menu li a:hover,.menu li:hover>a{background:#9ca3da;color:#fff}.menu ul{visibility:hidden;opacity:0;top:0;right:0;width:100%;transform:initial}.menu li:hover>ul{visibility:visible;opacity:1;position:relative;transform:initial}.menu ul ul{right:0;transform:initial}.menu li>ul ul:hover{transform:initial}}
ابحث عن </body> ثم اضف الكود التالي فوقه :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var touch = $('#resp-menu');
var menu = $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
//]]>
</script>كانت هذه تدنة حول قائمو منسدلة لمدونات بلوجر بواسط اكواد CSS اتمنا ان تنال اعجابكم و لا تنسى عزيزي مدون ان تشجعنى باضافة تعليقك على المشاركة من اجل تقديم افضل مالدينا من اضافات و قوالب بلوجر و اكواد CSS. وشكرا!
تعليقات
إرسال تعليق