قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر

قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر 

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

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .

قائمة احترافيه 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>