إضافة قائمة أفقية احترافية بتأتيرات

إضافة قائمة أفقية احترافية بتأتيرات

mohamed-alaa

الثلاثاء، 27 مايو 2014

اقرأ ايضا

 

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

هذا هو الكود قم بتركيبه فى أداة جديدة أو عوضه بالقائمة القديــمة التي كنت تملكها ... وإن لم تستطع تركيبها ارسل رابط مدونتك والمكان الذي تريد وضعها به بتعليق و سأدلك بالطريقة الصحيحة :]

<div id='nav-tp'>
<div class='menu-tp'>
<div class='menu-x'>
<ul>
<li class='home'><a href="#"><img src="http://im32.gulfup.com/odWSc.png" border="0"/></a></li>
<li class='transmit'><a href="#"><img src="http://im32.gulfup.com/HPg04.png" border="0"/></a></li>
<li class='prefs'><a href="#"><img src="http://im32.gulfup.com/u4Ib6.png" border="0"/></a></li>
<li class='spotlight'><a href="#"><img src="http://im32.gulfup.com/KfoOw.png" border="0"/></a></li>
<li class='code-edit'><a class='code-edit' href="#"><img src="http://im32.gulfup.com/77tMy.png" border="0"/></a></li>
<li class='edit-design'><a href="#"><img src="http://im32.gulfup.com/KiDl8.png" border="0"/></a></li>
<li class='xcode'><a class='xcode' href="#"><img src="http://im32.gulfup.com/C3YHS.png" border="0"/></a></li>
<li class='text-edit'><a href="#"><img src="http://im32.gulfup.com/mOk3u.png" border="0"/></a></li>
</ul>
</div>
</div>
</nav>
<a href='http://theprofessional-blogger.blogspot.com/' style='display: none;' rel='dofollow' >محترفي البلوجر</a>
<style>
/*--start-menu-by-osbook2013--*/
#nav-tp {
width: 995px;
margin: auto;
overflow: hidden;
}
.menu-x {
width: 992px;
height: 130px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6KgykbVShbStMdI1UUKqOM-ZeFATBAADRovkNeeoYfjqnJRc6l-6b6FQc8loT_Feew30Vbh1GMdwk3KLReDp4zTaG0i1eN-kSr6A59qBKEX7q9D2bjtF9aBx8gJN_D3mgTXycUztbgGY/s1600/bk_header.png);
border-right: 1px solid #1f1f1f;
border-left: 1px solid #1f1f1f;
}
.menu-x ul {
height: 122px;
padding: 0;
}
.menu-x ul li {
float: right;
padding: 10px 8px;
border-bottom: 2px solid #1f1f1f;
border-top: 2px solid #1f1f1f;
border-left: 1px solid #1F1F1F;
border-right: 1px solid #1F1F1F;
-webkit-box-shadow: 1px 0px #333 inset;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
display: block;
}
.menu-x ul li a img {
width: 100px;
height: auto;
padding: 3px;
}
.home {
display: block;
}
.transmit {
display: block;
}
.prefs {
display: block;
}
.spotlight {
display: block;
}
.code-edit {
display: block;
}
.edit-design {
display: block;
}
.xcode {
display: block;
}
.text-edit {
display: block;
}
.home:hover {
background: #0CF598;
}
.transmit:hover {
background: #9F0EF1;
}
.prefs:hover {
background: #EE117B;
}
.spotlight:hover {
background: #FFEB00;
}
.code-edit:hover {
background: #F00E0E;
}
.edit-design:hover {
background: #98D31B;
}
.xcode:hover {
background: #0CB4F5;
}
.text-edit:hover {
background: #09F7ED;
}
</style>