نقي CSS / HTML القائمة المنسدلة

نقي CSS / HTML القائمة المنسدلة
HTML هيكل القائمة الأفقية
نحن تحريك القائمة الأفقية أثناء التأشير.
صف قائمة CSS / HTML المنسدلة

نقي CSS / HTML القائمة المنسدلة

في هذا البرنامج التعليمي ، سنقوم بعمل قائمة أفقية كلاسيكية على CSS خالص. لديها رموز في القوائم. عند الإشارة إلى عنصر ما ، فإنه يغير لون الزر والنص تدريجياً ، يضاف الظل. يمكن جعل القوائم المنسدلة متعددة المستويات ويتم تنفيذ الأمر الرئيسي بكل بساطة على CSS3 النقي.

استمرار هذا الدرس هنا - الجزء 2 MOBILE VERSION القائمة الأفقية ".

انظر القلم POyzbW بواسطة دينيس ( Dwstroy ) على CodePen .

في الدرس استخدم:

عرض: المرن.
استخدام الانتقال ؛
وضع العناصر مع الموقف.

HTML هيكل القائمة الأفقية

أولاً ، اكتب العلامات أسفل القائمة الأفقية. نفتح بيئة التطوير الخاصة بنا في حالتي ، هذا هو PhpStorm ، قم بإنشاء ملف index.html ، وقم بوصف الإطار html: 5 ، واستبدل lang بـ ru.

سيتم حذف جميع البيانات التعريفية باستثناء الترميز ، وسوف أسجل لقبي " قائمة توم ".

بين الجسم نكتب علامة الرأس ، وفيها هناك كتلة مع فئة .dws القائمة التي سوف تحتوي على القائمة لدينا. بعد ذلك ، سيكون الهيكل على النحو التالي ، وإنشاء قوائم بمبلغ خمس قطع. في كل قائمة ، سيكون هناك رابط مع السمة href = "#". ثم سأذهب إلى الرمز مع الفصل .fa .fa-

نضغط للتقديم

فلنكتب اسم عناصر القائمة ( الصفحة الرئيسية ، المنتجات ، الخدمات ، الأخبار ، جهات الاتصال ).

بعد ذلك ، حدد وتوصيل الرموز. انتقل إلى الموقع ، وسوف نختار أيقونات عناصر القائمة هذه:

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

يحتوي مجلد الخطوط على خطوط الرموز ، بينما يحتوي مجلد css على أنماطها. يمكن إزالة الأنماط المضغوطة font-awesome.min ، فنحن نقوم بتوصيل font-awesome.css غير المضغوطة.

في index.html نقوم بتوصيل الرموز ، ونقوم بتسجيل كل عنصر بنمط الرمز الخاص به ( المنزل ، عربة التسوق ، التروس ، القائمة th ، المغلف مفتوح ).

لقد أنشأنا الإطار الرئيسي ، وقمنا بإنشاء قائمة فرعية بعد وصف النمط الرئيسي ، والآن سننشئ ملفًا حيث سنصف الأنماط الرئيسية لنمط القائمة الأفقية. ccs وتوصيله بـ index.html. للتأكد من أن الأنماط متصلة ، قم بإنشاء مجلد img ، حيث سأضع صورة عشوائية على الخلفية. دعنا نكتب اتصال الصورة باستخدام الخلفية.

body {background-image: url ("../ img / ep_naturalwhite.png")؛ }

كما نرى ، تم عرض كل شيء ثم سننتقل إلى وصف الأنماط.

أولاً وقبل كل شيء ، دعنا نعيد ضبط كل المسافات البادئة ، والتي يمكن أن تحددها المتصفحات المختلفة افتراضيًا:

.dws-menu * {margin: 0؛ الحشو: 0؛ }

تعيين الرأس إلى 200 قمم. وتعيين ما يمكنك تنزيله والاتصال به بشكل منفصل على الموقع ، فقط في حالة كتابة خطوط إضافية.

header {margin: 200px؛ font-family: Cuprum، Arial، Helvetica، sans-serif؛ }

إخفاء العلامات في القوائم:

.dws-menu ul، .dws-menu ol {list-style: none؛ }

سيتم عرض القوائم أفقيا مع عرض: الكتان ، وسنفعل ذلك في الوسط:

.dws-menu> ul {display: flex؛ تبرير المحتوى: المركز ؛ }

في الرأس ، سنقوم بوضع مسافة بادئة في الجزء العلوي فقط ، وسنكتب هامشًا أعلى.

header { margin-top: 200px؛ font-family: Cuprum، Arial، Helvetica، sans-serif؛ }

لنقم بتصميم قائمتنا وتعيين لون الأزرار والخط وما إلى ذلك.

حدد الروابط nav> ul li ، واجعلها تحظر العناصر. اضبط خلفية القائمة ، واكتب المسافات البادئة ، وحدد الحجم واللون ، ثم قم بإزالة تسطير أسفل السطر ، وأدخل العناوين بحروف كبيرة.

