اطلب كود html و كود css عرض قائمة جانبية للـــ (button)

كمال صالح2 · 5 فبراير

Taha Khalid · 5 فبراير

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

اولا عليك انشاء ملف html وليكون index.html ثما قم باخذ هذه الكود الخاص باللغة html والصقه داخل ملف html

<html lang="en">
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>

    <div class="wrapper">
        <!--القائمة العلوية -->
        <div class="sidebar">
            <!--صورة الملف الشخصي والنص-->
            <!--عنصر القائمة-->
        </div>

    </div>
  <script>

  </script>
</body>
</html>

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

    @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*{
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body{
    background: #f5f6fa;
}

.wrapper .sidebar{
    background: rgb(5, 68, 104);
    position: fixed;
    top: 0;
    left: 0;
    width: 225px;
    height: 100%;
    padding: 20px 0;
    transition: all 0.5s ease;
}

وبهذه نكون وصلنا الي هذه الشكل البسيط الصوره رقم 1

ثالث خطوه أضف صور الملف الشخصي والعناوين

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

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

هنا، استخدمت border-radius بنسبة 50% في صورة الملف الشخصي مما يجعل الصورة تبدو مستديرة تمامًا. يمكنك تغيير هذه النسبة إذا كنت ترغب في الاحتفاظ بشكل مربع أو بحجم آخر.

<div class="profile">
                <img src="https://1.bp.blogspot.com/-vhmWFWO2r8U/YLjr2A57toI/AAAAAAAACO4/0GBonlEZPmAiQW4uvkCTm5LvlJVd_-l_wCNcBGAsYHQ/s16000/team-1-2.jpg" alt="profile_picture">
                <h3>Anamika Roy</h3>
                <p>Designer</p>
            </div>

ثما قم بوضع التصميم الخاص بهذ الرمز

.wrapper .sidebar .profile{
    margin-bottom: 30px;
    text-align: center;
}

.wrapper .sidebar .profile img{
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
}

.wrapper .sidebar .profile h3{
    color: #ffffff;
    margin: 10px 0 5px;
}

.wrapper .sidebar .profile p{
    color: rgb(206, 240, 253);
    font-size: 14px;
}

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

<ul>
                <li>
                    <a href="#" class="active">
                        <span class="icon"><i class="fas fa-home"></i></span>
                        <span class="item">Home</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-desktop"></i></span>
                        <span class="item">My Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-user-friends"></i></span>
                        <span class="item">People</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-tachometer-alt"></i></span>
                        <span class="item">Perfomance</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-database"></i></span>
                        <span class="item">Development</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-chart-line"></i></span>
                        <span class="item">Reports</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-user-shield"></i></span>
                        <span class="item">Admin</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-cog"></i></span>
                        <span class="item">Settings</span>
                    </a>
                </li>
            </ul>
        </div>

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

في هذه الحالة، لقد استخدمت اللون الأبيض بين الرموز والنص مما يعطي مظهرًا أكثر إثارة على خلفية زرقاء. يمكنك أن ترى أدناه أنني أضفت تأثير (hover). عندما يكون الماوس فوق القائمة، ستتغير الخلفية بللون اخر كما في الصوره الثالثه

.wrapper .sidebar ul li a{
    display: block;
    padding: 13px 30px;
    border-bottom: 1px solid #10558d;
    color: rgb(241, 237, 237);
    font-size: 16px;
    position: relative;
}

.wrapper .sidebar ul li a .icon{
    color: #dee4ec;
    width: 30px;
    display: inline-block;
}

.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
    color: #0c7db1;

    background:white;
    border-right: 2px solid rgb(5, 68, 104);
}

.wrapper .sidebar ul li a:hover .icon,
.wrapper .sidebar ul li a.active .icon{
    color: #0c7db1;
}

.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
    display: block;
}

Najah Alsaker · 6 فبراير

يمكنك عمل قائمة جانبية مرنة ومتجاوبة مع جميع الشاشات باستخدام ال html و css مع استخدام اطار العمل بوتستراب الذي سيقوم بستهيل العملية اكثر واختصار العناء الطويل من كتابة شيفرات كثيرة

بالبداية دعني اعطيك لمحة سريعة عن اطار العمل bootstrap هو اطار عمل مفتوح المصدر يساعد في تصميم صفحات الويب من خلال توفير كلاسات جاهزة للتصميمات المنتشرة ويوفر تجاوب مرن مع مختلف انواع الشاشات

هذه كانت لمحة بسيطة يمكنك التعرف عليه اكثر من خلال زيارة الموقع الرسمي ل بوتستراب من هنا

