zuojiankuohaophpcn!-- 下拉菜单内容 --youjiankuohaophpcn
zuojiankuohaophpcnul id="dropdown1" class="dropdown-content"youjiankuohaophpcn
zuojiankuohaophpcnliyoujiankuohaophpcnzuojiankuohaophpcna href="#!youjiankuohaophpcn选项 1zuojiankuohaophpcn/ayoujiankuohaophpcnzuojiankuohaophpcn/liyoujiankuohaophpcn
zuojiankuohaophpcnliyoujiankuohaophpcnzuojiankuohaophpcna href="#!youjiankuohaophpcn选项 2zuojiankuohaophpcn/ayoujiankuohaophpcnzuojiankuohaophpcn/liyoujiankuohaophpcn
zuojiankuohaophpcnli class="divider" tabindex="-1"youjiankuohaophpcnzuojiankuohaophpcn/liyoujiankuohaophpcn
zuojiankuohaophpcnliyoujiankuohaophpcnzuojiankuohaophpcna href="#!youjiankuohaophpcn退出zuojiankuohaophpcn/ayoujiankuohaophpcnzuojiankuohaophpcn/liyoujiankuohaophpcn
zuojiankuohaophpcn/ulyoujiankuohaophpcn
注意:data-target 的值必须与下拉 ul 的 id 一致。
初始化下拉组件
Materialize 的下拉功能需要通过 JavaScript 初始化。确保页面加载后调用 M.Dropdown.init():
立即学习“前端免费学习笔记(深入)”;
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, {
// 可选配置项
});
});
设置下拉菜单位置
你可以通过初始化时传入选项来自定义下拉菜单的显示位置:
喜鹊标书
AI智能标书制作平台,10分钟智能生成20万字投标方案,大幅提升中标率!
下载
-
alignment: 'left' 或 'right' —— 控制菜单相对于触发器的对齐方式
-
constrainWidth: false —— 允许自定义宽度
-
coverTrigger: false —— 是否覆盖触发元素(默认 true)
-
closeOnClick: true —— 点击菜单项是否自动关闭
-
hover: false —— 是否启用悬停触发(建议设为 false,使用点击)
-
inDuration 和 outDuration —— 控制动画时间
例如,让菜单靠右对齐并禁用触发器覆盖:
M.Dropdown.init(elems, {
alignment: 'right',
coverTrigger: false,
closeOnClick: true
});
调整下拉菜单偏移量
如果你希望下拉菜单的位置上下偏移,可以使用 CSS 微调:
.dropdown-content {
margin-top: 10px; /* 向下偏移 */
/* 或者使用 transform */
transform: translateY(5px) !important;
}
也可以在初始化时通过 JS 动态计算位置,但通常使用 CSS 更直接。
基本上就这些。Materialize 的下拉组件灵活且易于定制,只要掌握初始化参数和基础结构,就能快速构建出符合设计需求的导航菜单。