jQuery实现仿淘宝下拉菜单

jQuery实现仿淘宝下拉菜单

     首先分析下拉菜单,在淘宝中的商品导航中,将鼠标移入导航栏中显示下拉菜单,当鼠标移除导航栏是隐藏下拉菜单列表;所以很容易联想到使用到jQuery中的事件函数mouseover和mouseout。mouseout事件在鼠标从元素上离开后会触发。mouseover事件会在鼠标移入对象时触发。

首先写出HTML代码:





仿下拉菜单





写出css样式:


引入jQuery:


分析写出jQuery:


效果图:

jQuery实现仿淘宝下拉菜单_第1张图片

jQuery实现仿淘宝下拉菜单_第2张图片

jQuery实现仿淘宝下拉菜单_第3张图片

你可能感兴趣的:(jQuery)