او زيارة التوثيق الخاص ب بوتستراب المتوفر لدى اكاديمية حسوب من هنا

اذا ل نبدا

بالبداية قم بانشاء ملف index.html وقم باستدعاء bootstrap بداخله بهذه الطريقة

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <!--اضف الكود الخاص بك هنا -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

الان دعني اعطيك كود مخصص لعمل قائمة جانبية قم بنسخه ولصقه في صفحة ال index.html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
   <!-- اضف الاكوادو الاضافات القادمة هنا -->
  </div>
</div>

هذا كود يقوم بانشاء زر وعند الضغط عليه يفتح لك قائمة جانبية

يمكنك البحث عن تنسيقات قائمة جانبية اخرى ان لم تعجبك هذه من خلال البحث على كلمة Sidebar في التوثيق الرسمي ل bootstrap الذي ارفقت لك رابطه في بداية الاجابة

اصبح لدينا الان قائمة جانبية تفتح وتغلق من خلال الضغط على ال button ولكنها فارغة دعنا ننشئ عناصر القائمة سويا عن طريق اضافة الكود التالي

     <ul class="list-group list-group-flush">
        <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
        <li class="list-group-item"> <a href="#" class="text-decoration-none ">A second item </a></li>
        <li class="list-group-item"><a href="#" class="text-decoration-none ">A third item </a></li>
        <li class="list-group-item"><a href="#" class="text-decoration-none ">A fourth item </a></li>
        <li class="list-group-item"><a href="#" class="text-decoration-none ">And a fifth one </a></li>
      </ul>

مكان اشارة المربع هذه "#" يمكنك اضافة رابط او مسار الصفحة الذي تريد لعنصر القائمة ان ينقلك عليها

كما انه بامكانك زيادة عدد عناصر القائمة عن طريق تكرار الكود التالي بالعدد الذي تريده

        <li class="list-group-item"><a href="#" class="text-decoration-none "> item name </a></li>

و ل اضافة ايقونات لعناصر القائمة يمكنك اتباع الطريقة التالية

اولا نذهب الى موقع bootstrap icons من هنا
نختار الايقونات التي تعجبنا ونقوم بالضغط عليها لنحصل على الكود الخاص بها الذي يشبه هذا
```
<i class="bi bi-1-circle-fill"></i>
```
ونقوم بتضمينه بداخل عناصر القائمة كالتالي :

        <li class="list-group-item"><i class="bi-alarm"></i><a href="#" class="text-decoration-none ">A second item </a></li>

ولا تنسى تضمين bootstrap icons داخل ملف index.html في الوسم <head> لتتمكن من مشاهدة النتيجة

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

اما الان ف دعنا ننشئ ملف style.css لنقوم بتغيير الالوان والتنسيقات كما نريد ولا تنسى تضمينه داخل ملف index.html بداخل الوسم <head> ليتم قراءته كالتالي :

    <link rel="stylesheet" href="style.css">

والان لتغيير القليل من تنسيقات القائمة يمكنك اختيار ما تفضله من الكود التالي وكتابته داخل ملف ال style.css

.offcanvas-body{
    /* لتغيير لون خلفية القائمة */
    background-color: #007bff;
}

  .list-group-item {
    /* لتغيير لون خليفة عناصر القائمة */
   background-color: #007bff;
    
  }
    .list-group-item a{
        /* لتغيير لون النصوص */
        color: #fff;
    }
    .list-group-item a:hover{
        /* لتغيير لون النصوص عندما يتم تحويل المؤشر اليها */
        color: #000;
    }
    .list-group-item.active{
        /* لتغيير لون خلفية العنصر النشط */
        background-color: #fff;
    }
    .list-group-item.active a{
        /* لتغيير لون النصوص عنصر نشط */
        color: #000;
    }
    .list-group-item.active a:hover{
        /* لتغيير لون النصوص عندما يتم تحويل المؤشر اليها */
        color: #fff;
    }

اصبحت جميع الاساسيات الان بين يديك واصبح بامكانك تغيير التنسيقات وتصميمها كما تشاء

وملاحظة اخيرة ان تنسيق الصفحة الافتراضي يكون من اليسار الى اليمين لذلك اذا اردت تغير محاذات جميع العناصر من اليمين الى اليسار كل ماعليك فعله هو التعديل بهذا الوسم <html lang="en"> داخل ال index.html ليصبح كالتالي <html lang="ar" dir="rtl">

بالتوفيق لك

اطلب كود html و كود css عرض قائمة جانبية للـــ (button)

السؤال

كمال صالح2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

Taha Khalid

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Najah Alsaker

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية