仿淘宝网站的导航标签效果

最新推荐文章于 2024-09-18 15:54:57 发布
最新推荐文章于 2024-09-18 15:54:57 发布
阅读量647 收藏
点赞数
分类专栏： JS 文章标签： class menu javascript div url float

http://www.111cn.net/js_a/76/680e78e63236469880fc20d91da7fd5e.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>中国站长天空-网页特效-导航菜单-非常漂亮的二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
<!--
/*全局样式*/
*{
font-size:12px;
}
body{
margin:0;
padding:0;
background-color:#FFFFFF;
font-size:12px;
color:#666666;
font-family: "宋体",Arial, Helvetica, sans-serif;
}
/*主导航菜单*/
#menu ul{
padding:0;
border:0;
list-style:none;
line-height:150%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 15px;
}
#menu_out{
width:966px;
padding-left:4px;
margin-left:auto;
margin-right:auto;
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_left.gif) no-repeat left top;
}
#menu_in{
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_right.gif) no-repeat right top;
padding-right:4px;
}
#menu{
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_bg.gif) repeat-x;
height:73px;
}
.menu_line{
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_line.gif) no-repeat center top;
width:8px;
}
.menu_line2{
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_line2.gif) no-repeat center top;
width:15px;
}
#nav{
padding-left:20px;
}
#nav li{
float:left;
height:35px;
}
#nav li a{
float:left;
display:block;
padding-left:6px;
height:35px;
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_on_left.gif) no-repeat left top;
cursor:pointer;
text-decoration:none;
}
#nav li a span{
float:left;
padding:11px 14px 10px 10px;
line-height:14px;
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_on_right.gif) no-repeat right top;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}
#nav li .nav_on{/*鼠标经过时变换背景，方便JS获取样式*/
background-position:left 100%;
}
#nav li .nav_on span{/*鼠标经过时变换背景，方便JS获取样式*/
background-position:right 100%;
color:#333333;
text-decoration:none;
padding:14px 14px 7px 10px;
}
/*子栏目*/
#menu_con{
text-align:left;
padding-left:20px;
clear:both;
}
#menu_con li{
float:left;
height:22px;
margin-top:8px;
}
#menu_con li a{
display:block;
float:left;
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_on_left2.gif) no-repeat left top;
cursor:pointer;
padding-left:3px;
}
#menu_con li a span{
float:left;
padding:6px 10px 4px 10px;
line-height:12px;
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_on_right2.gif) no-repeat right top;
}
#menu_con li a:hover{
text-decoration:none;
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_on_left2.gif) no-repeat left bottom;
}
#menu_con li a:hover span{
background:url(http://www.zzsky.cn/effect/images/200904201650/menu_on_right2.gif) no-repeat right bottom;
}
#a{
width:970px;
font-size:14px;
text-align:center;
color:#000000;
margin-right:auto;
margin-left:auto;
margin-top:0px;
margin-bottom:0px;
}
-->
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<script language="javascript">
function qiehuan(num){
for(var id = 0;id<=9;id++)
{
if(id==num)
{
document.getElementById("qh_con"+id).style.display="block";
document.getElementById("mynav"+id).className="nav_on";
}
else
{
document.getElementById("qh_con"+id).style.display="none";
document.getElementById("mynav"+id).className="";
}
}
}
</script> 
<div id="menu_out">
  <div id="menu_in">
    <div id="menu">
      <ul id="nav">
        <li><a class="nav_on" id="mynav0" οnmοuseοver="javascript:qiehuan(0)" href="/"><span>首 页</span></a></li>
        <li class="menu_line"></li>
        <li><a href="#" οnmοuseοver="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>AAAAAA</span></a></li>
        <li class="menu_line"></li>
        <li><a href="#" οnmοuseοver="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>BBBBBB</span></a></li>
        <li class="menu_line"></li>
        <li><a href="#" οnmοuseοver="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>CCCCCC</span></a></li>
        <li class="menu_line"></li>
        <li><a href="#" οnmοuseοver="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>DDDDDD</span></a></li>
        <li class="menu_line"></li>
        <li><a href="#" οnmοuseοver="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>EEEEEE</span></a></li>
        <li class="menu_line"></li>
        <li><a href="#" οnmοuseοver="javascript:qiehuan(6)" id="mynav6" class="nav_off"><span>FFFFFF</span></a></li>
        <li class="menu_line"></li>
        <li><a href="#" οnmοuseοver="javascript:qiehuan(7)" id="mynav7" class="nav_off"><span>GGGGGG</span></a></li>
        <li class="menu_line"></li> 
        <li><a class="nav_off" id="mynav8" οnmοuseοver="javascript:qiehuan(8)" href="#"><span>HHHHHH</span></a></li>
        <li class="menu_line"></li>
        <li><a class="nav_off" id="mynav9" οnmοuseοver="javascript:qiehuan(9)" href="#" target="_blank"><span>IIIIII</span></a></li>
        <li class="menu_line"></li>
      </ul>
      <div id="menu_con"><div id="qh_con0" style="display:block">
        <ul>
          <li><a href="http://www.zzsky.cn"><span>中国站长天空</span></a></li>
          <li class="menu_line2"></li>
          <li><a href="http://www.colacat.cn"><span>可乐猫</span></a></li>
        </ul>
      </div> 
      <div id="qh_con1" style="display:none">
        <ul>
          <li><a href="#"><span>A1</span></a></li>
          <li class="menu_line2"></li>
          <li><a href="#"><span>A2</span></a></li>
        </ul>
      </div> 
      <div id="qh_con2" style="display:none">
        <ul>
          <li><a href="#"><span>B1</span></a></li>
          <li class="menu_line2"></li>
          <li><a href="#"><span>B2</span></a></li>
        </ul>
      </div> 
      <div id="qh_con3" style="display:none">
        <ul>
          <li><a href="#"><span>C1</span></a></li>
          <li class="menu_line2"></li>
          <li><a href="#"><span>C2</span></a></li>
        </ul>
      </div> 
      <div id="qh_con4" style="display:none">
        <ul>
          <li><a href="#"><span>D1</span></a></li>
          <li class="menu_line2"></li>
          <li><a href="#"><span>D2</span></a></li>
        </ul>
      </div> 
      <div id="qh_con5" style="display:none">
        <ul>
          <li><a href="#"><span>E1</span></a></li>
          <li class="menu_line2"></li>
          <li><a href="#"><span>E2</span></a></li>
        </ul>
      </div> 
      <div id="qh_con6" style="display:none">
        <ul>
          <li><a href="#"><span>F1</span></a></li>
          <li class="menu_line2"></li>
          <li><a href="#"><span>F2</span></a></li>
        </ul>
      </div> 
      <div id="qh_con7" style="display:none">
        <ul>
          <li><a href="#"><span>G1</span></a></li>
          <li class="menu_line2"></li>
          <li><a href="#"><span>G2</span></a></li>
        </ul>
      </div> 
      <div id="qh_con8" style="display:none">
        <ul>
          <li><a href="#"><span>H1</span></a></li>
          <li class="menu_line2"></li>
          <li><a href="#"><span>H2</span></a></li>
        </ul>
      </div>
      <div id="qh_con9" style="display:none">
        <ul>
          <li><a href="#"><span>I1</span></a></li>
          <li class="menu_line2"></li>
          <li><a href="#"><span>I2</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
