كيفية إنشاء قائمة منسدلة (Drop-down menu) بإستخدام أكواد HTML-CSS

كيفية إنشاء قائمة منسدلة (Drop-down menu) بإستخدام أكواد HTML-CSS

تعلم كيفية إنشاء قائمة منسدلة - Dropdown Menu، تحتوي على قوائم فرعية رأسية و أفقية، بإستخدام أكواد HTML، وتنسيقات CSS وبدون إستخدام أكواد JavaScript، وشرح خطوة بخطوة كيفية تعديل كود القائمة المنسدلة Dropdown Menu (من المثال)، ليتناسب مع تصميم صفحة الويب أو الموقع الخاص بك

أولا وقبل البدء في شرح الخطوات اللازمة لإنشاء قائمة منسدلة، يمكنك مشاهدة ما سوف تتعلمة من خلال التفاعل (الضغط بزر الفأرة على القوائم) مع المثال التالي:

  • Home
  • Products
    • Mobile
    • Computer
      • Laptop
      • PC
      • Server
  • Services
    • Web Design
      • Static Website
      • Dynamic Website
    • Mobile Application
    • Networks

++ المصطلحات المستخدمة في هذا الدرس ++

  • الوسم - HTML Tag
  • المحدد - CSS Selector
  • العنصر - (في هذا الدرس: غالبا ما يشير الى الوسم <li>)
  • الرابط - (يشير الى الوسم <a> واللذي يستخدم للتنقل بين صفحات الموقع)

نبدأ أولا بإنشاء ملف HTML (أو يمكنك كتابة الكود في المكان المخصص لأكواد القائمة في ملفات برمجة الموقع الخاص بك)، سوف نقوم بإستخدام الوسم <nav> كوسم أساسي يحتوي بداخله على عناصر (روابط) القائمة. ثم سنستخدم الوسم <ul> لكل قائمة مع تعيين المحدد menu للقائمة الرئيسية، وكل قائمة فرعية سوف نبدأ المحدد الخاص بها بإضافة كلمة sub- قبل إسم المحدد الخاص بالقائمة حيث يصبح إسم المحدد الخاص بالقائمة الفرعية من الدرجة الأولى sub-menu، ومن الدرجة الثانية sub-sub-menu وهكذا .... بما أننا إستخدمنا الوسم <ul> للقائمة، فسوف نستخدم الوسم <li> لكل عنصر من عناصر القائمة حيث سيحتوي كل وسم على رابط للقائمة بالإضافة إلى القائمة الفرعية (إن وجدت لذلك الرابط). ونبدأ الآن بكتابة أكواد الـ HTML.

HTML

<nav class="container">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <!-- هذا العنصر يحتوي على قائمة فرعية من الدرجة الأولى -->
    <li><a href="#">Products</a>
      <ul class="sub-menu">
        <li><a href="#">Mobile</a></li>
        <!-- هذا العنصر يحتوي على قائمة فرعية من الدرجة الثانية -->
        <li class="arrow"><a href="#">Computer</a>
          <ul class="sub-sub-menu">
            <li><a href="#">Laptop</a></li>
            <li><a href="#">PC</a></li>
            <li><a href="#">Server</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Services</a>
      <ul class="sub-menu">
        <li class="arrow"><a href="#">Web Design</a>
          <ul class="sub-sub-menu">
            <li><a href="#">Static Website</a></li>
            <li><a href="#">Dynamic Website</a></li>
          </ul>
        </li>
        <li><a href="#">Mobile Application</a></li>
        <li><a href="#">Networks</a></li>
      </ul>
    </li>
  </ul>
</nav>

من الكود السابق فقد قمنا بإنشاء قائمة رئيسية تحتوي على ثلاثة روابط (Home - Products - Services) حيث أن العنصر الأول في القائمة لا يحتوي على أي قوائم فرعية، أما العنصر الثاني Products فيحتوي على عنصرين فرعيين (Mobile - Computers) ، يحتوي العنصر الثاني من القائمة الفرعية على قائمة أخرى فرعية (Laptop - PC - Server) وهكذا ....

والآن وقد إنتهينا من كتابة أكواد الـ HTML، فسوف نقوم بإضافة تنسيقات الـ CSS

