jQuery美容医院网站下拉导航菜单
红色主题的美容医院网站导航,挺适合做品牌感强的网站。菜单下拉那块用的是jQuery配合CSS来做交互,逻辑也不复杂。主导航是个
- 列表,子菜单默认隐藏,鼠标一悬停就用
slideToggle()
搞个小动画,过渡还挺顺滑的。
配色方面也蛮讲究,主菜单是#FF69B4的高亮粉红,子菜单稍微浅一点,看起来不会太刺眼。你可以按需改成自己品牌色,整体结构还蛮通用。
CSS那块就是常规的定位+隐藏+悬停展示。position: absolute
加上display: none
控制子菜单初始状态,鼠标到主菜单上再让它出现,结构简单,响应也快。
交互用的$('#menu > li').hover()
,搭配.stop()
避免动画闪烁,蛮实用的。你也可以加点setTimeout
做延迟,防止误触发。
再提醒一句,如果你是做移动端页面的,记得加上媒体查询,让导航在小屏幕下也能正常展示。最好再配个汉堡菜单,不然下拉层级太多也不好点。
,这套导航结构清晰、代码干净,改起来也方便。拿来做初版页面或者快速上线用,还是蛮省事的。如果你还想看看其他风格的下拉菜单,可以去参考这组特效,风格多样,搭配灵活。
下载地址
用户评论