</html>



lanchengxiaoxiao
关注
专栏目录
仿淘宝右侧tab栏切换
web_qdkf的博客
11-17 934
tab切换 body,  ul { margin: 0; padding: 0; font-family: "microsoft yahei"; } ul,  li { list-style: none; } a { text-decoration: none; } .tabBox { position: absolute; width: 300px; height: 100px; b
最简单的小型商城实现：Serlvet+Jsp经典案例
所谓伊人，在水一方
04-26 9424
后台代码 管理员和客户两种基本角色各自一个Servlet解决： 客户servlet：ClientServlet public class ClientServlet extends HttpServlet { private BusinessService bs = new BusinessServiceImpl(); public void doGet(HttpSe
HTML+CSS 仿淘宝静态首页
热门推荐
小柒的前端之旅
03-19 1万+
学完HTML和CSS需要有一个好的练习，仿淘宝等首页都是一个不错的练习方法，目前处于学习原生js阶段，学html+css时没有做一个像样的项目，现在边学js边将前面的基础部分打牢。 里面很多地方可以用js写，轮播图这一块以及有些ul里面的li需要动态创建 之后都会进行修改。 html部分 <!DOCTYPE html> <html lang="en"> <head&g...
Android仿淘宝底部图标导航栏
hfut_why的博客
10-03 8328
在上一篇中，简单的使用透明主题的Activity实现了仿微信右侧顶部的对话框，上午又花了两个小时研究了一下淘宝底部的导航栏实现，网上的做法也有很多，今天我就使用一种通过基本控件加上布局的方式，没有任何的自定义风格，控件等来实现，还是老样子，先看一下效果图： 下面就来具体看一看如何实现的，还是按照步骤来吧： 绘制主界面 activity_layout.xml代码如下： &l...
安卓仿淘宝导航栏实现
weixin_43641093的博客
05-01 2476
RadioButton+Fragment仿淘宝导航栏 效果图 主布局xml文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_paren...
仿淘宝网站的导航标签效果！
weixin_30872157的博客
01-30 86
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt...
【vue】仿淘宝商品详情---实现滚动显隐标签页&锚点导航
一位前行者的博客
11-08 1913
封装成组件复用的话，首先快捷键的每一项数据需要父组件传入；在父组件定义一个数组作为右侧导航栏的数据；由于左侧区域的某一块内容没有数据时，其对应的导航项不显示； 要给每一块的内容最外层绑定ref，是为了获取该dom元素，通过点击导航栏某一项时，让页面可以滚动到对应的元素内容； 导航在抽屉里做的，给最外层绑定ref=“drawer”，可以获取到当前页面最外层的dom元素，根据最外层容器的dom元素来获取滚动高度； 组件要接收导航栏数据、接收当前是否是抽屉(默认为抽屉，传false为普通正常页...
仿淘宝 纵向滚动式 定位 导航栏
编者微尘
09-27 1280
效果图如下：欢迎拍砖（照片）
uniapp仿淘宝购物车demo
空&白的博客
05-11 841
项目是基于uview2.0的ui组件，并且在一定程度上修改过原本组件的代码（app-navbar是使用u-navbar在进行二次封装的组件；u-number-box也进行了修改），符合项目需求（这个看个人项目需求在进行修改） u-number-box有点难用的地方，加减有时候不能很及时的回应合计的数量，导致总价对不上，所以我开启了asyncChange（是否开启异步变更，开启后需要手动控制输入值）。 u-number-box一些改动到的地方 this.$emit(type) 改成 this.$emit(ty
仿淘宝网站的导航效果插件 for 帝国CMS.rar
07-14
【标题】"仿淘宝网站的导航效果插件 for 帝国CMS.rar"是一个专为帝国CMS设计的程序插件，旨在实现与淘宝网站类似的导航菜单效果。在帝国CMS这样的内容管理系统中，导航栏是网站架构的重要组成部分，它帮助用户快速...
jQuery实战之仿淘宝商城左侧导航效果
10-28
在此案例中，我们将探讨如何使用jQuery来实现一个仿淘宝商城左侧导航效果。 首先，从描述中我们可以看到，相比于传统的JavaScript实现，jQuery提供了更为简便和强大的方法来实现相同的页面效果。这一点体现在对DOM...
仿淘宝网首页导航条效果.rar
07-04
本示例“仿淘宝网首页导航条效果”旨在重现淘宝网首页的导航菜单样式和交互，利用JavaScript（JS）实现动态特效，提升用户体验。在这个项目中，我们将探讨以下几个关键知识点： 1. **HTML 结构**： - 导航条通常由...
仿淘宝首页分类列表效果实现代码
09-06
在本文中，我们将详细探讨如何实现仿淘宝首页的分类列表效果。这个效果通常用于电商平台，以便用户能够方便地浏览和筛选商品。我们将分析给出的HTML和CSS代码，并解释其背后的逻辑。 首先，从HTML结构来看，有一个`...
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 677
【代码】【JavaScript】LeetCode：707设计链表。
RedisTemplate混用带来的序列化问题
最新发布
咖啡煮码
09-18 440
RedisTemplate 不要乱用哦，否则极易出现序列化问题
JS的输出语句
J3259392566的博客
09-13 309
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 667
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值