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

يمكنك تنفيذ المطلوب من خلال الكود التالي

• الجزء الخاص بزر الإنسدال

   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  </button>

  تأكد من وجود الكلاسات والخصائص مثل data-target و data-toggle

• يجب عليك إحتواء الجزء الخاص بالروابط داخل الكلاس collapse navbar-collapse كالتالي

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  
  </div>

   

• ويتم وضع الكود الخاص بال button والعنصر بالمحدد collapse navbar-collapse داخل العنصر التالي

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  	...
  </nav>

   

بالطبع قد تحتاج لتغيير بعض الخصائص أو الكلاسات يمكنك من خلال قراءة المزيد من المعلومات من الموقع الرسمي ل bootstrap 

لاحظ أن الكود السابق خاص بالإصدار الرابع إذا أردت العمل بالإصدار الخامس ربما تجد بعض الإختلافات البسيطة في اسم كلاس مثلاً

يمكنك لاختصار الوقت والجهد استخدام بوتستراب واستخدام المكون navbar الجاهز في بوتستراب وهو يوفر لك هذا الشيء بشكل تلقائي, ما عليك سوى تضمين المكتبة في مشروعك, ولكن لفعل ذلك دون الحاجة الى بوتستراب, تحتاج الى استخدام القاعدة media في css وأيضا تحتاج لاستخدام بعض أكواد جافاسكربت, لاحظ كود html 

    <nav class="navbar navbar-expand-lg navbar-ligh ">
        <button>click</button>
        <div class="links">
            <a class="navbar-brand" href="login.php">الرئيسية </a>
            <a class="navbar-brand" href="login.php">تسجيل الدخول </a>
            <a class="navbar-brand" href="login.php">تسجيل جديد </a>
            <a class="navbar-brand" href="baridimob.php"> شحن بـ BaridiMob/ ccp/ Paysera </a>
        </div>
    </nav>

وهو مشابه للكود الذيأرفقته ولكن أضفت زر وحاوية للروابط, لنحاول ان نقوم باستخدام css 

    <style>
        a{
            margin: 0 10px;
        }
        button{
            display: none;
        }
        @media(max-width:767px) {
            .links{
                display: none;
            }
            button{
            display: block;
        }
        }
    </style>

لقد قمت باعطاء هوامش خارجية للروابط لتظهر منفصلة عن بعضها, وأيضا في الشاشات الكبيرة قمت باخفاء الزر, وباستخدام القاعدة media قمت باخفاء الروابط في الشاشات الصغيرة واظهار الزر, الآن نحتاج الى استخدام jquery لكي نقوم بعمل الكود الخاص بالزر, عندما نضغط الزر سوف نظهر القائمة, بداية تحتاج الى تضمين jquery في المشروع من خلال نسخ هذا الرابط ولصقه

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

ثم يمكنك كتابة الكود التالي 

    <script>
        $(function(){
            $('button').click(function(){
                $('.links').toggle();
            })
        })
    </script>

هذا الكود وظيفته عند الضغط على الزر نقوم بإظهار قائمة الروابط أو اخفاءها من خلال التابع toggle