برای استعلام یا ارسال سفارش اینجا کلیک کنید.

آموزش ساخت منوی بازشونده با استفاده از bootstrap (پرکاربرد)

ساخت بازشونده در سایت با استفاده از بوت استرپ

از بازشونده ها در سایت های بسیار زیادی استفاده شده است . همچنین ما میتوانیم این بازشونده ها را در سایت های پرکاربرد و مهمی مشاهده کنیم . از جمله سایت های دیجی کالا ، ژاکت ، سافت 98 ، آپارات ، فیلیمو ، سازمان سنجش و …..

 

به طور کلی یک المنت بسیار ضروری و مهم است که به نظم دادن داده ها کمک بیشتری میکند . این بازشونده هارا اکثرا در هنگام پر کردن فیلد های آدرس دیده ایم . مثلا فیلد های استان و شهر . در سایت های مختلفی این المنت وجود دارد ، منظورم اینه که این المنت ضروری و مهم فقط در سایت های کدنویسی وجود ندارد ، بلکه در سایت های دیگری هم این المنت وجود دارد . مثلا در سایت های وردپرسی شما میتوانید ، هرکجا که دوست دارید از این المنت های پرکاربرد استفاده کنید . برای ساخت این بازشونده ها در وردپرس میتوانید از افزونه هایی استفاده کنید . اما فقط یک روش وجود دارد که در ساخت بازشونده ها در هر نوع وبسایتی به شما کمک میکند. آن هم روش کدنویسی و استفاده از فریم ورک معروف بوت استرپ است .

 

برای اطلاعات بیشتر در این زمینه ، وبیت را تا انتهای این مقاله همراهی کنید . چنانچه سوالی در رابطه با ساخت این المنت ها با بوت استرپ داشتید ، میتوانید از قسمت نظرات کاربران با ما به اشتراک بگذارید . همچنین برای آموزش های بیشتر در زمینه طراحی وبسایت و قالب و افزونه های وردپرسی ، یک سر به بخش مقالات آموزش وبیت بزنید . سعی کرده ایم منبعی جامع و مفید برایتان باشیم .

 

در سایت های مختلف با کلیک کردن بر روی یک گزینه ، گزینه‌هایی برای شما بازخواهند شد .( به همین دلیل به این المنت نام بازشونده را داده ایم ) . حتی گاها در برخی وبسایت ها مشاهده میکنیم که با رفتن ماوس بروی یک گزینه ، گزینه های درونی آن لیست میشوند . این خیلی پرکاربرد و فوق العاده است ، شما به راحتی میتوانید در هرجای وبسایت خود ، داده هایی را به صورت لیست قرار دهید که باعث بی نظمی صفحه وب نشود . برای یادگیری بیشتر در مورد ساخت این المنت ، وبیت را تا انتها همراهی کنید .

 

ساخت منوی باز شونده در بوت استرپ

برای شروع کار ، پیشنهاد میشود ابتدا ، بوت استرپ را به سایت خود اضافه کنید . یعنی برای استفاده از این فریم ورک ، باید پیش نیازهای آن را فراهم کنید . برای ساختن یک بازشونده به طور کامل ، میتوانید ادامه آموزش را پیگیری کنید .

 

1 – فایل‌های اصلی بوت استرپ را اضافه کنید.

در گام اول کدهایی که در زیر برای شما قرار داده‌ایم را در سایت خود قرار دهید.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

2 – ابتدا یک منوی ساده بسازید

با استفاده از کدهایی که ما در این قسمت برای شما قرار می‌دهیم می‌توانید به‌راحتی یک منوی ساده بسازید.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img class="logo horizontal-logo" src="horizontal-logo.svg" alt="forecastr logo">
    </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 ml-auto">
        <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="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
            <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 dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
            <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>
        ...
      </ul>
    </div>
  </div>
</navbar>

3 – اضافه کردن یک سری استایل برای زیبایی بیشتر

.navbar .nav-item:not(:last-child) {
  margin-right: 35px;
}
 
.dropdown-toggle::after {
   transition: transform 0.15s linear; 
}
 
.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

 

تا اینجای کار شما موفق به ساخت منوی بازشونده خود شدید . میتوانید این کد را با تغییرات جزئی (تغیراتی در داده های هر منو ) در هر کجای وبسایت خود استفاده کنید . در این مقاله سعی کرده ایم که به شما ایده ساخت دراپ باکس های حرفه ایی را بدهیم. میتوانید عینا از کد بالا استفاده کنید . اما همیشه به یاد داشته باشید که سفارشی سازی کردن چنین المنت هایی ، کار بسیار راحتیه و شما میتوانید با چند کلیک این کار را انجام دهید .

معتقدم ، با اندگشتان آماده به تایپ و ذهن پر از ایده های ناب میتوانم دنیای خودم رو عوض کنم . محمدحسین هستم دانشجوی نرم افزار ، طراح وب سایت ، تولید کننده محتوای وبمستری و هر موضوعی در زمینه IT ، طراح رابط کاربری و تجربه کاربری و ...
در کانال ما عضو شوید و از آخرین اخبار ، محصولات و تخفیف با خبر شوید... کانال تلگرام وبیت

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده اید و با آن موافق هستید.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

آخرین نمونه کار ها مشاهده همه

آخرین طرح های اختصاصی اجرا شده