قبل البدء في كتابة تنسيقات الـ CSS، سوف تلاحظ أننا إستخدمنا الخاصية position:absolute; مع الخاصية left:-999em; وذلك لإخفاء القائمة المنسدلة حتى يتم ظهورها عند وضع مؤشر الفأرة فوقها، وهنا كان يمكن أن نستخدم أي خاصية أخرى مثل display:none;، ولكن من المفضل عدم إستخدام display:none; وذلك لأن محركات البحث تتجاهل أي عنصر في الموقع مع هذه الخاصية، وبما أن القائمة هي من أهم الأجزاء في الموقع حيث أنها هي السبيل للتنقل بين صفحات الموقع فلا يجب إخفاء أي رابط بإستخدام الخاصية display:none;. أيضا عند تغيير الأبعاد الخاصة بالقائمة (لتتناسب مع تصميم الموقع الخاص بك) من خلال تغيير الخصائص padding/height/line-height يجب الأخذ في الإعتبار أنك عند إظهار القائمة الفرعية من الدرجة الأولى يجب أن تضع القيمة للخاصية top تساوي مجموع الخاصية padding-top + padding-bottom + (height أو line-height) والتي قمنا من خلال هذا المثال بإستخدام 3 + 3 + 24 = 30، أما بالنسبة للقائمة الفرعية من الدرجة الثانية فقد إستخدمنا في هذا المثال للخاصية left القيمة 100% وذلك لتظهر القائمة الى يمين القائمة الفرعية من الدرجة الأولى، وإستخدمنا في هذا المثال القيمة -1px للخاصية top وذلك لمراعاة قيمة الخاصية border-top والتي هي 1px.

CSS

.container ul{
  list-style:none;
  padding:0;
  margin:0;
}
.container li{position:relative;}
.container a{
  display:block;
  padding:3px 12px;
  height:24px;
  line-height:24px;
  text-decoration:none;
  white-space:nowrap;
  background:#fff;
  color:#5a6063;
}
.container a:hover{
  background:#c0c0c0;
  color:#fff;
}
.menu{
  position:relative;
  *zoom:1;
}
.menu:after, .menu:before{
  content:'';
  display:table;
  line-height:0;
}
.menu:after{clear:both;}
.menu > li{
  float:left;
  margin-right:4px;
  border:1px solid #fafafa;
}
.menu > li:last-child{margin-right:0;}
.sub-menu, .sub-sub-menu{
  border:1px solid #fafafa;
  border-top:0 none;
}
.sub-menu li{border-top:1px solid #fafafa;}
.sub-menu, .sub-sub-menu{
  position:absolute;
  left:-999em;
}
.sub-menu{top:30px;}
.sub-sub-menu{top:-1px;}
.menu > li:hover .sub-menu{left:0;}
.sub-menu > li:hover .sub-sub-menu{left:100%;}
.container .arrow:after{
  content:'\00BB';
  position:absolute;
  right:3px;
  top:0;
  height:30px;
  line-height:30px;
}
.container .arrow:hover{color:#fff;}
.container .arrow > a{padding-right:20px;}

وبذلك نكون قد تعلمنا الأساسيات اللازمة لإنشاء قائمة منسدلة، والتي يمكن تعديل تنسيقاتها ببساطة لتتناسب مع تصميم موقعك.

Comments

  • James AnthonyJames Anthony
    Hello, my name is Jim and I was just looking your website abuelfateh.com over and thought I would message you on your contact form and offer some help. I really like your site but I noticed you weren’t getting a lot of traffic and your Alexa ranking isn’t as strong as it could be. https://besttrafficpros.com Fortunately, I may have an answer for you. I can get you 1,000’s of visitors looking at abuelfateh.com ready to buy your product, service or sign up for an offer and fast. Our advertising network of over 9000 websites provides a low cost and effective online marketing solutions that actually works. I can help your business get more online quality traffic by advertising your business on websites that are targeted to your specific market. The Internet is vast but you don’t have to spend huge amounts of cash to jump start your business. I can get you 5,000 highly targeted visitors directly to your website for as little as $29.00 for a 30 day trial run. https://besttrafficpros.com If you would like to talk personally and have specific questions, call me @ 480-331-6775 from 9am to 5pm MST. Also check out the short video here and see how everything works. Best Regards, James Anthony support@besttrafficpros.com BestTrafficpros.com https://besttrafficpros.com
    • Reply to James Anthony
    • 2000  Character
    • Please enter Characters.
  • AliAli
    merci baucoup je te souhaite une bonne journeè..
    • Reply to Ali
    • 2000  Character
    • Please enter Characters.
  • Ahmad AliAhmad Ali
    شكرا قائمة جميلة جدا جزاك الله خيرا
    • Reply to Ahmad Ali
    • 2000  Character
    • Please enter Characters.
    • Ahmed AbuelfatehAhmed Abuelfateh
      شكرا لك.
  • Add new Comment
  • 2000  Character
  • Please enter Characters.