网站建设公司源码,宁波外贸公司为什么这么多,wordpress新浪图床,郑州建站系统费用效果展示 实现思路及部分代码
1、定义整体页面结构
从上述的效果展示图可以看出#xff0c;页面的整体结构应该需要一个总菜单容器来装载父级菜单项#xff0c;并且对应的父级菜单项应该有对应的菜单子项。子菜单是分类的话#xff0c;我们还需要额外在扩展对应的容器来装…效果展示 实现思路及部分代码
1、定义整体页面结构
从上述的效果展示图可以看出页面的整体结构应该需要一个总菜单容器来装载父级菜单项并且对应的父级菜单项应该有对应的菜单子项。子菜单是分类的话我们还需要额外在扩展对应的容器来装载分类子菜单。所以我们可以这样来定义页面的结构
div classheaderdiv classdropdownbutton classlink/button!-- 分组子菜单 --div classdropdown-menudivdiv classdropdown-heading/divdiv classdropdown-linksa href# classlink/a/div/div/div!-- 只有一组菜单 --div classdropdownbutton classlink/buttondiv classdropdown-menudiv classdropdown-linksa href# classlink/a/div/div/div!-- 带有表单的子菜单 --div classdropdownbutton classlink登录/buttondiv classdropdown-menuform classlogin-formlabel foremailEmail/labelinput typeemail nameemail idemail /label forpasswordPassword/labelinput typepassword namepassword idpassword /button typesubmitLogin/button/form/div/div/div
/div2、编写对应的样式
在页面结构的基础上进行样式的编写具体核心代码如下
.header {background-color: #f3f3f3;display: flex;align-items: baseline;padding: 0.5rem;gap: 1rem;
}.link {background: none;border: none;text-decoration: none;color: #777;font-family: inherit;font-size: inherit;cursor: pointer;padding: 0;
}.dropdown-menu {position: absolute;left: 0;top: calc(100% 0.25rem);background-color: white;padding: 0.75rem;border-radius: 0.25rem;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);opacity: 0;pointer-events: none;transform: translateY(-10px);transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}.dropdown.active .link .dropdown-menu {opacity: 1;transform: translateY(0);pointer-events: auto;
}.information-grid {display: grid;grid-template-columns: repeat(2, max-content);gap: 2rem;
}.dropdown-links {display: flex;flex-direction: column;gap: 0.25rem;
}.login-form input {margin-bottom: 0.5rem;
}3、决定下拉菜单的触发事件并编写对应事件代码
在这里我选择点击事件来触发菜单的显示并且为了方便事件额获取所以我这里会为关键的事件元素添加对应的data属性具体实例如下
div classdropdown data-dropdown/div
button classlink data-dropdown-button新闻版块/buttondocument.addEventListener(click, (e) {const isDropdownButton e.target.matches([data-dropdown-button]);if (!isDropdownButton e.target.closest([data-dropdown]) ! null) return;let currentDropdown;if (isDropdownButton) {currentDropdown e.target.closest([data-dropdown]);currentDropdown.classList.toggle(active);}document.querySelectorAll([data-dropdown].active).forEach((dropdown) {if (dropdown currentDropdown) return;dropdown.classList.remove(active);});
});完整代码
完整代码示例下载
