wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

القائمة المنسدلة الضخمة المستجيبة مع CSS

لا يختلف المبدأ العام لإنشاء قائمة ضخمة عن إنشاء قائمة منسدلة أفقية منتظمة. الاختلاف الوحيد هو أنه ليس كل عنصر قائمة تتداخل فيه القائمة المنسدلة يحصل

القائمة المنسدلة الضخمة المستجيبة لـ CSS
موضوعنا اليوم  حول إنشاء قائمة منسدلة كاملة العرض متجاوبة أو مربع تنقل في CSS خالص. تُستخدم القائمة الضخمة بشكل شائع في مواقع التسوق عبر الإنترنت وأي موقع تجارة إلكترونية آخر لأنها الطريقة المثلى لتنظيم المحتوى وعرضه. 

 لا يختلف المبدأ العام لإنشاء قائمة ضخمة عن إنشاء قائمة منسدلة أفقية منتظمة. الاختلاف الوحيد هو أنه ليس كل عنصر قائمة تتداخل فيه القائمة المنسدلة يحصل على موضع نسبي ، ولكن قائمة المستوى الأعلى أو أي حاوية كتلة أخرى.
 في هذه الحالة ، يمكننا ضبط عرض القائمة المنسدلة على 100٪ ، والتي ستكون مساوية لعرض قائمة المستوى الأعلى ، وليس عرض عنصر القائمة. للحصول على قائمة منسدلة بالحجم العادي ، تحتاج إلى تعيين فصل دراسي وتعيين موضعه النسبي. كل عمود في القائمة المنسدلة هو عنصر قائمة يحتوي على رأس (اختياري) وقائمة فرعية بالداخل.
   
القائمة المنسدلة الضخمة المستجيبة لـ CSS

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

تأثيرات الظهور علي القائمة

في المثال الموضح ، تظهر القائمة من خلال التمرير من أسفل إلى أعلى. لتنويع مشاريعك ، يمكنك استخدام أحد التأثيرات التالية

استدر من الجزء الخلفي من الشاشة

Number-1-Free

.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);
}

الانزلاق من أعلى إلى أسفل

Number-2-Free

.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;
}

الانزلاق من اليسار إلى اليمين

Number-3-Free

.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;
}

تأثير التحجيم

Number-4-Free

.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

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,17,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,2,معدات حربية,34,معدات زراعية,6,مقالات,101,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: القائمة المنسدلة الضخمة المستجيبة مع CSS
القائمة المنسدلة الضخمة المستجيبة مع CSS
لا يختلف المبدأ العام لإنشاء قائمة ضخمة عن إنشاء قائمة منسدلة أفقية منتظمة. الاختلاف الوحيد هو أنه ليس كل عنصر قائمة تتداخل فيه القائمة المنسدلة يحصل
https://blogger.googleusercontent.com/img/a/AVvXsEhEfGSJHzFysFfv_IbARJo5fJ894-WqE2xUR2fFYzCcns1p2yMxxhAK_4tJZuf30aueC3MCwZmLGTVkVo6xr_aMCasmDDduRFqOisHWkf6uBj8yPCKhUFAeyAR7VDB5Lgw1QifLianvmlomc5i_fsxgBry53YOiBVr5jSoxsB-MWQIUcg_UgDRFZM0o=s16000
https://blogger.googleusercontent.com/img/a/AVvXsEhEfGSJHzFysFfv_IbARJo5fJ894-WqE2xUR2fFYzCcns1p2yMxxhAK_4tJZuf30aueC3MCwZmLGTVkVo6xr_aMCasmDDduRFqOisHWkf6uBj8yPCKhUFAeyAR7VDB5Lgw1QifLianvmlomc5i_fsxgBry53YOiBVr5jSoxsB-MWQIUcg_UgDRFZM0o=s72-c
Wesam
https://www.wesamdev.com/2021/11/CSS-Responsive-Mega-Dropdown.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2021/11/CSS-Responsive-Mega-Dropdown.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content