كيفية إنشاء قائمة الأكورديون سريعة الاستجابة باستخدام HTML وCSS

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

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

لنبدأ في إنشاء قائمة الأكورديون سريعة الاستجابة هذه. إنه مثالي لأي شخص يتعلم تطوير الويب أو يتطلع إلى تحسين موقعه على الويب من خلال قائمة أنيقة. لنبدأ ونجعل التنقل سهلاً!

طريقة التركيب

اولا كود html

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

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Responsive Accordion Menu | Coding Stella </title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <!-- Accordion Heading One -->
    <div class="parent-tab">
      <input type="radio" name="tab" id="tab-1" checked>
      <label for="tab-1">
        <span>Accordion Heading One</span>
        <div class="icon"><i class="fas fa-plus"></i></div>
      </label>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
      </div>
    </div>

    <!-- Accordion Heading Two -->
    <div class="parent-tab">
      <input type="radio" name="tab" id="tab-2">
      <label for="tab-2">
        <span>Accordion Heading Two</span>
        <div class="icon"><i class="fas fa-plus"></i></div>
      </label>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
      </div>
    </div>

    <!-- Accordion Heading Three -->
    <div class="parent-tab tab-3">
      <input type="radio" name="tab" id="tab-3">
      <label for="tab-3" class="tab-3">
        <span>Accordion Heading Three</span>
        <div class="icon"><i class="fas fa-plus"></i></div>
      </label>
      <div class="content">
        <!-- Sub Heading One -->
        <div class="child-tab">
          <input type="checkbox" name="sub-tab" id="tab-4">
          <label for="tab-4">
            <span>Sub Heading One</span>
            <div class="icon"><i class="fas fa-plus"></i></div>
          </label>
          <div class="sub-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
          </div>
        </div>
        <!-- Sub Heading Two -->
        <div class="child-tab">
          <input type="checkbox" name="sub-tab" id="tab-5">
          <label for="tab-5">
            <span>Sub Heading Two</span>
            <div class="icon"><i class="fas fa-plus"></i></div>
          </label>
          <div class="sub-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Heading Four -->
    <div class="parent-tab">
      <input type="radio" name="tab" id="tab-6">
      <label for="tab-6">
        <span>Accordion Heading Four</span>
        <div class="icon"><i class="fas fa-plus"></i></div>
      </label>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
      </div>
    </div>
  </div>

</body>
</html>

منشورات قد تفيدك

ثانيا كود Css

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

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
::selection {
  background: rgb(0, 123, 255, 0.3);
}
.wrapper {
  max-width: 600px;
  padding: 0 20px;
}
.wrapper .parent-tab,
.wrapper .child-tab {
  margin-bottom: 8px;
  border-radius: 3px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.18);
}
.wrapper .parent-tab label,
.wrapper .child-tab label {
  background: #007bff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  z-index: 99;
  transition: all 0.3s ease;
}
.wrapper .parent-tab label:hover {
  background: #006fe6;
}
.parent-tab input:checked ~ label,
.child-tab input:checked ~ label {
  border-radius: 3px 3px 0 0;
  background: #006fe6;
}
.wrapper label span {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label span {
  font-size: 17px;
}
.parent-tab label .icon {
  position: relative;
  height: 30px;
  width: 30px;
  font-size: 15px;
  color: #007bff;
  display: block;
  background: #fff;
  border-radius: 50%;
  text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label .icon {
  height: 27px;
  width: 27px;
}
.parent-tab label .icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.parent-tab input:checked ~ label .icon i:before,
.child-tab input:checked ~ label .icon i:before {
  content: "\f068";
}
.wrapper .parent-tab .content,
.wrapper .child-tab .sub-content {
  max-height: 0px;
  overflow: hidden;
  background: #fff;
  border-radius: 0 0 3px 3px;
  transition: all 0.4s ease;
}
.parent-tab input:checked ~ .content,
.child-tab input:checked ~ .sub-content {
  max-height: 100vh;
}
.tab-3 input:checked ~ .content {
  padding: 15px 20px;
}
.parent-tab .content p,
.child-tab .sub-content p {
  padding: 15px 20px;
  font-size: 16px;
}
.child-tab .sub-content p {
  font-size: 15px;
}
input[type="radio"],
input[type="checkbox"] {
  display: none;
}

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

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

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

كيفية إنشاء قائمة الأكورديون سريعة الاستجابة باستخدام HTML وCSS

طريقة التركيب

معاينة

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

كيفية إنشاء صندوق ملاحظات ملون على مدونة

إنشاء زر تنزيل جميل ومثير للإعجاب على بلوجر

عمل أداة تحويل الأكواد إلى تنسيق آمن باستخدامHTML وCss

طريقة حذف الرمز ?m=1 في رابط مدونتك أو موقعك على بلوجر

اهم مكتبات خطوط لمدونات بلوجر

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار