لا يختلف المبدأ العام لإنشاء قائمة ضخمة عن إنشاء قائمة منسدلة أفقية منتظمة. الاختلاف الوحيد هو أنه ليس كل عنصر قائمة تتداخل فيه القائمة المنسدلة يحصل
يمكن أن يكون ارتفاع كل عمود مختلفًا ، وإذا أضفت خلفية أو حدًا إلى القائمة الفرعية ، فسيكون الفرق في الارتفاع ملحوظًا. لذلك ، لحل هذه المشكلة ، دعنا ندرج المكون الإضافي 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