قائمة منسدلة متجاوبة احترافية مدونة بلوجر
اضافة قائمة افقية منسدلة احترافية ومتجاوبة مع جميع الاجهزة باستخدام css و html و jquery بلوجر. كنا قد قدمنا لكم مجموعة من قوائم الخاصة بمدونة بلوجر منها متجاوب ومنها ذات تصميم انيق ومنها سريع التجميل واخرى ذات تأثيرات خلاافية، وفي هذه التدوين ةسنقدم لكم كيفية اضافة قائمة افقية منسدلة احترافية ومتجاوبة مع جميع الاجهزة باستخدام css و html و jquery لمدونة بلوجر.
كيفية تركيب قائمة منسدلة متجاوبة:
طبعا يجب عليك معاينة اضافة من خلال الروابط التالية.
معاينة اضافة على الاجهزة الذكية
- لتركيب اضافة اتجه الى لوحة تحكم مدونتك ثم المظهر ثم تحرير html بعدها ابحث عن الوسم التالي.
</b:skin>
عند ايجاده ضع فوقه الكود التالي.
*,:after,:before{text-decoration:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{direction:rtl}
.animenu__toggle{display:none;cursor:pointer;background:#404040;border:0;padding:10px;height:40px;width:40px}
.animenu__toggle:hover{background:#c5c5c5}
.animenu__toggle__bar{display:block;width:20px;height:2px;background:#fff;-webkit-transition:.15s cubic-bezier(0.75,-0.55,0.25,1.55);transition:.15s cubic-bezier(0.75,-0.55,0.25,1.55)}
.animenu__toggle__bar + .animenu__toggle__bar{margin-top:4px}
.animenu__toggle--active .animenu__toggle__bar{margin:0;position:absolute}
.animenu__toggle--active .animenu__toggle__bar:nth-child(1){-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.animenu__toggle--active .animenu__toggle__bar:nth-child(2){opacity:0}
.animenu__toggle--active .animenu__toggle__bar:nth-child(3){-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.animenu{padding:0;margin:0 auto}
.animenu ul{padding:0;list-style:none;font:0 'Open Sans',Arial,Helvetica}
.animenu li,.animenu a{display:inline-block;font-size:15px}
.animenu a{display:block;text-transform:uppercase;height:60px;line-height:60px;color:#fff;font-size:17px;font-family:Droid Arabic Kufi;overflow:hidden;margin:0 5px}
.animenu__nav{background:#404040}
.animenu__nav > li{position:relative;border-right:1px solid #444}
.animenu__nav > li > a{padding:0 15px;text-transform:uppercase}
.animenu__nav > li > a:first-child:nth-last-child(2):before{content:"";position:absolute;border:4px solid transparent;border-bottom:0;border-top-color:currentColor;top:50%;right:5px}
.animenu__nav > li:hover > ul{opacity:1;visibility:visible;margin:0}
.animenu__nav > li:hover > a{color:#fff}
.animenu__nav__child{width:200px;min-width:100%;position:absolute;top:100%;right:0;z-index:1;opacity:0;visibility:hidden;margin:20px 0 0;background-color:#373737;-webkit-transition:margin .15s,opacity .15s;transition:margin .15s,opacity .15s}
.animenu__nav__child > li{width:100%;border-bottom:1px solid #515151}
.animenu__nav__child > li:first-child > a:after{content:'';position:absolute;height:0;width:0;right:1em;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:inherit}
.animenu__nav__child > li:last-child{border:0}
.animenu__nav__child a{padding:10px;width:100%;border-color:#373737}
@media screen and (max-width: 767px) {
.animenu__toggle{display:inline-block}
.animenu__nav,.animenu__nav__child{display:none}
.animenu__nav{margin:10px 0}
.animenu__nav > li{width:100%;border-right:0;border-bottom:1px solid #515151}
.animenu__nav > li:last-child{border:0}
.animenu__nav > li:first-child > a:after{content:'';position:absolute;height:0;width:0;left:1em;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:inherit}
.animenu__nav > li > a{width:100%;padding:10px;border-color:#404040;position:relative}
.animenu__nav a:hover{background-color:#c5c5c5;border-color:#0186ba;color:#fff}
.animenu__nav__child{position:static;background-color:#373737;margin:0;-webkit-transition:none;transition:none;visibility:visible;opacity:1}
.animenu__nav__child > li:first-child > a:after{content:none}
.animenu__nav__child a{padding-left:20px;width:100%}
}
.animenu__nav--open{display:block!important}
.animenu__nav--open .animenu__nav__child{display:block}
- اعد البحث عن الوسم التالي.
</body>
بعد عثورك عليه ضع الكود التالي فوقه.
<script type="text/javascript">
(function(){
var animenuToggle = document.querySelector('.animenu__toggle'),
animenuNav = document.querySelector('.animenu__nav'),
hasClass = function( elem, className ) {
return new RegExp( ' ' + className + ' ' ).test( ' ' + elem.className + ' ' );
},
toggleClass = function( elem, className ) {
var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
if( hasClass(elem, className ) ) {
while( newClass.indexOf( ' ' + className + ' ' ) >= 0 ) {
newClass = newClass.replace( ' ' + className + ' ' , ' ' );
}
elem.className = newClass.replace( /^\s+|\s+$/g, '' );
} else {
elem.className += ' ' + className;
}
},
animenuToggleNav = function (){
toggleClass(animenuToggle, "animenu__toggle--active");
toggleClass(animenuNav, "animenu__nav--open");
}
if (!animenuToggle.addEventListener) {
animenuToggle.attachEvent("onclick", animenuToggleNav);
}
else {
animenuToggle.addEventListener('click', animenuToggleNav);
}
})()
</script>
- الان نأتي لمرحلة اضافة الكود المسؤول عن اضهار القائمة ابحث عن الوسم التالي.
<div id='content-wrapper'>
بعد عثورك عليه ضع اسفله الكود التالي.
<div class='maxiwrap'>
<nav class='animenu'>
<button class='animenu__toggle'>
<span class='animenu__toggle__bar'></span>
<span class='animenu__toggle__bar'></span>
<span class='animenu__toggle__bar'></span>
</button>
<ul class='animenu__nav'>
<li><a href='#' itemprop='url'><span itemprop='name'/>الرئيسية</a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>منسدلة 1</span></a>
<ul class='animenu__nav__child'>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
</ul></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة 2 منسدلة</span></a>
<ul class='animenu__nav__child'>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
</ul></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة 3 منسدلة</span></a>
<ul class='animenu__nav__child'>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
</ul></li></ul></nav></div>
لا تنسى تغيير الروابط وتسميات بما يناسبك، ثم قم بحفظ المظهر.