帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2021-06-20 网页特效 评论

插件介绍

一个轻量级的 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;  
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言