时尚的jQuery下拉和弹出框插件 12 个位置组合 - dropdown.js

演示  website 下载

插件介绍

一个轻量级的 jQuery 插件，用于创建具有 12 个位置组合的响应式弹出式下拉菜单。

使用方法

1. 将jQuery库和下拉插件的文件添加到页面。

<link rel="stylesheet" href="/path/to/dropdown.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dropdown.js"></script>

2. 创建下拉菜单的新实例。

$(function(){
  let dropdownView = new Dropdown('dropdown-view');
});

3.下拉菜单所需的 HTML 结构。

<div id="dropdown-view" class="mt-dropdown">

  <!-- Toggle Button -->
  <button data-mt-dropdown="dropdown-view"></button>

  <!-- Dropdown -->
  <div id="dropdown-view-menu"
    class="mt-dropdown-menu mt-dropdown-pb">
   <!-- Dropdown Content Here -->
  <div>
    
<div>

4. 自定义下拉菜单的位置和位置。

<!-- Bottom Center -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-pb">
  <!-- Dropdown Content Here -->
<div>

<!-- Bottom Left -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-pbs">
  <!-- Dropdown Content Here -->
<div>

<!-- Bottom Right -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-pbe">
  <!-- Dropdown Content Here -->
<div>

<!-- Top Center -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-pt">
  <!-- Dropdown Content Here -->
<div>

<!-- Top Left -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-pts">
  <!-- Dropdown Content Here -->
<div>

<!-- Top Right -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-pte">
  <!-- Dropdown Content Here -->
<div>

<!-- Right Center -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-pe">
  <!-- Dropdown Content Here -->
<div>

<!-- Right Top -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-pet">
  <!-- Dropdown Content Here -->
<div>

<!-- Right Bottom -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-peb">
  <!-- Dropdown Content Here -->
<div>

<!-- Left Center -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-ps">
  <!-- Dropdown Content Here -->
<div>

<!-- Left Top -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-pst">
  <!-- Dropdown Content Here -->
<div>

<!-- Left Bottom -->
<div id="dropdown-view-menu" class="mt-dropdown-menu mt-dropdown-psb">
  <!-- Dropdown Content Here -->
<div>

5.通过覆盖 .xml 文件中的默认变量来自定义下拉样式_variables.scss。

// Contents

$enablePositionMedia: false; // Position classes for different media
$enableRounded: false;       // Rounded classes
$enableRoundedMedia: false;  // Rounded classes for different media

// Class

$classBase: "mt-dropdown"; 
$classShow: 'show';        

// Position

$directionValue: 100%;   // It is not recommended to change it
$directionIndent: .5rem; 
$alignmentValue: 0%;     // It is not recommended to change it
$alignmentIndent: 0rem;  

// Media breakpoints

$mediaBreakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

// Others

$zIndexMenu: 1000;            
$transitionDurationShow: .3s; 
$borderRadius: .3rem;