كودhtml+Cssلعمل قائمة جانبية أحترافية من تصميم مهووس
بسم الله
السلام عليكم 
اليوم تم بحمد الله تعالى تصميم ازرار جانبية للمنتدى
الأزرار غاية الجمال والروعة 
اليكم رابط المعاينة المباشر


والان مع الكود 

الكود:

<style>


#MaHwOsNeT li{
   list-style:none;
   height:39px;
   padding:2px;
   width:40px;
}

#MaHwOsNeT span{
   /* Container properties */
   width:0;
   left:38px;
   padding:0;
   position:absolute;
   overflow:hidden;

   /* Text properties */
   font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
   font-size:18px;
   font-weight:bold;
   letter-spacing:0.6px;
   white-space:nowrap;
   line-height:39px;
   
   /* CSS3 Transition: */
   -webkit-transition: 0.25s;
   
   /* Future proofing (these do not work yet): */
   -moz-transition: 0.25s;
   transition: 0.25s;
}

#MaHwOsNeT a {
    background: url('https://i37.servimg.com/u/f37/19/56/23/70/naviga10.jpg') no-repeat;
    height: 39px;
    width: 38px;
    right: 530px;
    display: block;
    position: relative;
}
/* General hover styles */

#MaHwOsNeT a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#MaHwOsNeT a:hover{
   text-decoration:none;
   
   /* CSS outer glow with the box-shadow property */
   -moz-box-shadow:0 0 5px #9ddff5;
   -webkit-box-shadow:0 0 5px #9ddff5;
   box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#MaHwOsNeT .home {   background-position:0 0;}
#MaHwOsNeT .home:hover {   background-position:0 -39px;}
#MaHwOsNeT .home span{
   background-color:#7da315;
   color:#3d4f0c;
   text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#MaHwOsNeT .about { background-position:-38px 0;}
#MaHwOsNeT .about:hover { background-position:-38px -39px;}
#MaHwOsNeT .about span{
   background-color:#1e8bb4;
   color:#223a44;
   text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#MaHwOsNeT .services { background-position:-76px 0;}
#MaHwOsNeT .services:hover { background-position:-76px -39px;}
#MaHwOsNeT .services span{
   background-color:#c86c1f;
   color:#5a3517;
   text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#MaHwOsNeT .portfolio { background-position:-114px 0;}
#MaHwOsNeT .portfolio:hover{ background-position:-114px -39px;}
#MaHwOsNeT .portfolio span{
   background-color:#d0a525;
   color:#604e18;
   text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#MaHwOsNeT .contact { background-position:-152px 0;}
#MaHwOsNeT .contact:hover { background-position:-152px -39px;}
#MaHwOsNeT .contact span{
   background-color:#af1e83;
   color:#460f35;
   text-shadow:1px 1px 0 #d244a6;
}

/* The styles below are only needed for the demo page */

#main{
   margin:80px auto;
   position:relative;
   width:40px;
}


h1{
   color:#fff;
   font-size:30px;
   font-weight:normal;
   padding:60px 0 20px;
   text-align:center;
}

h2{
   font-weight:normal;
   text-align:center;
}

h1,h2{
   font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

a, a:visited,a:active {
   color:#0196e3;
   text-decoration:none;
   outline:none;
}

a:hover{
   text-decoration:underline;
}

a img{
   border:none;
}

p.note{
   color:#707070;
   font-size:10px;
   text-align:center;
   margin:50px;
}
</style>

<div id="main">

<ul id="MaHwOsNeT">
    <li>
       <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>
   
    <li>
       <a class="about" href="#">
            <span>About</span>
        </a>
    </li>
   
    <li>
       <a class="services" href="#">
            <span>Services</span>
        </a>
    </li>
   
    <li>
       <a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>
   
    <li>
       <a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>
   
</div>



والحمد لله وفيت واكتفيت الى الان 
وشكرا ادعمنا بنشر الموضوع اذا عجبك 
الحمد لله