قائمة جانبية ثابتة CSS احترفية

قائمة جانبية ثابتة CSS  احترفية

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

معاينة القائمة

كيفية إضافة القائمة

ابحث عن الوسم ]]></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;}
 

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

 <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 يمكنك وضعه في مكان القائمة المستبدلة أو بعد أكواد القائمة الموجودة لديك
أو يمكنك وضعه فوق/قبل الوسم </head>

 <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='http://goo.gl/M6z6Ku'><i class='fa fa-chain-broken'></i> تبادل اعلاني</a>
</li>
</ul>
</nav> 

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


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