أنشاء قائمة أفقية مميزة ورائعة

منتدى ترايدنت · #1 09-10-2014, 06:52 PM

مرحبا بكم في هده تدوينة حصرية في معلومات ويب التي اشرح لكم كيفية انشاء قائمة افقية للمبتدء وايضا وطرق وبعض خصائص لتكون مميزة وجميلة , وايضا كيف وضع ايقونات امام كل قسم , انا ساشرح لك طريقة بشكل بسيط وانت تقوم بوضع لمستك في تصميم وفي الوان .

وقبل كل شيء يجب عليك ان تتعلم لغة html وايضا css لكي تكون خبرة وايضا من اجل حل مشاكل واخطاء التي تقع فيها

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

والان كيفية وضع القائمة لدينا أفقيا من خلال CSS؟

css هي مسؤولة عن كيفية عرضها في شكل الحقيقي وايضا ستايل خاص بها

الكود الدي ساضعه الان هو من اجل جعل الاقسام في سطر واحد

خاص بي

/* Je sélectionne les du menu horizontal */
ul#menu_horizontal li {
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
}
ul#menu_horizontal {
list-style-type : none; /* Car sinon les puces se placent n'importe où */
}

والان كيف تغير مكان اي قسم في اي جهة تريده يمين او

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

قم بتغير بسيط على كود الاول

اليك شكل

تغير بسيط فقط

هدا كود css لنجاح عملية

ul#menu_horizontal { /*Ici , c'est ma configuration, à vous de la changer */

width : 600px;

height : 25px;

list-style-type : none; /* Car sinon les puces se placent n'importe où */

}

ul#menu_horizontal li {

padding : 0 0.5em; /* Pour espacer les boutons entre eux */

}

li.bouton_gauche {

float : left;

}

li.bouton_droite {

float : right;

}

صورة عن شكل

والان كيف وضع ايقونات بجانب اقسام

من اجل ان تكون قائمة جميلة وانيقة اضف ايقونات من اجل تزين فقط ليس شيء اجباري هدا هو كود

فقط ابحت عن طول صورة لكل قسم وتكون بصيغة .png وضعها اليك شكل كود نهائي

الان نظيف كود css لكي يظهر شكل حقيقي والاخير للقائمة رائسية

ul#menu_horizontal {

width : 600px;

height : 30px;

margin : 2em 0 0 0;

padding : 0;

background-color : #f4f9fd;

border : 1px dashed black;

list-style-type : none;

}

ul#menu_horizontal li {

padding : 0 0.5em;

line-height : 30px;

}

ul#menu_horizontal li.bouton_gauche {

float : left;

border-right : 1px dashed black;

}

ul#menu_horizontal li.bouton_droite {

float : right;

border-left : 1px dashed black;

}

ul#menu_horizontal a {

color : black;

text-decoration : none;

padding : 0 0.5em;

font : 0.8em "Trebuchet MS";

}

ul#menu_horizontal a:hover { text-decoration : underline; }

ul#menu_horizontal a img {

border : none;

padding : 0 0.3em;

}

انتهي الدرس ان شاء الله يفيدكم وسلام عليكم
ساعد في نشر والارتقاء بنا عبر مشاركة رأيك في الفيس بوك