قائمة جانبية ثابتة CSS احترفية
في هذه التدوينة أقدم لكم قائمة جانبية احترافية لا تأخذ ذالك الحيز الكبير على عكس نظيراتها من القوائم
كيفية إضافة القائمة
ابحث عن الوسم ]]></b:skin> و ألصق قبله/فوقه الوسم التالي
ابحث عن الوسم </head> و ألصق فوقه/قبله الكود التالي
كود HTML يمكنك وضعه في مكان القائمة المستبدلة أو بعد أكواد القائمة الموجودة لديك
أو يمكنك وضعه فوق/قبل الوسم </head>
لا تنسى تغيير الكلمات و الروابط بما يناسبك
أتمنى أن أكون قد وفقت في طرح الموضوع و الإضافة لكم
إن كان لديك أي استفسار أو سؤال فـَ باب التعليقات مفتوح للجميع
ابحث عن الوسم
/* 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;}.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;}
ابحث عن الوسم
<script> (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>(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 يمكنك وضعه في مكان القائمة المستبدلة أو بعد أكواد القائمة الموجودة لديك
أو يمكنك وضعه فوق/قبل الوسم
<nav class='nav' data-menu=''> <a class='menu-btn' href='#'> <i class='fa fa-bars'></i> <i class='fa fa-times'></i> </a> <ul class='unstyled-list nav-menu'> <li class='nav-item'> <a class='nav-item-link' href='/'><i class='fa fa-home'></i> الرئيسية</a> </li> <li class='nav-item'> <a class='nav-item-link' href='/p/contact.html'><i class='fa fa-paper-plane'></i> اتصل بنا</a> </li> <li class='nav-item'> <a class='nav-item-link' href='/p/archive.html'><i class='fa fa-list-alt'></i> الأرشيف</a> </li> <li class='nav-item'> <a class='nav-item-link' href='/p/off-topic.html'><i class='fa fa-coffee'></i> السجل</a> </li> <li class='nav-item'> <a class='nav-item-link' href='/p/blog-page_160.html'><i class='fa fa-chain-broken'></i> تبادل اعلاني</a> </li> </ul> </nav><a class='menu-btn' href='#'><i class='fa fa-bars'></i><i class='fa fa-times'></i></a><ul class='unstyled-list nav-menu'><li class='nav-item'><a class='nav-item-link' href='/'><i class='fa fa-home'></i> الرئيسية</a></li><li class='nav-item'><a class='nav-item-link' href='/p/contact.html'><i class='fa fa-paper-plane'></i> اتصل بنا</a></li><li class='nav-item'><a class='nav-item-link' href='/p/archive.html'><i class='fa fa-list-alt'></i> الأرشيف</a></li><li class='nav-item'><a class='nav-item-link' href='/p/off-topic.html'><i class='fa fa-coffee'></i> السجل</a></li><li class='nav-item'><a class='nav-item-link' href='/p/blog-page_160.html'><i class='fa fa-chain-broken'></i> تبادل اعلاني</a></li></ul></nav>
لا تنسى تغيير الكلمات و الروابط بما يناسبك
أتمنى أن أكون قد وفقت في طرح الموضوع و الإضافة لكم
إن كان لديك أي استفسار أو سؤال فـَ باب التعليقات مفتوح للجميع
التعليقات
إرسال تعليق
نسعد ونتشرف بتعليقاتكم
لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