إضافة قائمة جانبية مندلسة وشكلها انيق بخاصية الcss من موقع عربى |بالعربى أحلى

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

اليوم معى إضافة رائعة ومميزة والكل يحبها وهى قائمة جانبية ثابتة ومندلسة بشكل جذاب ورائع وهى بخاصية الcss كما ذكرت فى عنوان التدوينة والذى يميز هذة اللغة انها سهلة ورائعة ويمكنك تغيير الوانها بسهولة تامة لتتناسب مع مدونتك

معاينة

لنذهب الى الشرح وكيفية التركيب

1:إبحث عن الوسم ]]></b:skin> و ألصق قبله/فوقه الوسم التالي

/* CSS Simple Menu */ .unstyled-list {padding:0;} .unstyled-list li {list-style:none;margin:0;padding:0;} .nav-menu {position:absolute;right:0;top:0;min-width:140px;opacity:0;backface-visibility:hidden;transform:translate3d(0,20px,0);visibility:hidden;box-shadow:0 3px 8px -3px rgba(0,0,0,0.2);transition:all .2s ease, visibility 0s linear; } .nav {position:fixed;top:5%;right:2%;z-index:102;} .nav.active .fa-bars {opacity:0;} .nav.active .fa-times {opacity:1;color:#fff;background:#e6ae48; } .nav.active .nav-menu {opacity:1;transform:translate3d(0,50px,0);visibility:visible; transition-delay:0s;} .menu-btn {display:block;width:40px;height:40px;color:#fff;background-color:rgba(0,0,0,0.2); transition:all .2s ease;text-align:center;position:relative;z-index:1;} .menu-btn .fa {position:absolute;top:0;right:0;font-size:24px;line-height:40px;width:40px; vertical-align:middle;transition:opacity .1s linear;} .menu-btn .fa-bars {opacity:1;color:#fff;} .menu-btn .fa-times {opacity:0;} .menu-btn:hover {background-color:#e6ae48;color:#fff;} .nav-item-link {display:block;font-size:13px;color:#999;padding:15px;background-color:#fff; transition:all .2s ease;border-bottom:1px solid #e9e9e9;} .nav-item:last-child .nav-item-link {border-bottom:none;} .nav-item .nav-item-link i.fa.fa-home,.nav-item .nav-item-link i.fa.fa-paper-plane,.nav-item .nav-item-link i.fa.fa-list-alt,.nav-item .nav-item-link i.fa.fa-coffee{margin-right:10px;} .nav-item-link:hover {background-color:#fcfcfc;} a.nav-item-link:hover {color:#1497ec;} .unstyled-list:before {bottom:100%;right:10%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-bottom-color:#e6ae48;border-width:8px;margin-left:-8px;} .nav-item:first-child .nav-item-link {border-top:3px solid #e6ae48;}

2:ابحث عن الوسم </head> و ألصق فوقه/قبله الكود التالي

(function() {

window.Menu = (function() {

Menu.init = function() {

return $('[data-menu]').each(function(idx, el) {

return new Menu($(el));

});

};

function Menu($el) {

this.nav = $el;

this.menubtn = $('.menu-btn', this.nav);

this.menubtn.on('click', (function(_this) {

return function(ev) {

_this.nav.toggleClass('active');

return false;

};

})(this));

}

return Menu;

})();

$(function() {

if ($('[data-menu]').length) {

return Menu.init();

}

});

}).call(this);

</script>

كود HTML يمكنك وضعه في مكان القائمة المستبدلة أو بعد أكواد القائمة الموجودة لديكأو يمكنك وضعه فوق/قبل الوسم </head>

</a>

<a class='nav-item-link' href='/'><i class='fa fa-home'></i> الرئيسية</a>

</li>

</li>

<a class='nav-item-link' href='/p/archive.html'><i class='fa fa-list-alt'></i> الأرشيف</a>

</li>

<a class='nav-item-link' href='/p/off-topic.html'><i class='fa fa-coffee'></i> السجل</a>

</li>

<a class='nav-item-link' href='http://3rbey.blogspot.com/p/blog-page_18.html'><i class='fa fa-chain-broken'></i> تبادل اعلاني</a>

</li>

</ul>

</nav>

لا تنسى تغيير الكلمات و الروابط بما يناسبك

أتمنى أن أكون قد وفقت في طرح الموضوع و الإضافة لكمإن كان لديك أي استفسار أو سؤال فـَ باب التعليقات مفتوح للجميع

الموضوع من قسم:

إضافات بلوجر

تنويه : الصور والفيديوهات في هذا الموضوع على هذا الموقع مستمده أحيانا من مجموعة متنوعة من المصادر الإعلامية الأخرى. حقوق الطبع محفوظة بالكامل من قبل المصدر. إذا كان هناك مشكلة في هذا الصدد، يمكنك الاتصال بنا من هنا.