.dws-menu> ul li a {display: block؛ الخلفية: #ececed؛ الحشو: 15px 30px 15px 40px ؛ حجم الخط: 14 بكسل ؛ اللون: # 454547 ؛ زخرفة النص: لا شيء ؛ تحويل النص: أحرف كبيرة ؛ }

ثم ضع الرموز ، عيّن القوائم لوضعها: نسبي ؛ لمزيد من محاذاة الرموز:

.dws-menu> ul li {موقف: نسبي؛ }

بعد ذلك ، نختار الأيقونات ونضعها تمامًا ونجعل المسافة البادئة من أعلى عند 15 قمة ، ومن 12 قمة إلى اليسار ، ونزيد الحجم إلى 18 قمة.

.dws-menu> ul li> a ifa {position: absolute؛ أعلى: 15 بكسل ؛ اليسار: 12 بكسل ؛ حجم الخط: 18 بكسل ؛ }

قم بتعيين الفاصل في شكل حد للقوائم ، حدد أول عنصر LI ، واضبط الحد. نختار العنصر الأخير LI ونخصص له حدًا مشابهًا.

.dws-menu> ul li: first-child {border-left: 1px solid # b2b3b5؛ } .dws-menu> ul li: last-child {border-right: 1px solid #babbbd؛ }

عمل محددات لقوائم LI:

.dws-menu> ul li {موقف: نسبي؛ الحدود اليمنى: 1px solid # c7c8ca؛ }

اكتسبت القائمة المظهر ، ثم يمكنك المتابعة إلى وصف الأنماط أثناء التمرير.

نحن تحريك القائمة الأفقية أثناء التأشير.

حدد الروابط وقم بتعيين لون للكتلة ، وقم بتعيين لون الارتباط نفسه مع أيقونة باللون الأبيض. لنقم بإضافة ظل مظلم آخر. بمساعدة الانتقال في 0.3 ثانية ، سنعمل على مظهر سلس:

.dws-menu li a: hover {background: # 454547؛ اللون: # fffff؛ صندوق الظل: 1px 5px 10px -5px أسود ؛ الانتقال: كل 0.3s سهولة. }

ولجعل هذا التأثير يختفي بسلاسة ، أضف هذا النمط إلى الرابط بسهولة:

.dws-menu> ul li a {display: block؛ الخلفية: #ececed؛ الحشو: 15px 30px 15px 40px ؛ حجم الخط: 14 بكسل ؛ اللون: # 454547 ؛ زخرفة النص: لا شيء ؛ تحويل النص: أحرف كبيرة ؛ الانتقال: كل 0.3s سهولة. }

تم الانتهاء من القائمة الرئيسية ويمكنك متابعة وصف القائمة الفرعية والقوائم الفرعية المضمنة فيها.

صف قائمة CSS / HTML المنسدلة

نحن نفتح index.html ونضيف ، على سبيل المثال ، قائمة إضافية للمنتجات. أدخل UL بين قوائم LI وقم بوضع خمس قوائم بها ، والتي ستحتوي على روابط مع السمة herf = "#".

ul> li * 5> a [href = "#"]

نضغط للتقديم ، اكتب اسم العناصر ( الملابس ، الإلكترونيات ، الغذاء ، الأدوات ، الحياة. الكيمياء ).

<ul> <li> <a href="#"> ملابس </a> </ li> <li> <a href="#"> إلكترونيات </a> </ li> <li> <a href = "#"> الطعام </a> </ li> <li> <a href="#"> الأدوات </a> </ li> <li> <a href="#"> الحياة. الكيمياء </a> </ li> </ ul>

ثم افتح style.css ووصف أنماط القائمة الفرعية.

نختار القائمة الثانية وتعيينها الموضع: المطلقة. ، دعنا نضبط الحد الأدنى للعرض على 150 قمة.

/ * sub menu * / .dws-menu li ul {position: absolute؛ دقيقة العرض: 150 بكسل ؛ }

دعنا نكتب إلى قوائم الحدود عند قمة واحدة.

.dws-menu li> ul li {border: 1px solid # c7c8ca؛ }

بالنسبة إلى الروابط الموجودة في القائمة الفرعية ، سنقوم بتعيين المسافات البادئة عند 10 قمم. ، قم بإزالة تحويل النص وجعل الخلفية الخلفية أغمق نغمة: # e4e4e5؛ .

.dws-menu li> ul li a {padding: 10px؛ تحويل النص: لا شيء ؛ الخلفية: # e4e4e5؛ }

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

<li> <a href="#"> Electronics </a> <ul> <li> <a href="#"> الكاميرات </a> </ li> <li> <a href="#"> أجهزة الكمبيوتر </a> </ li> <li> <a href="#"> الهواتف </a> </ li> </ ul> </ li>

لقد تم إخراجهم ، لكن تم إخفاؤهم أسفل القائمة الرئيسية ، الآن: متداخلة UL ونقله إلى 150 الذروة. إلى الجانب:

.dws-menu li> ul li ul {position: absolute؛ اليمين: -150 بكسل ؛ أعلى: 0 ؛ }

بعد ذلك ، سنجعل القائمة الفرعية تظهر عند استهداف العناصر الرئيسية في القائمة العلوية ، لهذا نضيف عرضًا: لا شيء ؛ وبالتالي إخفاء جميع النقاط الداخلية.

/ * sub menu * / .dws-menu li ul {position: absolute؛ دقيقة العرض: 150 بكسل ؛ عرض: لا شيء. }

ولظهورهم ، سنختار القوائم الموجودة على التحويم ونعرضها بمساعدة عرض: block؛ .

.dws-menu li: hover> ul {display: block؛ }

يمكنك الآن إضافة قوائم متعددة المستويات ببساطة عن طريق نسخ كتلة UL ، وتغيير عناصرها.

<ul> <li> <a href="#"> الصفحة الرئيسية </a> </ li> <li> <a href="#"> المنتجات </a> <ul> <li> <a href="#"> ملابس </a> <ul> <li> <a href = "#"> أحذية </a> </ li> <li> <a href="#"> جاكيتات </a> </ li> <li> <a href="#"> سراويل </a> < / li> </ ul> </ li> <li> <a href="#"> Electronics </a> <ul> <li> <a href="#"> الكاميرات </a> </ li> <li> <a href="#"> أجهزة الكمبيوتر </a> </ li> <li> <a href="#"> الهواتف </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> الغذاء </a> </ li> <li> <a href="#"> الأدوات </ h a> </ li> <li> <a href="#"> Gen. الكيمياء </a> </ li> </ ul> </ li> <li> <a href="#"> Services </a> <ul > <li> <a href="#"> Service 1 </a> </ li> <li> <a href="#"> Service 2 </a> </ li> <li> <a href = "#"> الخدمة 3 </a> </ li> </ ul> </ li> <li> <a href="#"> الأخبار </a> </ li> <li> <a href="#"> جهات الاتصال </a> </ li> </ ul>

ثم دعونا ننهي الأزرار مع الأزرار. أنا استخدم ، لقد قمت بإنشاء العديد من الإعدادات المسبقة ، يمكنك إنشاء الخاصة بك ، في حالتي ، أنا فقط نسخ هذا الرمز ووضعه في مكان الخلفية التي كتبت من قبل.

.dws-menu> ul li a {display: block؛ / * الرابط الثابت - هذا التدرج: http://colorzilla.com/gradient-editor/#c9c9c9+0،f6f6f6+2،c4c5c7+98.757577+100؛Custom+3 * / / background: # c9c9c9 . / * المتصفحات القديمة * / الخلفية: - التدرج اللوني الخطي (أعلى ، # c9c9c9 0٪ ، # f6f6f6 2٪ ، # c4c5c7 98٪ ، # 757577 100٪) ؛ / * FF3.6-15 * / background: - webkit-linear-gradient (top، # c9c9c9 0٪، # f6f6f6 2٪، # c4c5c7 98٪، # 757577 100٪)؛ / * Chrome10-25 ، Safari5.1-6 * / / الخلفية: التدرج الخطي (إلى الأسفل ، # c9c9c9 0٪ ، # f6f6f6 2٪ ، # c4c5c7 98٪ ، # 757577 100٪) ؛ / * W3C ، IE10 + ، FF16 + ، Chrome26 + ، Opera12 + ، Safari7 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9'، endColorstr = '# 757577'، GradientType = 0)؛ / * IE6-9 * / padding: 15px 30px 15px 40px؛ حجم الخط: 14 بكسل ؛ اللون: # 454547 ؛ زخرفة النص: لا شيء ؛ تحويل النص: أحرف كبيرة ؛ الانتقال: كل 0.3s سهولة. } .dws-menu li a: hover {/ * الرابط الثابت - هذا التدرج: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98،e0e1e5+100 * / background: # e0e1e5؛ / * المتصفحات القديمة * / الخلفية: - التدرج اللوني الخطي (أعلى ، # e0e1e5 0٪ ، # 454547 2٪ ، # 454547 98٪ ، # e0e1e5 100٪) ؛ / * FF3.6-15 * / background: - webkit-linear-gradient (top، # e0e1e5 0٪، # 454547 2٪، # 454547 98٪، # e0e1e5 100٪)؛ / * Chrome10-25 ، Safari5.1-6 * / / الخلفية: التدرج الخطي (إلى الأسفل ، # e0e1e5 0٪ ، # 454547 2٪ ، # 454547 98٪ ، # e0e1e5 100٪) ؛ / * W3C ، IE10 + ، FF16 + ، Chrome26 + ، Opera12 + ، Safari7 + * / filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# e0e1e5'، endColorstr = '# e0e1e5'، GradientType = 0)؛ / * IE6-9 * / color: #ffffff؛ صندوق الظل: 1px 5px 10px -5px أسود ؛ الانتقال: كل 0.3s سهولة. }

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

نقي CSS / HTML القائمة المنسدلة

نقي CSS / HTML القائمة المنسدلة