قائمة جانبية لمدونات بلوجر خفيف

البحث عن
]]></b:skin>
فوقه
.menu-outer:hover ~ .menu-close{margin-right:-100px;background-color:#444}
.menu-outer:hover .bar{background:rgba(100,200,240,.9)}
.menu-outer > nav ul{top:5%}
.menu-outer{overflow:hidden;position:fixed;top:0;font-family:'Droid Arabic Kufi',Montserrat;z-index:998;width:100%;left:100%;margin-left:-100px;height:200%;background:rgba(100,200,240,.9);-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s;-webkit-transform-origin:top left;-moz-transform-origin:top left;-ms-transform-origin:top left;-o-transform-origin:top left;transform-origin:top left;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.menu-outer:hover{background:rgba(100,200,240,.98);left:0;margin-left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
.menu-icon{z-index:999;position:absolute;top:58px;left:15px;width:30px;pointer-events:none;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s}
.menu-icon .bar{background:rgba(250,250,250,1);width:100%;height:5px;margin:0 0 5px;-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s}
.menu-outer:hover > .menu-icon{opacity:0}
nav ul{position:absolute;width:100%;padding:0;left:10%;;/*prevents possible click when not oppened*/
-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s}
.menu-outer:hover > nav ul{left:0}
nav li{list-style:none;text-align:center;text-transform:uppercase}
nav li a{font-size: 23px;color:#fff;text-decoration:none;margin:0 auto;padding:20px;display:block;-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s}
nav li a:hover{color:#fafafa;text-decoration:none}
@media screen and (max-width:600px),screen and (max-height:600px){nav ul{font-size:.75em}nav ul a{padding:10px}}
.menu-close{z-index:9999;position:fixed;top:0;right:100%;width:200px;height:200px;background:rgba(250,130,70,1);cursor:pointer;-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s;-webkit-transform-origin:top right;-moz-transform-origin:top right;-ms-transform-origin:top right;-o-transform-origin:top right;transform-origin:top right;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.menu-close .menu-icon{right:15px;left:auto;top:68px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.menu-close .bar{background:rgba(250,250,250,1);width:100%;height:5px;position:absolute;-webkit-transform-origin:center;-moz-transform-origin:center;-ms-transform-origin:center;-o-transform-origin:center;transform-origin:center}
.menu-close .bar:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.menu-close .bar:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
البحث عن
</body>
فوقه
<div class='menu-outer'>
<div class='menu-icon'>
<div class='bar'/>
<div class='bar'/>
<div class='bar'/>
</div>
<nav>
<ul>
<li><a href='رابط/'>الرئيسية</a></li>
<li><a href='رابط/'>عن المدونة</a></li>
<li><a href='رابط/'>من نحن</a></li>
<li><a href='رابط/'>اعلن على المدونة</a></li>
<li><a href='رابط/'>اتصل بنا</a></li>
<li><a href='رابط/'>سياسة الخصوصية</a></li>
</ul>
</nav>
</div>
<a class='menu-close' onclick='return true'>
<div class='menu-icon'>
<div class='bar'/>
<div class='bar'/>
</div>
</a>
ضيف الروابط لتغير