ساخت منوی کشویی توسط تگ ul و li و بوت استرپ

09:25:00 PM - 1399/06/01

به این سوال امتیاز بدهید 0 تعداد بازدید این سوال : 3274

پاسخ دهنده : saedbfd 11:55:00 AM - ۱۳۹۹/۰۶/۰۲

برای ایجاد منو به صورت کشویی یا آبشاری در Html و Css شما میتونید با استفاده از کدهای Html و Css و تگ ul و li به راحتی این کار را انجام بدید. در ادامه یک مثال براتون از ایجاد منوی کشویی با استفاده از html و css میارم. کافیه دقیقا همین کدها رو کپی و پیست کنید در یک فایل html

ساخت منوی کشویی با استفاده از Html و Css

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container ul {
            list-style: none;
        }


            #container ul li {
                background-color: brown;
                width: 150px;
                border: 1px solid white;
                height: 50px;
                line-height: 50px;
                text-align: center;
                float: left;
                color: white;
                font-size: 18px;
                position: relative;
            }


                #container ul li:hover {
                    background-color: green;
                }

            #container ul ul {
                display: none;
            }


            #container ul li:hover > ul {
                display: block;
            }

            #container ul ul ul {
                margin-left: 150px;
                top: 0;
                position: absolute;
            }
    </style>
    <meta charset="utf-8" />
</head>
<body>
    <div id="container">
        <ul>
            <li>menu 1</li>
            <li>menu 2</li>
            <li>
                menu 3

                <ul>
                    <li>menu 3-1</li>
                    <li>
                        menu 3-2
                        <ul>
                            <li>menu 3-2-1</li>
                            <li>menu 3-2-2</li>
                            <li>menu 3-2-3</li>
                        </ul>
                    </li>
                    <li>menu 3-3</li>
                </ul>
            </li>
            <li>menu 4</li>
        </ul>
    </div>
</body>
</html>

حالا اگر فایل رو اجرا کنید باید منویی مشابه با تصویر زیر رو ببینید :

ساخت منوی کشویی در html

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

اگر هم که بخواید با استفاده از بوت استرپ منوی کشویی ایجاد کنید خب توی خود سایت بوت استرپ نمونه کد برای این کار قرار داده شده. برای این کار هم میتونید کدهای زیر رو دقیقا کپی و پیست کنید.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

در ادامه باید منویی مثل تصویر زیر داشته باشید

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