电子商城网站实现鼠标移动出现导航菜单

最新推荐文章于 2022-03-09 20:29:58 发布
最新推荐文章于 2022-03-09 20:29:58 发布
阅读量974 收藏 2
点赞数
文章标签： 电商实用导航特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qw463800202/article/details/42001877
版权

直接运行即可，图片后缀去掉

*{margin:0;padding:0;}
#container {}
#footer {position: relative; height: 70px;clear:both;} 
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix {display: block;}
body{background:#FFDAB9;font:13px/1.3 'Microsoft Yahei','宋体';color:#999;}
#page,#footer_inner{margin:0 auto;width:960px;}
h1#logo{overflow:hidden;height:93px;padding: 25px 0;}
h1#logo a{display:block;height:93px;}
#container{margin:0 auto;}
#container h2 {font-weight:normal;line-height:28px;}
#container p{padding:10px 0;}
.credit{text-align:center;padding: 20px 0 100px;font-size:10px;}
a, a:visited {text-decoration:none;outline:none;color:#97cae6;}
a:hover{text-decoration:underline;}
#footer{background-color:#212121;width:100%;}
#footer h2{font-size:18px;font-weight:normal;height:70px;line-height:70px;font-family:"Microsoft Yahei";color:#eee;}
#footer_inner{position:relative;}
#footer a.tzine,a.tzine:visited{color:#FCFCFC;font-size:12px;line-height:70px;position:absolute;top:0;right:0;width:90px;}

/*-核心代码-*/
/* 代码整理：www.97zzw.com  97站长网 */
ul li{list-style:none;}
.hide{display:none;}
.sn-subside {float: left;width: 190px;margin_top: 30px;}
.submenu h2{width:190px;height:30px;line-height:30px;background:#2595F2;color:#fff;text-indent:17px;}
.submenulist ul{padding:0 2px 2px;background:#A7C8FF;}
.submenulist li{position:relative;height:36px;line-height:34px;font-size:14px;text-indent:15px;vertical-align:middle;}
.submenulist li h3 a{position:relative;display:block;height:34px;color:#333;font-weight:400;border-top:1px solid #D7ECFF;border-bottom:1px solid #fff;background:#F1F9FF url(images/subindex/subindex0630_x.png) no-repeat 165px 13px;z-index:1;overflow:hidden;}
.submenulist li h3 a.on{background:#fff;width:150px;height:32px;color:#f60;font-weight:700;border:2px solid #F7C900;border-right:0 none;text-indent:25px;overflow:hidden;}
.submenu .listbox{position:absolute;top:0;left:150px;width:430px;background:#fff;border:2px solid #f7c900;font-size:12px;}
.submenu .listbox .procate,.submenu .listbox .hotbrand{float:left;padding:10px 18px;width:250px;overflow:hidden;line-height:14px;text-indent:0;}
.submenu .listbox dt{font-weight:700;margin-bottom:5px;}
.submenu .listbox dd{float:left;width:125px;height:27px;line-height:27px;}
.submenu .listbox dd a{display:inline;background:none;border:0 none;color:#000;}
.submenu .listbox dd a:hover{color:#f60;text-decoration:underline;}
.submenu .listbox .hotbrand{width:107px;border:0 none;background:#FFFDF3;border-left:1px dashed #ECD988;}

.submenu .pt2{padding-top:2px;}
.submenu .submenulist li.auto{height:auto;background:#fff;border-bottom:1px solid #fff;}
.submenu .submenulist h2{width:186px;color:#000;text-indent:15px;}
.submenu .submenulist li.auto h4 a{display:block;height:24px;line-height:24px;font-weight:400;font-size:13px;color:#333;}
.submenu .submenulist li.auto h4 a:hover{color:#f60;}
.submenu .submenulist li.auto .sublist{padding:10px 0;}

js



function subindexMenu(){
$("#js-menu").find("li").hover(function(){
$(this).css("z-index","9999");
$(this).find("h3 a").addClass("on");
$(this).find(".listbox").show();
},function(){
$(this).removeAttr("style");
$(this).find("h3 a").removeClass("on");
$(this).find(".listbox").hide();
});
}
$(function(){
subindexMenu();
})


html

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>电子商务网站常用左侧导航菜单二级横向弹出导航效果</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/97zzw.js"></script>
</head>
<body>
<div id="page">
<div id="container" class="content clearfix">
<!---->
<div class="sn-subside">
<div class="submenu mb10">
<h2>浮生</h2>
<div id="js-menu" class="submenulist">
<ul>
<li>


<h3><a href="http://www.97zzw.com/jscode">手机</a></h3>
<div class="listbox hide">
<dl class="procate">
<dt>商品分类</dt>
<dd><a href="">GSM手机</a></dd>
<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">商品类别八个字符</a></dd>


<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">GSM手机</a></dd>
<dd><a href="">CDMA手机</a></dd>
<dd><a href="">GSM手机</a></dd>
</dl>
<dl class="hotbrand">
<dt>热门品牌</dt>


<dd><a href="">松下</a></dd>
<dd><a href="">索尼</a></dd>
<dd><a href="">佳能</a></dd>
<dd><a href="">富士</a></dd>
<dd><a href="">三星相机</a></dd>
<dd><a href="">飞利浦</a></dd>


</dl>
</div>
</li>
<li>
<h3><a href="">音频配件</a></h3>
<div class="listbox hide">
<dl class="procate">
<dt>商品分类</dt>


<dd><a href="">音响</a></dd>
<dd><a href="">耳机</a></dd>
<dd><a href="">摄像头</a></dd>
<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">GSM手机</a></dd>
<dd><a href="">CDMA手机</a></dd>


<dd><a href="">GSM手机</a></dd>
</dl>
<dl class="hotbrand">
<dt>热门品牌</dt>
<dd><a href="">松下</a></dd>
<dd><a href="">索尼</a></dd>
<dd><a href="">佳能</a></dd>


<dd><a href="">富士</a></dd>
<dd><a href="">三星相机</a></dd>
<dd><a href="">飞利浦</a></dd>
</dl>
</div>
</li>
<li>


<h3><a href="">充电配件</a></h3>
<div class="listbox hide">
<dl class="procate">
<dt>商品分类</dt>
<dd><a href="">充电器</a></dd>
<dd><a href="">数据线</a></dd>
<dd><a href="">商品类别八个字符</a></dd>


<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">GSM手机</a></dd>
<dd><a href="">CDMA手机</a></dd>
<dd><a href="">GSM手机</a></dd>
</dl>
<dl class="hotbrand">


<dt>热门品牌</dt>
<dd><a href="">松下</a></dd>
<dd><a href="">索尼</a></dd>
<dd><a href="">佳能</a></dd>
<dd><a href="">富士</a></dd>
<dd><a href="">三星相机</a></dd>


<dd><a href="">飞利浦</a></dd>
</dl>
</div>
</li>
<li>
<h3><a href="">数据配件</a></h3>
<div class="listbox hide">
<dl class="procate">


<dt>商品分类</dt>
<dd><a href="">GSM手机</a></dd>
<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">GSM手机</a></dd>


<dd><a href="">CDMA手机</a></dd>
<dd><a href="">GSM手机</a></dd>
</dl>
<dl class="hotbrand">
<dt>热门品牌</dt>
<dd><a href="">松下</a></dd>
<dd><a href="">索尼</a></dd>


<dd><a href="">佳能</a></dd>
<dd><a href="">富士</a></dd>
<dd><a href="">三星相机</a></dd>
<dd><a href="">飞利浦</a></dd>
</dl>
</div>
</li>


<li>
<h3><a href="">手机饰品</a></h3>
<div class="listbox hide">
<dl class="procate">
<dt>商品分类</dt>
<dd><a href="">GSM手机</a></dd>
<dd><a href="">商品类别八个字符</a></dd>


<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">GSM手机</a></dd>
<dd><a href="">CDMA手机</a></dd>
<dd><a href="">GSM手机</a></dd>
</dl>


<dl class="hotbrand">
<dt>热门品牌</dt>
<dd><a href="">松下</a></dd>
<dd><a href="">索尼</a></dd>
<dd><a href="">佳能</a></dd>
<dd><a href="">富士</a></dd>


<dd><a href="">三星相机</a></dd>
<dd><a href="">飞利浦</a></dd>
</dl>
</div>
</li>
<li>
<h3><a href="">车载配件</a></h3>


<div class="listbox hide">
<dl class="procate">
<dt>商品分类</dt>
<dd><a href="">GSM手机</a></dd>
<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">商品类别八个字符</a></dd>


<dd><a href="">GSM手机</a></dd>
<dd><a href="">CDMA手机</a></dd>
<dd><a href="">GSM手机</a></dd>
</dl>

<dl class="hotbrand">
<dt>热门品牌</dt>
<dd><a href="">松下</a></dd>


<dd><a href="">索尼</a></dd>
<dd><a href="">佳能</a></dd>
<dd><a href="">富士</a></dd>
<dd><a href="">三星相机</a></dd>
<dd><a href="">飞利浦</a></dd>
</dl>


</div>
</li>
<li>
<h3><a href="">苹果专区</a></h3>
<div class="listbox hide">
<dl class="procate">
<dt>商品分类</dt>
<dd><a href="">GSM手机</a></dd>


<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">商品类别八个字符</a></dd>
<dd><a href="">GSM手机</a></dd>
<dd><a href="">CDMA手机</a></dd>
<dd><a href="">GSM手机</a></dd>


</dl>
<dl class="hotbrand">
<dt>热门品牌</dt>
<dd><a href="">松下</a></dd>
<dd><a href="">索尼</a></dd>
<dd><a href="">佳能</a></dd>
<dd><a href="">富士</a></dd>


<dd><a href="">三星相机</a></dd>
<dd><a href="">飞利浦</a></dd>
</dl>
</div>
</li>
</ul>
</div>
</div>


</div>
  </div>   
</div>
      
</body>
</html>


浮生飘血
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
商城头部鼠标移入显示菜单选项 【jquery】
彭亮设计工作室
01-28 233
//让菜单切换为显示 $(function() { var obj_li_topa = $('.menu ul li a'), show_li_ul = $('.top_menu_show'); obj_li_topa.parents('li').css({ "position": "relative", }); //菜单样式 show_li_ul.css({ "
商城导航栏，多级菜单，鼠标移动即显示子菜单
04-07
"商城导航栏，多级菜单，鼠标移动即显示子菜单"这个标题所描述的功能，是电子商务网站中常见的交互设计，它为用户提供清晰的分类浏览路径，方便他们快速找到所需的商品或服务。这种设计常见于"二手网"类网站，如当当...
js 实例1 实现购物车鼠标移动显示功能框；
weixin_30875157的博客
05-30 392
实现效果如下； 思路：个人思路是两个小盒子（box1，box2）放在一个大盒子内。 　　重点是如何实现两个盒子的区分，在鼠标上移到box1的时候，box1下边框能够隐藏。　　 　　通过实现z-index的大小，来决定box1有一部分是遮盖box2的,这样通过js鼠标移动事件 来将box1的border-bottom=0； 具体实现过程： 这种做法是实现box2 不和box1...
elementUI+vue实现商城分类导航弹出二级菜单悬浮展示（鼠标经过时显示）
qq_32886245的博客
03-09 6548
效果 二级菜单显示是用了elementUI的两个组件：el-tooltip + el-cascader-panel vue代码 <!-- 分类 --> <div class="category-box"> <span class="category-label">分类</span> <div class="flex-1"> <div class="category-list">
仿京东首页商品分类底部色标随鼠标移动特效
dcof99817的博客
04-24 215
今天扒皮下京东商品展示区的一个特效： 大家可以自行去京东看下特效，下面是这个特效的动态图（这次聪明的我懂得给图加水印了） 理下思路，每个分类选项卡宽度一致，且有一条灰色底边，然后默认有一条红色的色标让它漂浮在首个选项卡上面（其中的小三角形可以自己做个图），默认首个选项卡的文本（像上图是“AAA”）为红色，其它选项卡的为灰色。默认除第一个选项卡对应的下方的内容...
jQuery购物商城导航下拉菜单
11-19
在构建Web应用时，尤其是电子商务平台，用户友好的界面设计是至关重要的，其中导航菜单扮演着引导用户浏览网站的关键角色。"jQuery购物商城导航下拉菜单"是一个专门针对这一需求的技术实现，它利用jQuery库的强大...
基于jQuery实现的购物商城导航下拉菜单触发特效源码.zip
11-10
本项目“基于jQuery实现的购物商城导航下拉菜单触发特效源码”聚焦于利用jQuery来创建具有动态效果的购物商城导航菜单。这种功能对于提升用户体验，尤其是对移动设备用户来说，至关重要，因为它可以高效地展示大量的...
马可波罗产品分类导航菜单
05-01
"马可波罗产品分类导航菜单"就是专为B2B（Business-to-Business）商城和分类信息网站设计的一款二级分类菜单，它旨在提供清晰、直观的产品导航体验。这种导航菜单的目的是使用户能够轻松地浏览和查找所需的商品或...
jquery红色商城导航下拉菜单.zip
11-21
在网页设计中，导航菜单是不可或缺的部分，它为用户提供了一种简洁、直观的途径来访问网站的各个部分。特别是对于电商平台，一个美观且功能完善的导航菜单能提升用户体验，增强用户粘性。本篇文章将深入探讨如何使用...
纯css弹出导航，仿京东商城商品导航效果
11-02
纯css弹出导航，仿京东商城商品导航效果。超酷的css弹出式菜单
前端案例 - 导航条菜单的制作
Aelous_dp的博客
07-23 1478
每个网站都包含导航条菜单，在此做一些 HTML 和 CSS 基础回顾。 本文主要跟随课程完成导航栏菜单的制作，课程来源 imooc导航条菜单的制作。 推荐学习前端的朋友可以看看，简简单单一个小课程，对于刚有前端基础的人来说很友好，整体清晰易懂，逻辑通顺，后期稍微涉及一丢丢 JS，很不错。 垂直菜单栏 导航菜单用什么元素制作呢，通过之前学习的网页设计结构表现原则我们可以得知,导航目录条目性的语义 与 无序列表 非常接近，所以选用无序列表。 垂直菜单栏的整体结构如下: HTML 代码： <body&gt
CSS自定义三级菜单下拉框
qq_38810813的博客
09-08 429
CSS部分 /*分类样式*/ /* 清楚浮动，使div盒子能被撑起来 */ .clearfix:after { content: ""; display: block; height: 0; visibility: hidden; overflow: hidden; clear: both; } .menu { /*position: relative;*/ margin-left: 8%; } /* 每一个li标签的
html给图片加个放大效果鼠标经过,网页制作-如何在制作鼠标经过时图片放大效果...
weixin_39566493的博客
06-09 3178
在网页上制作图片的时候都会用到特效，当鼠标经过图片时，可以使图片变大，其实在一些网上购物平台上，我们可以看到，当鼠标放在商品上时，商品的图片可能会变大，或者变成商品的其他角度的图片，这其实就是中的特效了，那么网页制作-如何在制作鼠标经过时图片放大效果大家了解吗?下面就跟着爱站技术频道小编的步伐来了解一下吧!如何制作鼠标经过时图片放大效果打开dw，先修改一下页面属性，将页面修改为灰色的，适合图片展示...
导航栏菜单实现鼠标移入移出中英文切换的两种方法（css3和jQuery）
冰雪为融的博客
05-24 2700
上代码前先说一下一个需要注意的点我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局，但是如果外面这个大容器的没有设置固定的高度值，那么大容器高度不会随着里面小容器高度变化而变化，产生内容溢出的现象，这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，（但是IE6下不生效）实现法一：HTML代码：&...
使用Axure RP实现页面跳转、弹窗显示、单选按钮、下拉框以及图片插入
热门推荐
爱吃鸡腿的明仔
07-24 1万+
前言：Axure RP 能帮助网站需求设计者，快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。 最近使用到Axure来做产品原型图，今天来总结一下Axure的几种常用的操作： 文章目录一。页面跳转二。弹窗显示三。单选按钮四。下拉框五。图片插入 一。页面跳转 1.点击“+”新建一个页面： 2.选择你需要添加的控件，鼠标左键拖入到页面中： 3.选中该控件，找到Interactions属性，点击New Interact
rp原型中鼠标悬停显示图片_悬停状态原型4种方式
weixin_26715991的博客
09-15 1402
rp原型中鼠标悬停显示图片There are tons of options available for UX designers to prototype a user experience and you may not know what are the pros and cons of each tool just yet. The main goal of this post is to...
xiaoshuo-1721215737506.apk
最新发布
07-17
xiaoshuo-1721215737506.apk

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值