الدرس 2: قائمة متعددة المستويات

 الدرس 2: قائمة متعددة المستويات

مقدمة:
نتابع اليوم سلسلة الدروس الخاصة بتصميم المواقع مع HTML5 و CSS3 و jQuery ، سأشرح اليوم قائمة بسيطة ومفيدة في نفس الوقت تحتوي على كل الميزات المطلوبة لموقع احترافي.

 

ماذا تقدم لنا هذه الإضافة؟
– امكانية اضافة عدد غير محدود من القوائم.
– امكانية اضافة أكثر من قائمة في صفحة واحدة.
– امكانية اضافة قوائم فرعية حتى المستوى الثاني.
– توافقية مع جميع الأجهزة وتعمل بشكل ممتاز على الموبايل.
– امكانية اضافة مكتبة “font-awesome” مع القوائم.

 

التركيب:
1- كالعادة نقوم باستدعاء مكتبة “jquery” بداية، ومن ثم نستدعي ملف الـ “function.js” ، اضافة إلى ملف “menu.css” الخاص بستايل القائمة .

<link rel="stylesheet" type="text/css" href="css/menu.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>

 

2- الآن نقوم بكتابة ملف “HTML” وهنا نحتاج قليلاً من التركيز وخاصة عند عمل القوائم الفرعية.

– لعمل قائمة بسيطة كل ما نحتاجه الكود التالي:

<nav id="navigation">
   <ul id="main-menu">
      <li class="current-menu-item"><a href="#">Home</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
   </ul>
</nav>

 

– لعمل قائمة فرعية:

<nav id="navigation">
   <ul id="main-menu">

   <li class="current-menu-item"><a href="#">Home</a></li>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>

   <li class="parent"> <! -- قائمة فرعية -->
      <a href="#">Features</a>
      <ul class="sub-menu">
         <li><a href="#"><i class="fa fa-minus-square"></i> Responsive</a></li>
         <li><a href="#"><i class="fa fa-money"></i> Free</a></li>
         <li><a href="#"><i class="fa fa-book"></i> Link</a></li>
      </ul>
   </li>

   </ul>
</nav>

 

لعمل قائمة فرعية نقوم باضافة   <ul class=”sub-menu”> ومن بعدها نضيف الروابط الفرعية المطلوبة كما هو مبين سابقاً.

 

3- استخدام ايقونات مميزة لكل رابط 

 <li><a href="#"><i class="fa fa-book"></i> Link</a></li>

 

يمكن استخدام ايقونات بجانب اسم الرابط للتوضيح ، وقمنا هنا باستخدام مكتبة “font-awesome” عن طريق كتابة اسم الأيقونة داخل الكلاس وسأقوم بدرس لاحق بشرح مفصل لطريقة استخدام هذه المكتبة وميزاتها.

وبالتأكيد يمكن ازالة الكلاس في حال لم ترغب في اضافة أيقونة والإبقاء على النص لوحده.

 

4- يمكن تعديل بعض الخواص المتقدمة عن طريق ملف “function.js” .

 

وهذا كود القائمة كامل:

<nav id="navigation">
   <ul id="main-menu">

      <li class="current-menu-item"><a href="#">Home</a></li>

      <li class="parent">
      <a href="#">Features</a>
      <ul class="sub-menu">
         <li><a href="#"><i class="fa fa-minus-square"></i> Responsive</a></li>
         <li><a href="#"><i class="fa fa-money"></i> Free</a></li>
         <li><a href="#"><i class="fa fa-book"></i> Link</a></li>
         <li>
            <a class="parent" href="#"><i class="fa fa-file-text-o"></i> Pages</a>
            <ul class="sub-menu">
               <li><a href="#">Page 1</a></li>
               <li><a href="#">Page 2</a></li>
               <li><a href="#">Page 3</a></li>
            </ul>
         </li>
      </ul>
      </li>

      <li><a href="#">Portfolio</a></li>

      <li class="parent">
         <a href="#">Links</a>
         <ul class="sub-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
         </ul>
      </li>

      <li><a href="#">About Us</a></li>

   </ul>
</nav>

 

هذه الإضافة متوافقة مع متصفحات Google Chrome و FireFox و Internet Explorer الإصدار السابع فما فوق إضافة إلى Edge .

 

لمشاهدة مثال أون لاين من هنا

لتحميل  القائمة من هنا

إذا واجهتكم أي مشاكل في التركيب أو أي استفسار أخر يمكنكم ترك تعليق هنا أو على الفيسبوك.

issam

Related post

Leave a Reply

Your email address will not be published. Required fields are marked *