سلام
ببخشید یک سوال داشتم:
من یک ناوبار با بوت استرپ چهار دارم که وقتی اندازه ی صفحه کوچک باشه (برای موبایل) یک منوی همبرگری نمایش داده میشه و چنانچه کاربر روی اون منو کلیک کنه
ناوبار نمایش داده میشه.
خب تا اینجا به سادگی در بوت استرپ قابل انجام هست حتی مثال هایی که در خود سایت بوت استرپ هست این امکان رو فراهم کردن.
اما مشکلی که هست اینه که بوت استرپ ناوبار رو مثل یک اسلاید از بالا به پایین باز میکنه و از بالا به پایین میبنده در حالیکه من نیاز دارم تا ناوبار از پهلو باز بشه.
اگر بخواهم مثالی ذکر کنم ناوبار هایی که در سایت های زیر هستند شبیه چیزی هستن که من میخوام:
https://html5up.net/spectral
https://blackrockdigital.github.io/s...imple-sidebar/
همین طور که مشاهده میکنید از پهلو باز میشن نه از بالا.
حالا من برای اینکه همچین چیزی بسازم کدهای زیر رو نوشتم که شامل یک فایل html و یک فایل css هست و این کدها در به پیوست ضمیمه شده اند.
فایل html شامل اینهاست:
کد HTML:<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script></head><body> <div class=""><nav class="navbar navbar-expand-sm navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button> <a class="navbar-brand" href="#">Navbar</a> <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> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div></nav></div> </body></html>
و کدهای css من هم این ها هستند:
@keyframes anim {
from {
width: 0vw;
}
to {
width: 30vw;
}
}
@media all and (max-width: 768px) {
.navbar-collapse{
position: fixed;
top: 0;
right: 0;
animation-name: anim;
animation-duration: 2s;
background: blue;
}
همان گونه که مشاهده میکنید من در فایل سی اس اس گفته ام که اگر روی دکمه ی باز کردن ناوبار کلیک شد با یک انیمیشن باز شود.
اما خروجی مطلوب رو دریافت نمیکنم و ناوبار وقتی در حال باز شدن هست کلی تکون میخوره و اضافه هم جلو میره.
خیلی ممنون بابت هر راهنمایی و نقطه نظری که لطف بفرمایید
پاسخ با نقل قول