<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>

​

​

     <style>

    #RLMenu{

    width: 240px;

    height: 100%;

    position: fixed;

    }

    .RLMenu-left{

    right: -180px;

    top: 0px;

    transition:right 1s;

    }

    .RLMenu-left:hover{

    right:0px;

    }

    /*################## RIGHT MENU ##############*/

    .RLMenu-right{

    right: -180px;

    top: 0px;

    direction: rtl;

    transition:right 1s;

    }

    .RLMenu-right ul>li i,#toggle{

    right: 200px;

    }

    .RLMenu-right:hover{

    right:0px;

    }

    #menuHeader{

    width: 100%;

    height: 60px;

    cursor: pointer;

    }

    #toggle{

    position: absolute;

    right: 195px;

    top: 10px;

    }

    #menuLogo{

    position: absolute;

    top: 10px;

    left:70px;

    }

    #RLMenu ul>li{

    position: relative;

    height: 45px;

    width: 100%;

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

    list-style: none;

    }

    #RLMenu ul>li a{

    color: #fff;

    line-height: 48px;

    margin: 50px;

    font-family: DroidNaskh-Regular;

    transition: color 0.5s;

    text-decoration: none;

    }

    #RLMenu ul>li i{

    position: absolute;

    right: 200px;

    top:15px;

    color: rgba(255, 255, 255, 0.3);

    transition: color 0.5s;

    }

    #social{

    width: 85%;

    height: 100px;

    margin: 20px 23px;

    }

    #social a{

    text-decoration: none;

    }

    #social i{

    width: 36px;

    height: 36px;

    color: #fff;

    text-align: center;

    line-height: 37px;

    border: 1px solid rgba(255, 255, 255, 0.03);

    transition: background 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;

    }

    #social .fa-facebook:hover{

    background: #305891;

    }

    #social .fa-twitter:hover{

    background: #2CA8D2;

    }

    #social .fa-youtube:hover{

    background: #C82828;

    }

    #social .fa-google-plus:hover{

    background: #CE4D39;

    }

    #RLMenu{

    background: #222222;

    z-index:999;

    color: #fff;

    }

    #menuHeader{

    background: #24AAE9;

    }

    #RLMenu ul>li:hover  a{

    color: #24AAE9;

    }

    #RLMenu ul>li:hover  i{

    color: #24AAE9;

    }

    </style>

​

    <div class='RLMenu-left' id='RLMenu'>

    <div id='menuHeader'>

    <div id='toggle'><i class='fa fa-bars fa-2x'/></i></div>

    <div id='menuLogo'>

    <img alt='RLMenu' src='https://dl.dropboxusercontent.com/s/6f6otd1eiesydin/%D8%A7%D9%84%D9%85%D8%B7%D9%88%D8%B1.png' idth="70" height="50"/>

    </div>

    </div>

    <nav>

    <ul>

    <li>

    <a href='http://www.almtwr.net/'>

         الرئيسية <i class='fa fa-home'/>

    </i></a>

    </li>

    <li>

    <a href='http://www.almtwr.net/p/blog-page_6.html'>

         فهرس المدونة <i class='fa fa-user'/>

    </i></a>

    </li>

    <li>

    <a href='http://www.almtwr.net/p/privacy-policy-ibrachoukrigmail.html'>

         سياسة الإستخدام <i class='fa fa-users'/>

    </i></a>

    </li>

    <li>

    <a href='http://www.almtwr.net/2014/05/support.html'>

         الدعم الفني <i class='fa fa-shopping-cart'/>

    </i></a>

    </li>

    <li>

    <a href='http://www.almtwr.net/p/blog-page_29.html'>

         اتصل بنا <i class='fa fa-file'/>

    </i></a>

    </li>

    <li>

    <a href='http://www.almtwr.net/search/label/%D8%A8%D9%84%D9%88%D8%AC%D8%B1'>

         بلوجر <i class='fa fa-laptop'/>

    </i></a>

    </li>

    <li>

    <a href='http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%B3%D9%8A%D9%88'>

         السيو <i class='fa fa-home'/>

    </i></a>

    </li>

    <li>

    <a href='http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9'>

         البرمجة <i class='fa fa-group'/>

    </i></a>

    </li>

    <li>

    <a href='http://www.almtwr.net/search/label/%D8%A7%D9%84%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA'>

         مقالات <i class='fa fa-folder'/>

    </i></a>

    </li>

    <li>

    <a href='http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%AD%D9%84%D9%82%D8%A7%D8%AA?max-results=8'>

         الحلقات<i class='fa fa-envelope'/>

    </i></a>

    </li>

    </ul>

    </nav>

    <div id='social'>

    <a href='https://www.facebook.com/mtwernet'>

    <i class='fa fa-facebook fa-2x'/>

    </i></a>

    <a href='https://plus.google.com/u/0/100131105852591729801'>

    <i class='fa fa-google-plus fa-2x'/>

    </i></a>

    <a href='https://twitter.com/i27mad'>

    <i class='fa fa-twitter fa-2x'/>

    </i></a>

    <a href='http://www.youtube.com/user/ahmadwaleed4'>

    <i class='fa fa-youtube fa-2x'/>

    </i></a>

    </div>

    </div>

​