قائمة احترافية

هوم بلوجر

by homeblogger

HTML

<div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <!--crawlist.net widget starts-->
    <div class="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>
       </ul>
   </div>
   <!--crawlist.net widget ends-->
</div>
<a class="menu-close" onClick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>



<style>
/*homeblog7.blogspot.com CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

.menu-outer:hover ~ .menu-close {
  margin-right:-100px;
}
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
.menu-outer > .nav ul { top:15%; }


.menu-outer {
  overflow: hidden;
  position: fixed;
  top: 0;
  font-family: 'Montserrat', serif;
  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:...