دليل المدون

2014-09-22

كيف تصمم قوائم منسدلة لموقعك

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

من الإضافات الأساسية لأى موقع هى القوائم التى تحتوى على روابط تخبر الزائر بمحتويات الموقع ، وتتنوع تصميمات القوائم على حسب تصميم قالب الموقع فالكثير يفضل القوائم المنسدلة ذات التبويبات المتفرعة خصوصًا إذا كان الموقع يحتوى على العديد من الأقسام والتصنيفات ، وبالرغم من أن العديد من القوالب الجاهزة تحتوى على قوائم منسدلة إلا أنه يفضل البعض تصميم تلك القوائم بأنفسهم على حسب خريطة الموقع لذلك سأوضح فى هذا الموضوع شرح لكيفية تصميم القوائم المنسدلة بالشكل الذى يناسب موقعك.
Drop down menu css
هو برنامج مجانى لتصميم القوائم المنسدلة ويعتمد على التعديل على النماذج الموجودة بالبرنامج عن طريق إضافة النصوص والروابط
تحميل البرنامج من الموقع الرسمى: css3 menu
ترخيص البرنامج: Free version

مميزات البرنامج

  •  واجهة البرنامج بسيطة جدا يمكن من خلالها تنسيق القائمة المناسبة لموقعك وإضافة الروابط والنصوص والتأثيرات
css3 menu
  • يمكن إضافة صور أيقونات المتاحة بالبرنامج للقوائم أو إضافة صور أيقونات خارجية
  • يدعم اللغة العربية وإتجاه الكتابة من اليمين
  • إمكانية تصميم قوائم  رئيسية Main Menu أفقية أو رأسية وإنشاء قوائم متفرعة منها Submenu
  • إمكانية تصميم قوائم مناسبة للشاشات المتعددة لأجهزة الهواتف الذكية وذلك بتنشيط الخيار Responsive
  • بالإضافة إلى النماذج المجانية الموجودة بالبرنامج توجد نماذج غير مجانية بتأثيرات أكثر تطورًا
  • تكون القوائم المصممة بهذا البرنامج متوافقة مع جميع أنواع المتصفحات بإصداراتها
  • يمكن إستخدام القوائم لجميع أنواع منصات المواقع Wordpress,blogger,................

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

بعد تصميم القائمة المناسبة للموقع إضغط على زر Publish ليكون الناتج ملف يحتوى على صفحة ويب Html، ومجلد css
بالنسبة للمواقع التى يكون لديها إستضافة يمكن إضافة هذا الملف إلى الإستضافة أما بالنسبة للمواقع التى لا تملك إستضافة مثل مدونات بلوجر فيمكن الإستعانة بخدمات التخزين السحابى  Dropbox or Googledrive
تحديث 16/10/2016:
بعد إلغاء الإستضافة على Dropbox و Googledrive يمكن إستضافة ملفات القائمة التى قمت بإنشائها على موقع Github
 
وسأشرح مثال توضيحى عن خطوات إستضافة ملف قائمة منسدلة مصممة ببرنامج Css menu على Dropbox وإضافتها لمدونة بلوجر


1 - بعد تصميم القائمة إنسخ الملف الناتج "صفحة الويب Html، ومجلد css" داخل مجلد public بحسابك على Dropbox   
2- إفتح صفحة الويب ببرنامج Notepad
dropbox

ستكون الأكواد مكتوبة هكذا بصفحة الويب

Notebad
3 - إنسخ الرابط المباشر لملف Css داخل dropbox 
dropbox

4- إستبدل مسار ملف css الموجود بصفحة الويب وهو ما ينتهى دائما بــ  "style.css" بالرابط المباشر لملف Css داخل dropbox
ليكون الكود بهذا الشكل
5- ثم إنسخ كل الأكواد الموجودة بصفحة الويب وأضفها إلى مدونة بلوجر داخل أداة Html/javascript  وأضفها بالمكان المناسب لمدونتك.

