这是一款非常实用的jQuery和CSS3响应式多用途多级下拉菜单插件。该下拉菜单插件可以将目录进行分组多级展示,可以以网格形式展示缩略图,还可以使用图标和文字混搭,适合于网站目录或产品目录较多的站点使用。
该下拉菜单插件可以在桌面设备和移动手机设备上正常工作,但两种情况下的下拉菜单表现形式有所不同,来看下面的图片:
在这个插件中,下拉菜单是通过鼠标点击或用手触摸下拉菜单按钮来触发的。
制作方法
HTML结构
这个下拉菜单插件的HTML结构分为2个主要部分:一个是
元素,用于放置页面的内容。
.cd-dropdown-wrapper
元素中包含一个.cd-dropdown-trigger
元素,用于触发下拉菜单。还有一个.cd-dropdown
元素,它包含了多级嵌套的无序列表元素。
CSS样式
对于移动手机设备的用户体验来说,应该让用户的注意力放在下拉菜单的内容上。插件中将下拉菜单设置为固定定位,并将它的宽度和高度设置为手机的100%宽度和高度。默认情况下,它隐藏在屏幕右上方(translateY(-100%)
)。当用户触发了下拉菜单按钮,下拉菜单上会被添加.dropdown-is-active
class,该class将下拉菜单移动到屏幕中。
.cd-dropdown {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateY(-100%);
transition: transform 0.5s;
}
.cd-dropdown.dropdown-is-active {
transform: translateY(0);
}
当用户选择了一个新一级子菜单,可见的菜单面板被使用.move-out
class移出屏幕之外,新的菜单面板会通过在
.is-hidden
移入屏幕中。
.cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden {
/* push the secondary dropdown items to the right */
transform: translateX(100%);
}
.cd-dropdown-content.move-out > li > a, .cd-dropdown-content ul.move-out > li > a {
/* push the dropdown items to the left when secondary dropdown slides in */
transform: translateX(-100%);
}
在大屏幕设备上(屏幕尺寸大于1024像素),因为有足够的空间显示下拉菜单的内容,因此不用替换可见的内容。
@media only screen and (min-width: 1024px) {
.cd-dropdown {
position: absolute;
top: 100%;
/* reset style*/
height: auto;
width: auto;
opacity: 0;
visibility: hidden;
transform: translateY(30px);
transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
.cd-dropdown.dropdown-is-active {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
}
.cd-dropdown-content {
/* reset mobile style */
position: static;
height: auto;
width: 280px;
}
.cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
transform: translateX(0);
left: 100%;
height: auto;
}
.cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden {
/* reset mobile style */
transform: translateX(0);
}
.cd-dropdown-content > .has-children > ul {
visibility: hidden;
}
.cd-dropdown-content > .has-children:hover > ul {
/* when hover over .cd-dropdown-content items - show subnavigation */
visibility: visible;
}
.cd-dropdown-content > .has-children:hover > .cd-secondary-dropdown > li > ul {
/* if .cd-secondary-dropdown is visible - show also subnavigation */
visibility: visible;
}
}
JAVASCRIPT
插件中使用jQuery来监听指定元素的点击事件,如.cd-dropdown-trigger
,.go-back
等,并为他们相应的添加和移除对应的class。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!