قائمة جانبيه منزلقه

1. لوحة تحكم بلوجر.
2. القالب.
3. html.
4. أبحث عن b:skin أضف قبله الكود أدناه.
5. يمكنك المعاينه من هنا.

#tuhfawebserv { width: 240px; height: 100%; position: fixed; margin: 0 -61px; } .tuhfawebserv-left{ right: -180px; top: 0px; transition:right 1s; } .tuhfawebserv-left:hover{ right:0px; } /*################## RIGHT MENU ##############*/ .tuhfawebserv-right{ right: -180px; top: 0px; direction: rtl; transition:right 1s; } .tuhfawebserv-right ul>li i,#toggle{ right: 200px; } .tuhfawebserv-right:hover{ right:0px; } #menuHeader { width: 128%; height: 60px; cursor: pointer; } #toggle{ position: absolute; right: 195px; top: 10px; } #menuLogo { position: absolute; top: 15px; left: -13px; width: 170px; } .fa-2x { font-size: 3em; margin: -2px 60px; animation: heartbeat-loader 1300ms ease 0s infinite normal; transform-origin: 50% 50%; transform: rotate(19deg) scale(1); position: absolute; } #tuhfawebserv ul>li{ position: relative; height: 45px; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.03); list-style: none; } #tuhfawebserv ul>li a { color: #fff; line-height: 48px; margin: 82px; font-family: lamar; transition: color 0.5s; text-decoration: none; } #tuhfawebserv ul>li i{ position: absolute; right: 200px; top:15px; color: rgba(255, 255, 255, 0.3); transition: color 0.5s; } .define h3:hover{ color:#169aff; border-top:3px solid #169aff; border-bottom:3px solid #169aff; } .define h3{ text-transform: uppercase; text-align:center; } #tuhfawebserv { background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinISY0ruc9XyE5PWxekpETDiLTsijyJm5FORlWOKojcp1PoEUr-WF7JtuF2wyWVtMhW3i6dBvDyOG76zY461nGTCl1ctTeb9QoXQHWU08QW4XdTzj4V4Y_JxG2sM-L_yyhc7cOHqaH1-Cr/w938-h350-no/header-6.png); z-index: 999; color: #fff; border-left: 2px solid #f9990a; } .fa-heart:before { content: "\f004"; color: #f9990a; } #menuHeader { background: #3a93c300; border-radius: 0 0px 0px 25px; } #tuhfawebserv ul>li:hover a { color: #faaf3f; } #tuhfawebserv ul>li:hover i{ color: #24AAE9; }