ملاحظات:
  •  إذا كانت القوائم تتضمن أيقونات يمكن أيضا تبديل مسارات الأيقونات التى تنتهى بالإمتداد Png داخل الكود بالرابط المباشر لهذه الأيقونات على Dropbox بنفس الطريقة السابقة
  •  يمكن أيضًا إستخدام موقع Google drive فى إستضافة القائمة
إقرأ أيضًا:
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

هناك 12 تعليقًا

  1. ماشاء الله ابدعتى فى الشرح هل ممكن تبادل اعلانى
    http://point-mar.blogspot.com/

    ردحذف
  2. شرح رائع و جميل أختي
    http://bixelio.blogspot.com/

    ردحذف
  3. شرح رائع
    www.ar-earn.com

    ردحذف
  4. شرح جميل ، وياريت تقولولي رأي حضراتكم في مدونتي ؟ http://www.centerlook.info/

    ردحذف
  5. السلام عليكم و رحمة الله و بركاته ....
    أولا جزاكم الله خيرا على هذا الإبداع فى هذا الموقع الجميل ...
    ثانيا أود أن أشكر حضرتك على هذا الموضوع المهم لأنه حل لى مشكلة كبيرة فى عمل قوائم منسدلة على بلوجر عن طريق هذا البرنامج الجميل السهل بس للأسف ظهرت مشكلة جديدة و هى ظهور القائمة الرئيسية (menu) و القوائم المنسدلة منها (submenu) بمعنى إن المفترض و هو ده اللى أنا عايزاه إنه لما أشير بالماوس على الmenu تظهر الsubmenu و لكن المشكلة إنه من غير ما أشير بالماوس و من الأول بتكون الmenu و الsubmenu كلها ظاهرة من البداية و دى مشكلة كبيرة لأنى بعمل عدد من القوائم المنسدلة و بظهور المشكلة دى كده ممكن تاخد مساحة كبيرة .... أتمنى إن يكون فيه حل لهذه المشكلة و إعلامى بها ...
    ثالثا كان لى رجاء عند حضرتك لو توجد وسيلة للإتصال معك أسرع من الموقع يعنى مثلا لو فيه إيميل يبقى كتر خيرك و أعتذر عن الإطالة و شكرا...

    ردحذف
  6. @ شقآوهـ آبداع ، @ mohamed youssouf @، Hamma SeptTrois
    شكرا جزيلا لمتابعتكم القيمة
    @Omar El-Esseily
    مدونة جيدة اتمنى لكم التوفيق
    @عرب للمعلوميات
    شكرا جزيلا لمتابعتك

    @enas maged
    شكرا جزيلا على متابعتك القيمة
    أعتقد أن المشكلة سببها إنشاء أكثر من قائمة منسدلة فى نفس الصفحة وهذه
    دروس فيديو
    من الموقع الرسمى للبرنامج

    ردحذف
  7. السلام عليكم
    انا نسخت خبر من موقع وبلغلط ظهرت صورة بالمدنة ولا زالت ممكن مساعدة

    alhjraoy1.blogsbot.com

    ردحذف
  8. لو سمحتي اختي Dr R.O عندي مشكلة في القالب القائمة الافقية لا يظهر فيها الا اربع اقسام والباقي يظهر تحت مع العلم ان فية مساحة كافية ليظهرو فيها فمثلا
    [ الصفحة الريسية - برامج - العاب - فوتوشوب- - - ]
    افلام - انترنت

    وياريت لو ينفع اعمل قائمة منسدلة لقسم واحد زي برامج
    ___
    ___
    ___

    ردحذف
  9. @ wintnews
    شكرًا لمتابعتك
    @ Mohamed Maher
    أعتقد أن المشكلة فى كود Css يمكن تعديل قيمة Width إلى %100

    ردحذف
  10. هل يوجد اضافة يمكن من خلالها اضافة عمود على اليسار لوضع الاعلانات مثلا
    وهل يمكن تقسيم صفحة الواجهة الرئيسية الى ثلاثة اقسام
    http://retag-book.blogspot.com/

    ردحذف
  11. تقييمك للمدونةhttps://kashaf-tech.blogspot.com.eg/

    ردحذف

يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى .
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون