تصميم قوائم منسدلة لموقعك
---------------------------
Design of drop-down menus for your program Css3 Menu
-------------------------
القوائم
المنسدلة هي عبارة عن روابط ترشد الزوار بمحتويات الموقع، حيث يتم ادراج فيها كل
قسام الموقع ، فهي تعطي للزائر فكرة عامة عن قسم المواضيع التي يبحث عنها، و نجدها
متعددة الاشكال منها: قوائم منسدلة عادية، سواءا كانت اقية او عمودية (جانبية)، و
قوائم منسدلة ذات تبويبات متفرعة، و على العموم فان هذه القوائم تعطي للزتئر خريطة
تامة للموقع بأقسامه و تفرعاته
سوف
نتطرق لأهم البرامج التي تمكننا من انشاء قوائم منسدلة كما يلي:
برنامج
Css3 Menu :
برنامج css3 menu هو
برنامج صغير و خفيف على أي نظام تشغيلي، يقوم بصناعة القوائم المنسدلة، يوفر لك
عدة نماذج جاهزة من قوائم افقية منسدلة، و اخرى جانبية، و ما عليك انت الا التعديل
على اسماء القوائم ووضع لها روابط خاصة بها حسب روابط صفحاتك على موقعك،
و هذا البرنامج مجاني يمكنك تحميله على الموقع
الرسمي له التالي: http://css3menu.com/ حيث يشترط عليك التسجيل في هذا الموقع للحصول على هذا البرنامج من خلال
ادخال اسمك كمستخدم من 01 في الصورة.
من 02 من الصورة التالية تدخل البريد الالكتروني الخاص بك .
ثم من 03 تنقر على تحميل Download now ليبدأ عملية التحميل.
تصلك رسالة بعد اكتمال التسجيل تفيد بانك قد سجلت في هذا الموقع كما
يلي:
بعدها قم بادخال
الموقع الرسمي له التالي: http://css3menu.com/
من 01 حمل النسخ المجاني لبرنامج css3 menu
من 02 حمل النسخة المدفوعة.
رابط مباشر للتحميل البرنامج على نظام
وينداوز
رابط مباشر لتحميل البرنامج على نظام
الماك
رابط مباشر ثاني لتحميل البرنامج على نظام الماك
ايقونة البرنامج هي:
بالنقر عليها تظهر لنا واجهة البرنامج
كالتالي:
شرح البرنامج:
يتيح لك البرنامج اظاة ايقونات
للصفحاتك و روابطك المنسدلة، هذه الايقونات داخلية موجودة مع البرنامج، او خارجية
يمكنك اختيارها من على كمبيوترك، كما يلي:
من 01 تظهر الايقونة التي قمنا باظافتها.
من 02 نختار نوع الايقونة.
من 03 تغيير نوع و الوان و اشكال
الايقونات الداخلية الموجودة في البرنام.
اما فيما يخص اختيار الايقونات
الخارجية من الصورة التالية تظهر لنا:
من 01 ندخل في ICON ثم نختار اضافة ايقونة Add
icon
ثم تظهر لنا النافذة التالية: نقوم
اختيار منها الايقونة التي هي داخل كمبيوترنا او على فلاش ديسك الخاص بنا.
يدعم هذا البرنامج عدة لغات: منها
العربية و الكتابة من اليمين و من اليسار.
يمكننا اختيار نوق القائمة المنسدلة
سواء كانت افقية او راسية (جانبية) ، كما يمكننا انئاء منها قوائم متفرعة Submenu كما يلي:
من 01
نخنار نوع القوائم المنسدلة ، قوائم افقية او قوائم جانبية (رأسية)
من 02
نختار نوع و شكل و لون القائمة المنسدلة.
من 03 تفعل
الخيار
Responsive حتى تظهر هذه
اللقوائم مع الهواتف الذكية لالآيفون و الايباد ....الخ.
ان هذه القوائم متوافقة مع كل الاصدارات الخاصة بالمتصفحات مثل فايفوكس و فغوغل كروم، كما يمكننا استخدامها مع جميع انواع المواقع المستضيفة كبلوجر blogger و ووردبريس Wordpress
---------------------
**************
---------------------
تركيب القوائم المنسدلة لبرنامج css3 menuعلى مدونات Blogger:
بعد ان اخترنا نوعى القائمة المنسدلة
و اجرينا عليها كل التعديلات اللازمة سنقوم بادراجها على مكونة بلوجر لتصبح شغالة.
اولا: نقوم بتصدير العمل و المشروع
الى سطح المكتب من خلال النقر على Publish كما يلي:
من 01 ننقر على Publish
من 02 نختار مكان تصدير و وضع العمل.
من
03 ننقر على فتح تم تخزين المشروع.
بعد تخزين المشروع يظهر لنا كما يلي:
01 هو ملف HTML
.
02 ملف تابع للمشروع لما نفتحه نجد
ملف بداخله اسمه css3menu
حسب اسم المشروع الذي قمت بتسميته انت في السابق، نقوم بفتح هذا المجلد الاخير
فنجد بداخله صور الخاصة بالايقومان و ملف باسم style من 03 في الصورة التالية:
و الآن سنبحث عن كود القائمة المنسدلة
و هذا من خلال فتح الصفحة المخزنة سابقا لتظهر كما يلي:
من 01 القائمة المنسدلة التي
انشاناها.
02 بالنقر بالزر الايمن للفارة تظهر لنا نافذة
نختار منها code source de
la page ، فتظهر لنا كل اكواد HTML
لهذه الصفحة كما يلي:
و المنطقة المضللة توجد اكواد القائمة
بلغة HTML ، نذهب الى مدونة بلوجر و
نختار تخطيط، ثم نختاراضافة اداة في مكان راس الصفحة اذا كانت القائمة افقية ، او
نختار اضافة اداة من الشريط الجانبي اذا كانت القائمة جانبية (رأسية)، من اضافة
اداة نختار الاداة Html/javascript و ندخل الكود المظلل : و هو كما يلي:
<!-- Start css3menu.com BODY section -->
<input type="checkbox" id="css3menu-switcher" class="c3m-switch-input">
<ul id="css3menu1" class="topmenu">
<li class="switch"><label onclick="" for="css3menu-switcher"></label></li>
<li class="topfirst"><a href="#" style="height:48px;line-height:48px;"><img src="html_files/css3menu1/bhome.png" alt=""/>الرئيسية</a></li>
<li class="topmenu"><a href="#" style="height:48px;line-height:48px;"><span><img src="html_files/css3menu1/256-1.png" alt=""/>ecomedfot</span></a>
<ul>
<li><a href="http:/www.ecomedfot.blogspot.com">مدونة المتخصص</a></li>
<li><a href=" http://www.programe-explique.blogspot.com">مدونة البرامج المشروحة</a></li>
<li><a href="http://blagimage.blobspot.com">مدونة الصور</a></li>
</ul></li>
<li class="toplast"><a href="#" style="height:48px;line-height:48px;"><img src="html_files/css3menu1/256base-home-over.png" alt=""/>prog-explique</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">drop down menu</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->
اما كود css الخاص بها فيكون في الاعلا و هو الجزء المضلل
من الصورة التالية:
نقوم بنسخه و هو كما يلي:
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="html_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style><!-- End css3menu.com HEAD section -->
------------------------------------
------------------------------
الى هنا نكون قد قدمنا لكم هذا
الوضوع ليكون اضافة في سرح المعرفة .... اتمنى ان يكون في
متناول الجميع ....
اذا واجهتك أي مشكل او تسائل
ضعه في تعليق اسفل الموضوع و سنجيبكم على كل التسائلات باذن الله ....
ان اعجبك الموضوع لا تنسى
بمتابعتنا بالنقر على متابعة بالبريد الالكتروني في اسفل الموضوع حتى يصلكم كل
جديد في موقع .........
يمكنكم
متابعة ايضا المواقع التالية كمصدر لاهم المعلومات .....
زورو المواقع التالية
|
|
|
|
|
|
|
|
|
ليست هناك تعليقات