العراق اونلاين
نرحب
بكل من يزور
منتدانا



 
الرئيسيةالبوابةاليوميةمكتبة الصورس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول╣☼╠00%mybblogoكيويروابط ماوس
منتدبات سحر العيون
۞منور المنتدى۞ إسم المستخدم: زائر آخر زيارة لك كانت: أخر عضو مسجل: ameeraljn مواضيعى : ردودى
الرئيسية القوانين المجموعات مجلة المنتدي المشاركات الجديدة البحث التسجيل تسجيل الخروج

شاطر | 
 

  نافبار تتحرك عناوينه عند مرور الماوس عليها

اذهب الى الأسفل 
كاتب الموضوعرسالة
سحر العيون
Admin
Admin
avatar

عدد المساهمات : 341
تاريخ التسجيل : 05/01/2013

مُساهمةموضوع: نافبار تتحرك عناوينه عند مرور الماوس عليها   الخميس ديسمبر 11, 2014 5:32 pm


لمشاهدة النافبار

http://im31.gulfup.com/uIBcm.jpg
لاحظ عنوان 1 بعد وضع الماوس عليه

كود هوتميل يوضع فى التشكيلات العامة

الكود:
<ul id="nav">
    <li><a href="رابط عنوان 1">عنوان 1</a></li>
    <li><a href="رابط عنوان 2">عنوان 2</a></li>
    <li><a href="رابط عنوان 3">عنوان 3</a></li>
    <li><a href="رابط عنوان 4">عنوان 4</a></li>
  <li><a href="رابط عنوان 5">عنوان 5</a></li>
    <li><a href="رابط عنوان6">عنوان 6</a></li>
    <li><a href="رابط عنوان 7">عنوان 7</a></li>
</ul>


ضع العناوين التى تريدها والرابط الخاص بها

كود يوضع فى ورقة css

الرمز:


الكود:
* {
  padding: 0;
  margin: 0;
}
 
body {
  background: #f4f1e5;
  color: #544738;
  font-family: helvetica, sans-serif;
}
ul li {
    float: left;
    list-style: none;
    margin-right: 1em;
}
 
li a {
    color: #544738;
    text-decoration: none;
    float: left;
    font-size: 20px;
    padding: 12px;
}
 
li a:hover {
    color: #7eb9be;
}
@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('kulminoituva-webfont.eot');
    src: local('‚ò∫'), url('kulminoituva-webfont.woff') format('woff'), url('kulminoituva-webfont.ttf') format('truetype'), url('kulminoituva-webfont.svg#webfontHNAi9IoX') format('svg');
    font-weight: normal;
    font-style: normal;
}
ul li {
    float: left;
    list-style: none;
    margin-right: 1em;
    font-family: 'KulminoituvaRegular', helvetica, sans-serif;
    font-size: 25px;
    padding: 12px;
}
 
li a {
    color: #544738;
    text-decoration: none;
    float: left;
}
 
li a:hover {
    color: #7eb9be;
}
li a:hover {
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
}
.left a:hover {
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
}
 
.right a:hover {
    -webkit-transform: rotate(10deg) scale(1.2);
    -moz-transform: rotate(10deg) scale(1.2);
    -o-transform: rotate(10deg) scale(1.2);
}
.left a:hover {
   
  /*Transition*/
    -webkit-transition:All .5s ease;
    -moz-transition:All .5s ease;
    -o-transition:All .5s ease;
   
  /*Transform*/
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
}
 
.right a:hover {
 
  /*Transition*/
    -webkit-transition:All .5s ease;
    -moz-transition:All .5s ease;
    -o-transition:All .5s ease;
   
  /*Transform*/
    -webkit-transform: rotate(10deg) scale(1.2);
    -moz-transform: rotate(10deg) scale(1.2);
    -o-transform: rotate(10deg) scale(1.2);
}
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://iraqaonlaen.0wn0.com
 
نافبار تتحرك عناوينه عند مرور الماوس عليها
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
العراق اونلاين :: . :: احلى روابط ناف بار-
انتقل الى: