网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个轻量级的 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;
转载请注明来源:时尚的jQuery下拉和弹出框插件 12 个位置组合 - dropdown.js
本文永久链接地址:https://www.moyouyouw.cn/code/24520.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论