فهرست های کشویی
این عناصر را می توان به راحتی در صفحات و بلوک های مختلف مورد استفاده قرار دهید و سفارشی سازی کنید
شما میتوانید تمام المان های بکار رفته را در قالب استک از
صفحه لیست المان ها ←
مشاهده کنید
فهرست کشویی ساده
فهرست های کشویی استک می‌توانند اهداف مختلفی از منوی پیمایش گرفته تا دکمه چند گزینه‌ای را داشته باشند. راه‌های مختلفی برای ارائه فهرست کشویی وجود دارد، اما همه از الگوی نشانه‌گذاری یکسانی پیروی می‌کنند. برای استفاده از این فهرست ها باید از کلاس .dropdown در المان مورد نظر خود همراه با یک المان دیگر درون اون المان اصلی با کلاس .dropdown__trigEN استفاده کنید که با کلیک روی آن، منوی کشویی در داخل نمایش داده می شود و المان دیگری با کلاس .dropdown__container برای محتویات درون فهرست کشویی ما میباشد.
پهنای کرکره ها با استفاده از کلاس های ستون Bootstrap کنترل می شود.
<div class="dropdown"> <span class="dropdown__trigger">دکمه فهرست</span> <div class="dropdown__container"> <div class="container"> <div class="row"> <div class="col-md-3 col-lg-2 dropdown__content"> محتوای انتخابی </div> </div><!--end row--> </div><!--end container--> </div><!--end dropdown container--> </div>
من یک محتوا درون کلاس .dropdown__contentهستم. عرض من با استفاده از کلاس های ستون Bootstrap کنترل می شود. می توانید در مورد آنها بیشتر مطالعهکنید.
منوی کشویی
به راحتی منوهای کشویی تودرتو را با استفاده از کلاس .menu-vertical درون فهرست کشویی خود ایجاد کنید
<div class="dropdown"> <span class="dropdown__trigger">منوی کشویی</span> <div class="dropdown__container"> <div class="container"> <div class="row"> <div class="col-md-3 col-lg-2 dropdown__content"> <ul class="menu-vertical"> <li> ... </li> <li> ... </li> </ul> </div> </div><!--end row--> </div><!--end container--> </div><!--end dropdown container--> </div>
یک گزینه را انتخاب کنید
هاور برای فهرست کشویی
به طور پیش فرض، فهرست های کشویی با کلیک کردن بر روی آن ها فعال می شوند که کلاس پیش فرض انها .dropdown__trigENمیباشد. اگر ترجیح می‌دهید که فهرست ها به صورت شناور هنگام هاور شدن واکنش نشان دهند، میتوانید المانی با کلاس .dropdown--hover را درون المان کلاس .dropdown ایجاد کنید.
اگر شما ترجیح می دهید هر دو حالت یعنی باز شدن با هاور و ایستادن در جای خود با کلیک کردن، میتوانید از کلاس .dropdowns--hover در المان <body> استفاده کنید.
<div class="dropdown dropdown--hover"> ... </div>
<body class="dropdowns--hover"> ... </body>