لا يختلف المبدأ العام لإنشاء قائمة ضخمة عن إنشاء قائمة منسدلة أفقية منتظمة. الاختلاف الوحيد هو أنه ليس كل عنصر قائمة تتداخل فيه القائمة المنسدلة يحصل
موضوعنا اليوم حول إنشاء قائمة منسدلة كاملة العرض متجاوبة أو مربع تنقل في CSS خالص. تُستخدم القائمة الضخمة بشكل شائع في مواقع التسوق عبر الإنترنت وأي موقع تجارة إلكترونية آخر لأنها الطريقة المثلى لتنظيم المحتوى وعرضه.
لا يختلف المبدأ العام لإنشاء قائمة ضخمة عن إنشاء قائمة منسدلة أفقية منتظمة. الاختلاف الوحيد هو أنه ليس كل عنصر قائمة تتداخل فيه القائمة المنسدلة يحصل على موضع نسبي ، ولكن قائمة المستوى الأعلى أو أي حاوية كتلة أخرى.
في هذه الحالة ، يمكننا ضبط عرض القائمة المنسدلة على 100٪ ، والتي ستكون مساوية لعرض قائمة المستوى الأعلى ، وليس عرض عنصر القائمة. للحصول على قائمة منسدلة بالحجم العادي ، تحتاج إلى تعيين فصل دراسي وتعيين موضعه النسبي.
كل عمود في القائمة المنسدلة هو عنصر قائمة يحتوي على رأس (اختياري) وقائمة فرعية بالداخل.
يمكن أن يكون ارتفاع كل عمود مختلفًا ، وإذا أضفت خلفية أو حدًا إلى القائمة الفرعية ، فسيكون الفرق في الارتفاع ملحوظًا. لذلك ، لحل هذه المشكلة ، دعنا ندرج المكون الإضافي matchHeight jquery.
jQuery(document).ready(function($) {$('.item').matchHeight();});
طريقة التركيب
بعد وسم <head> تضع هذه الاكواد.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><script src="https://code.jquery.com/jquery-2.2.3.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
ثم نذهب الي وضع باقي الاكواد.
كود Html1
<nav class="container"><ul class="top-menu"><li><a href="">Home</a></li><li class="dropdown-standart"><a href="" class="dropdown">Mega Link </a><ul class="submenu-standart"><li><a href="">Mega Link Label 01</a></li><li><a href="">Mega Link Label 02</a></li><li><a href="">Mega Link Label 03</a></li><li><a href="">Mega Link Label 04</a></li><li><a href="">Mega Link Label 05</a></li><li><a href="">Mega Link Label 06</a></li></ul></li><li><a href="" class="dropdown">Link</a><ul class="submenu"><li><h3>Label 1</h3><ul><li><a href="">Link Label 01</a></li><li><a href="">Link Label 02</a></li><li><a href="">Link Label 03</a></li><li><a href="">Link Label 04</a></li><li><a href="">Link Label 05</a></li><li><a href="">Link Label 06</a></li><li><a href="">Link Label 07</a></li><li><a href="">Link Label 08</a></li></ul></li><li><h3>Label 2</h3><ul><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><li><a href="">Link 5</a></li><li><a href="">Link 6</a></li></ul></li><li><ul><li><a href="" class="link-image"><img src="https://html5book.ru/wp-content/uploads/2017/01/white-lady.jpg"></a></li><li><h3 class="image-header">Heading</h3></li></ul></li></ul></li><li><a href="">file</a></li><li><a href="">Blog</a></li></ul></nav>
كود Css2
@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Roboto');*{box-sizing: border-box;}body {font-family: 'Roboto', sans-serif;font-size: 14px;margin: 0;}ul {list-style: none;margin: 0;padding: 0;}a {text-decoration: none;}.top-menu {background: white;position: relative;}.top-menu:after,.submenu:after {content: "";display: table;clear: both;}.top-menu > li {display: inline-block;float: left;}.top-menu > li > a {display: block;padding: 18px;font-size: 11px;text-transform: uppercase;letter-spacing: 1px;color: #000;transition: .2s linear;}.top-menu > li > a:hover {color: #B03062;}.dropdown:after {content: "\f107";font-family: FontAwesome;margin-left: 4px;vertical-align: top;}.submenu,.submenu-standart {border-top: 1px solid #e5e5e5;box-shadow: 0 3px 5px 0 rgba(0,0,0,.07);background: white;padding: 25px 0;position: absolute;top: 100%;left: 0;z-index: 5;opacity: 0;visibility: hidden;transform: translate3d(0,30px,0);transition: .5s ease-out;transform-origin: 0% 0%;}.submenu {width: 100%;}.submenu-standart {min-width: 200px;padding: 10px 0;}.dropdown-standart {position: relative;}.top-menu > li:hover .submenu,.top-menu > li:hover .submenu-standart {opacity: 1;visibility: visible;transform: translate3d(0,0,0);}.submenu > li {float: left;width: calc(100% / 3);padding: 0 18px;border-right: 1px solid #e5e5e5;}.submenu-standart li {padding: 0 18px;}.submenu > li:last-child {border-right: none;}.submenu img {display: block;width: 100%;}.submenu li a,.submenu-standart li a {display: block;padding: 5px 0;color: #666;font-size: 13px;}.submenu li .link-image {padding: 0;}.submenu li a:hover {color: #B03062;}.submenu h3 {font-family: 'Playfair Display', serif;font-size: 20px;font-weight: 400;margin: 10px 0;}.container {max-width: 960px;margin: 0 auto;}.content {margin: 20px auto;padding: 0 20px;}
.إضافة استجابة للأجهزة المحمولة
@media(max-width:768px) {.top-menu li {width: 100%;height: auto!important;}.top-menu > li {border-bottom: 1px solid #e5e5e5;}.top-menu > li > a {padding: 18px}.submenu,.submenu-standart {position: relative;display: none;box-shadow: none;padding: 0;background: rgba(0,0,0,.02);}.submenu-standart {padding: 10px 0;}.submenu > li {border-right: none;border-bottom: 1px solid #e5e5e5;padding: 18px;}.submenu h3 {margin: 0 0 10px}.submenu .image-header {margin: 10px 0}.submenu li:last-of-type {border-bottom: none}.top-menu > li:hover .submenu,.top-menu > li:hover .submenu-standart {display: block;}}
تفعيل البرنامج المساعد MatchHeight الكود الذي اضفناه في الاول اذا قمت باضافته لاتضيفه مرة اخري .
jQuery(document).ready(function($) {$('.submenu > li').matchHeight();});
تأثيرات الظهور علي القائمة
في المثال الموضح ، تظهر القائمة من خلال التمرير من أسفل إلى أعلى. لتنويع مشاريعك ، يمكنك استخدام أحد التأثيرات التالية
استدر من الجزء الخلفي من الشاشة
.submenu {border-top: 1px solid #e5e5e5;box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);background: white;padding: 30px 0;position: absolute;top: 100%;left: 0;width: 100%;z-index: 5;opacity: 0;visibility: hidden;transform: perspective(600px) rotateX(-90deg);transform-origin: 0% 0%;transition: .4s ease-in;}.top-menu > li:hover .submenu {opacity: 1;visibility: visible;transform: perspective(600px) rotateX(0);}
الانزلاق من أعلى إلى أسفل
.submenu {border-top: 1px solid #e5e5e5;box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);background: white;padding: 30px 0;position: absolute;left: 0;width: 100%;top: -60px;opacity: 0;z-index: -1;transition: .4s cubic-bezier(.6, .04, .98, .335);}.top-menu > li:hover .submenu {top: 100%;opacity: 1;z-index: 5;}
الانزلاق من اليسار إلى اليمين
.submenu {border-top: 1px solid #e5e5e5;box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);background: white;padding: 30px 0;position: absolute;width: 100%;top: 100%;left: -60px;opacity: 0;visibility: hidden;z-index: 5;transition: .4s cubic-bezier(.455, .03, .515, .955);}.top-menu > li:hover .submenu {left: 0;opacity: 1;visibility: visible;}
تأثير التحجيم
.submenu {border-top: 1px solid #e5e5e5;box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);background: white;padding: 30px 0;position: absolute;width: 100%;top: 100%;left: 0;opacity: 0;z-index: 5;transform: scale3d(0,0,0);transform-origin: top left;transition: .4s cubic-bezier(0.39, 0.575, 0.565, 1);}.top-menu > li:hover .submenu {left: 0;opacity: 1;transform: scale3d(1,1,1);}
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS