CNMU Smiles For Blogger


آخر المساهمات
الإثنين يناير 15, 2018 3:35 pm
الأربعاء يناير 10, 2018 9:02 pm
الإثنين يناير 08, 2018 8:46 pm
السبت يناير 06, 2018 8:18 pm
السبت يناير 06, 2018 7:32 pm
السبت يناير 06, 2018 7:29 pm
السبت يناير 06, 2018 7:27 pm
السبت يناير 06, 2018 7:25 pm
السبت يناير 06, 2018 7:23 pm

حفظ البيانات | نسيت كلمة السر؟

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



مؤسس الموقع

مؤسس الموقع
معلوماتاضافية
تم التوثيق
جوجل
ذكر
عدد المساهمات : 335
التقييم : 3
تاريخ التسجيل : 18/10/2016
العمر : 25

معاينة صفحة البيانات الشخصي للعضو http://www.mahwos.yoo7.com/
الثلاثاء يناير 31, 2017 12:02 pm
كود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>


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

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

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

صفحة 1 من اصل 1
مهووس نت :: عروض مهووس :: أكواد أحلى منتدى