آموزش ساخت منوی موبایل hamburger menu با بوتسرپ

ساخت منوی موبایل hamburger menu – در واقع در این آموزش از بوتسرپ کمک خواهیم گرفت .

و نیازی به کدنویسی با js نیست چرا که از قبل تمامی کار ها توسط bootstrap انجام شده است .

برای شروع کار ابتدا باید bootstrap.min.css و jquery-3.2.1.min.js و bootstrap.min.js را در صفحه html ضمیمه کنید و سپس از تگ هایی که در ادامه استفاده می شود بهره برد .

شروع کار با index.html

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>
    <div class="container">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="https://rapidcode.ir">رپید کد</a>
            <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>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">صفحه اصلی <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">مقالات</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">
                            برنامه نویسی
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">پی اچ پی</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">جاوا اسکریپت</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">پایتون</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">درباره ما</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="برنامه نویسی ..." aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">جستجو</button>
                </form>
            </div>
        </nav>
    </div>
    <script src="static/js/lib/jquery-3.2.1.min.js"></script>
    <script src="static/js/lib/bootstrap.min.js"></script>
</body>
</html>

و یک استایل جهت جلوگیری از فاصله زیاد تگ UL

.navbar-nav{
    margin-right: 15px !important;
    padding: 0 !important;
}

خروجی منوی موبایل ( نتیجه )

ساخت منوی موبایل hamburger menu — منوی موبایل

دانلود برنامه منوی موبایل برای وب

آموزش ساخت منوی موبایل hamburger menu با بوتسرپ

شروع کار با index.html

خروجی منوی موبایل ( نتیجه )

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید . لغو پاسخ