كيف أصنع قائمة منسدلة بإستخدام CSS و HTML فقط ~ المدونة الشاملة لكل المستويات

كيف أصنع قائمة منسدلة بإستخدام CSS و HTML فقط.

كما جرت العادة للبداية بانشاء القائمة المنسدلة وبكل احترافية بإستخدام CSS و HTML فقط لابد لنا من تخطيط.

والتخطيط يجب ان يكون مرتكزا على خلفية مسبقة للقائمة المراد انشائها.لذا سنعتمد التخطيط الاولي لنا هو على الشكل التالي باستخدام HTML فقط:

نلاحظ ان القائمة جاءت عمودية ونحن بطبيعة الحال نريدها خطية افوقية لذا سنلجأ الى CSS ونضفي بعض التعديلات عليها كالخلفية والتموضع والتباعد:

القائمة+العرض+الابعاد

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;
}

نضيف المحتوى التالي في menu #

انحناء اطراف القائمة


-moz-box-shadow:inset 0px 0px 1px #edf9ff;

-webkit-box-shadow:inset 0px 0px 1px #edf9ff;

box-shadow:inset 0px 0px 1px #edf9ff;

نضيف المحتوى التالي في menu #

إضافة الوان خاصة بالقائمة يضاف مباشرة #menu في


background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

نضيف المحتوى التالي في menu # ويمكن الاستغناء عنها

إضفاء خاصية الضل لإعطاء القائمة ميزة البعد3

-moz-box-shadow:inset 0px 0px 1px #edf9ff;                                    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;                                 box-shadow:inset 0px 0px 1px #edf9ff;

نضيف المحتوى التالي في menu #

تحميل ملف CSS

الآن ننتقل الى الجزء الثاني

إلى حد الان لن تلاحظ اي تغير في القائمة لذا تابع الخطوات التالية

<li> لنتتقل الى الاقسام الفرعية


#menu li {

float:right;

display:block;

text-align:center;

position:relative;

margin-right:4px;

padding: 4px 10px 4px 10px;


margin-top:20px;


border:none;



}

نضيف المحتوى التالي في #li menu

نعطي للاقسام اللون والتدرج كما فيالقائمة السابقة


background: #F4F4F4;

background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

نعطيها الانحناءات للحواف


-moz-border-radius: 5px 5px 0px 0px;

-webkit-border-radius: 5px 5px 0px 0px;

border-radius: 5px 5px 0px 0px;

(mouse hover) نأتي الآن للروابط ومرور الفأرة


#menu li:hover {
border: 2px solid #543D3E;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
text-shadow: 1px 1px 1px #000;
}

نعطي الضل للكتابة عند مرور الفأرة


           #menu li:hover     يضاف في                                                     text-shadow: 1px 1px 1px #000;

تصميم خاص للروابط


#menu li a {

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

color: #EEEEEE;

text-decoration:none

display:block;

outline:0 ;

text-shadow: 1px 1px 1px #000;}

تصميم خاص للروابط


#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}

تصميم خاص للروابط


#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}

بقلم نبيل مسعي

أنا من الجزائر، احب أن أضع كل ما أعرف من معلومات حول الحاسوب ولاأبخل به عليكم، وخطرت لي فكرة عمل مدونة تضم كل المجالات التعليمية للكومبيوتر التي أستطيع إفادتكم بها، فأرجوا ان لاتبخلوا علي أيضا بمتابعتكم لمواضيعي كما ان تعليقاتكم تهمني وتزيد من عطائي لكم إخوتي الكرام وأي استفسار ان موجود وشكرا

قسم : تعلم البرمجة

المدونة الشاملة لكل المستويات

الاثنين، 10 مارس 2014