-->

قائمة احترافيه CSS3 تحت الهيدر للمدونات والمواقع بأحدث تكنولوجيا 2014

 قائمة احترافيه CSS3 تحت الهيدر للمدونات والمواقع بأحدث تكنولوجيا 2014
    بسم الله الرحمن الرحيم

    قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر:-
    قائمة جميلة مصممه بالـــ CSS3 مناسبة انشاءالله لجميع المواقع والمدونات , ايضاَ قمت بدمج خط احترافي معها غير الخطوط العاديه كي اجعل منظرها اجمل.
    قائمة احترافيه CSS3


















     طريقة التركيب : 

    • ادخل مدونتك .
    • التخطيط .
    • اختر المكان الذي تريد اضافة الاداة فيه .
    • اختر اداة عباره عن HTML/JAVASCRIPT .
    • الصق الكود التالي بها مع تغير ماسأذكر .:
    <ul class="big_nav">
    <li><a class="hdr_navi" href="#" id="home">الرئيسية</a></li>
    <li><a class="hdr_navi" href="#" id="twitr">تويتر</a></li>
    <li><a class="hdr_navi" href="#" id="ggl">جوجل بلس</a></li>
    <li><a class="hdr_navi" href="#" id="face" rel="nofollow">فيس بوك</a></li>
    </ul>
    <style>
    .big_nav {
    float: left;
    width: 408px;
    }
    ol, ul {
    list-style: none;
    }
    .big_nav li {
    float: right;
    margin-left: 7px;
    margin-bottom: 7px;
    }
    a#home {
    background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -322px #df517f;
    }
    a#home:hover {
    background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -64px -322px #ffffff;
    }
    a#twitr {
    background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -73px #973b86;
    }
    a#twitr:hover {
    background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -73px #ffffff;
    }
    a#ggl {
    background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -235px #ed8629;
    }
    a#ggl:hover {
    background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -235px #ffffff;
    }
    a#face {
    background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -151px #df517f;
    }
    a#face:hover {
    background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -151px #ffffff;
    }
    .big_nav li .hdr_navi:hover {
    background-color: #ffffff;
    color: #df517f;
    }
    a:hover, body a:hover  {
    color: #df517f;
    text-decoration: none;
    }
    a {
    text-decoration: none;
    }
    .big_nav li .hdr_navi {
    display: block;
    height: 35px;
    width: 95px;
    background: url('img/big_ics.png') no-repeat -202px 33px #2ad0ff;
    color: #fff;
    font-family: goth;
    font-size: 14px;
    text-align: center;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    transition: all 600ms ease;
    padding-top: 60px;
    }
    @font-face {
    font-family: 'goth';
    src: url(//:) format('no404'), url('https://jetara.googlecode.com/svn/trunk/DroidKufi-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }
    </style>


    الاصفر : اسم الصفحة .
    الاحمر : الرابط .

    Mohamed Shaban
    @مرسلة بواسطة
    كاتب ومحرر في مدونة : مدونة انتا الكسبان .