السلام عليكم هذه اول مشاركي لي في هذا المنتدى و رجائي ان تفيدكم سيكون الدرس عن كيفية تنسيق روابط التنقل (navigation bar) بأستخدام تقنية css3 بطريقة جميلة نبدأ بـcode الـ html :
<!--
By : linux webman
-->
<!DOCTYPE html>
<html>
<head>
<title>navigation bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#main
{
margin: 0 auto;
width: 700px;
}
#nav_ul
{
float: right;
list-style: none;
}
#nav_ul li
{
padding-left: 16px;
padding-top: 6px;
}
#nav_ul li a
{
display: block;
width: 120px;
height: 25px;
background-color: #d02030;
border-right: #8e1a24 solid 9px;
text-align: center;
text-decoration: none;
color: white;
padding-top: 5px;
-moz-transition: background 0.6s , color 0.7s;
-webkit-transition: background 0.6s , color 0.7s;
-o-transition: background 0.6s , color 0.7s;
text-shadow: black 1px 1px 5px ;
-moz-text-shadow: black 1px 1px 5px ;
-wekit-text-shadow: black 1px 1px 5px ;
-o-text-shadow: black 1px 1px 5px ;
box-shadow: black 1px 1px 5px ;
-moz-box-shadow: black 1px 1px 5px ;
-webkit-box-shadow: black 1px 1px 5px ;
-o-box-shadow: black 1px 1px 5px ;
}
#nav_ul li a:hover
{
color : rgba(255,255,255,0.8);
background-color: #8e1a24;
}
#nav_ul2
{
list-style: none;
}
#nav_ul2 li
{
padding-left: 16px;
padding-top: 6px;
float: left;
}
#nav_ul2 li a
{
display: block;
width: 120px;
height: 25px;
background-color: #2263cc;
text-align: center;
text-decoration: none;
color: white;
color : rgba(255,255,255,0.8);
padding-top: 5px;
-moz-transition: background 0.6s , color 0.7s;
-webkit-transition: background 0.6s , color 0.7s;
-o-transition: background 0.6s , color 0.7s;
text-shadow: black 1px 1px 5px ;
-moz-text-shadow: black 1px 1px 5px ;
-wekit-text-shadow: black 1px 1px 5px ;
-o-text-shadow: black 1px 1px 5px ;
box-shadow: black 1px 1px 5px ;
-moz-box-shadow: black 1px 1px 5px ;
-webkit-box-shadow: black 1px 1px 5px ;
-o-box-shadow: black 1px 1px 5px ;
border-radius: 10px/6px;
-moz-border-radius: 10px/6px;
-webkit-border-radius: 10px/6px;
-o-border-radius: 10px/6px;
}
#nav_ul2 li a:hover
{
color :#fff;
background-color: #6495e5;
}
</style>
</head>
<body>
<div id="main">
<ul id="nav_ul2">
<li><a href="#">الصفحة الرئيسية</a></li>
<li><a href="#">الخدمات</a></li>
<li><a href="#">المنتدى</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
<br><br>
<hr>
<ul id="nav_ul">
<li><a href="#">الصفحة الرئيسية</a></li>
<li><a href="#">الخدمات</a></li>
<li><a href="#">المنتدى</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
</div>
</body>
</html>شرح الفقرات الهامة من الكود :
<ul id="nav_ul"> <li><a href="#">الصفحة الرئيسية</a></li> <li><a href="#">الخدمات</a></li> <li><a href="#">المنتدى</a></li> <li><a href="#">اتصل بنا</a></li> </ul>
نقوم بإنشاء قائمة تقليدية حيث تكون الروابط بداخلها و تم تعيين id خاص بها لكي يتم فصلها عن باقي القوائم من حيث التنسيق
تستخدم خاصية list-style لتحديد شكل البادئة للأسطر (ارقام, نقط صغيرة) في مثالنا لا نحتاج لها لذالك تم اسناد none لها
[text-decoration: none : لإزالة الخط تحت النص في الروابط
-moz-transition: background 0.6s , color 0.7s;
-webkit-transition: background 0.6s , color 0.7s;
-o-transition: background 0.6s , color 0.7s;
الفرق بينهم بسيط هو البادئة -moz- تستخدم للفايرفوكس -webkit- للسفاري و الكروم -o- للاوبرا
وهذه الخاصية تعطي تاثير التغير مع الزمن
الكلمة الاولى لتحديد اي خاصية لتطبيق هذا التاثير ثم الكلمة الثانية لتحديد كم تستغرق من زمن (الفاصلة لكتابة اكثر من تاثير في سطر واحد)
-moz-text-shadow: black 1px 1px 5px ;
لإضافة ظل للنص
-moz-box-shadow: black 1px 1px 5px ;
لإضافة ظل للمستطيل بأكمله
color : rgba(255,255,255,0.8);
لتحديد لون النص a ترمز للشفافية و تتراوح قيمتها من 0 الى 1
-moz-border-radius: 10px/6px;
لجعل الحدود دائرية (تستخدم / من اجل وضع قيم مختلفة للحدود الافقية و العامودية)
اذا كان هنالك اي استفسار عن اي خاصية سيتم الاجابة عنها بإذن الله
لتحميل الصفحة جاهزة من هنا index.html.zip
(الرجاء اعطاء ملاحظاتكم حول الدرس )