如何简洁实现电商网站常用的二级菜单显示特色产品?这是一个广泛的东西,哪家和哪家的都不一样,所以说出一个标准答案,似乎不太可能。主要是看需求吧。
前2天,接一个私活,要求在产品下拉菜单中实现二级菜单的特色产品,我不知道这样说,是不是说清楚了,简单些,就是当鼠标移动到一级菜单时,显示二级菜单,鼠标移到二级菜单选项时,在二级菜单的右侧出现特色产品的缩略图和名称。
本人理工男,语言表达差,请谅解,还是看效果图吧:
二级菜单显示特色图片
大家把下拉菜单理解为公司产品,把第一个。。。第5个,理解为产品系列,而雪山飞狐中的人物头像就想想成一个个活生生的产品,就可以了。
下面开始说是如何实现的。
一、HTML结构:
如图:
html结构1
HTML结构2
HTML结构完成
二、书写css样式:
css样式
css样式2
css样式3
css样式4,完结
三、jquery代码:
jquery代码
PS:需要注意的2点:
1、不要忘记引入jquery库呀。
<script src=”***/jquery/1.11.3/jquery.min.js”></script>
2、注意hover的对象:
<!– css书写必须为li:hover否则的话,二级菜单出不来。 –>
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com