CSS+JS三级滑动菜单

最新推荐文章于 2018-05-09 21:37:39 发布
最新推荐文章于 2018-05-09 21:37:39 发布
阅读量193 收藏
点赞数
分类专栏： JavaScript 文章标签： CSS Ajax CMS ASP PHP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/literaryfly/article/details/83837815
版权
<html>
<head>
<title>三级菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #053553;
}
#menu {
background-color: #FEF0E5;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#FEF0E5', gradientType='0');
}
#nav, #nav ul {
float:left;
clear:right;
list-style:none;
padding:0px;
margin:0px;

}
#nav ul ul{
border-top:0px;
border-right:0px;
}
#nav a {
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
padding: 3px 4px 3px 7px;
}
#nav a:hover{
color:#000;
margin: 0px;
padding: 2px 5px 2px 6px;
background-color: #f1f1f1;
text-decoration: none;
}
#nav a.selected{background:url() no-repeat right 50%;}
#nav li {
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul li{
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul {
position:absolute;
margin:-21px 0px 0px 119px;
padding:0;
left:-9999em;
width:120px;
font-weight:normal;
display:block;
border:1px solid #CCCCCC;
background:#fff;
}

#nav li ul a {
width:120px;
text-align:left;
margin: 0px;
}
#nav li ul ul {
margin:-21px 0px 0px 119px;
border:1px solid #CCC;
}
#nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}
#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
left:auto;
height:22px;
}
#nav li:hover, #nav li.sfhover {
background:#f1f1f1;
border:1px solid #CCC;
height:22px;
}
/* 悬浮样式 */
-->
</style>
<script type="text/javascript">
img1=new Image();
img1.src="";
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].οnmοuseοver=function() {
this.className+=" sfhover";
}
sfEls[i].οnmοuseοut=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
window.οnlοad=sfHover;
</script>
</head>
<body>
<table width="120" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" id="menu">
<ul id="nav">
<li><a href="#" target="_blank">网站首页</a></li>
<li><a href="#" target="_blank" class="selected">源码下载</a>
<ul>
<li><a href="#" class="selected">ASP源码</a>
<ul>
<li><a href="/sort/list_1_11_1.shtml">聊天留言</a></li><li><a href="/sort/list_1_12_1.shtml">企业建站</a></li><li><a href="/sort/list_1_13_1.shtml">论坛社区</a></li><li><a href="/sort/list_1_14_1.shtml">新闻文章</a></li>
</ul>
</li>
<li ><a href="#" class="selected">PHP源码</a>
<ul>
<li><a href="/sort/list_1_145_1.shtml">博客日记</a></li><li><a href="/sort/list_1_29_1.shtml">CMS系统</a></li><li><a href="/sort/list_1_20_1.shtml">学校政府</a></li><li><a href="/sort/list_1_28_1.shtml">影音视频</a></li>
</ul>
</li>
<li ><a href="#" class="selected">JAVA源码</a>
<ul>
<li><a href="/sort/list_1_87_1.shtml">Ajax相关</a></li><li><a href="/sort/list_1_33_1.shtml">综合其它</a></li>
</ul>
</li>
<li><a href="#">其它下载</a></li>
</ul>
</li>
<li><a href="#" target="_blank" class="selected">最新服务</a>
<ul>
<li><a href="#" class="selected">最新更新</a></li>
<ul>
<li><a href="/sort/list_1_25_1.shtml">办公管理</a></li><li><a href="/sort/list_1_31_1.shtml">小偷采集</a></li><li><a href="/sort/list_1_26_1.shtml">整站程序</a></li><li><a href="/sort/list_1_16_1.shtml">统计调查</a></li><li><a href="/sort/list_1_197_1.shtml">广告网赚</a></li><li>
</ul>
<li><a href="/other/top100.shtml">下载排行</a></li>
<li><a href="/service/ad.shtml">广告服务</a></li>
</ul>
</li>
<li><a href="/">菜单示例</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
literaryfly
关注
专栏目录
js可折叠商品类别动态三级滑动菜单
yibingde的专栏
07-29 1027
js商品类别
jQuery三级滑动菜单
11-17
自己写的一个基于JQuery库的三级滑动菜单！样式可自改！不喜勿喷！不喜勿下！大神们你们就飘过吧。
三级侧滑菜单
丑丑鱼的博客
04-06 2308
侧滑菜单仿照阿里巴巴国际版的菜单,做的时候老是动画很卡,最近被一个同事搞出来,主要是用到了viewDragHelper这个类,具体可以看部分代码package com.csc_app.view;import android.content.Context; import android.content.res.Resources; import android.support.v4.view.Vie
三级菜单：有滚动跳转和选择展示相应内容
liona_koukou的博客
08-15 845
效果图如下：（此菜单可以应用于电商种类选择页面，此处是仿优车诚品官网首页） 代码如下，可直接复制粘贴查看效果   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
CSS+JS选项卡式导航菜单
03-18
**标题：“CSS+JS选项卡式导航菜单”** 在网页设计中，选项卡式导航菜单是一种常见的用户界面元素，它允许用户在多个相关但独立的内容区域之间切换，而无需加载新的页面。这种设计模式提高了用户体验，因为它使得...
8套精美的html+css+js网站模板、网页设计源码
06-22
在这些模板中，JavaScript可能被用来实现诸如下拉菜单、滑动效果、轮播图等功能，提升用户体验。ES6（ECMAScript 2015）的新特性，如箭头函数、模板字符串、let和const变量、解构赋值等，也使得代码更加简洁易读。 ...
NFine 快速开发框架 实现 三级滑动菜单，替换原CSS及JS文件即可
06-19
综上所述，NFine框架通过提供自定义的CSS和JS文件，使得开发者能够轻松地实现三级滑动菜单，提升用户体验。在实际项目中，可以根据需求对这些文件进行调整，以适应不同的设计风格和交互需求。通过这种方式，NFine...
CSS3二级下拉动画滑动菜单特效代码
03-20
"CSS3二级下拉动画滑动菜单特效代码"就是利用CSS3特性实现的一种交互式菜单设计，它使得网页的导航结构更加生动有趣。此特效主要包含以下几个关键知识点： 1. **CSS3选择器**：为了精确地控制每个菜单项的样式，CSS...
小程序：三级菜单
happyuu的博客
05-09 2418
程序: 三级菜单要求: 打印省、市、县三级菜单可返回上一级可随时退出程序menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, ...
Js开发多级滑动菜单
02-22
使用JS开发多级滑动菜单样例，大家感兴趣可以看看。
JS三级联动不间断滚动
03-06
JS三级联动不间断滚动
js+css绚丽动态滑动menu菜单（原创）
04-09
欢迎使用本menu 使用说明： 1 添加删除menu项目时，首先，在html页面中添加menu内容，其次，必须要在js文件中最上面添加删除“time”和“link”对象声明，最后要在html页面的开头添加删除初始化项目“initialCssDiv(no)”。有几行menu项目，就要声明几对“time”和“link”对象和初始化几次。time对象是针对此行menu项目的控制对象，link对象则是需要跳转的url对象。 2 images文件夹中带有3套样式图片，只需要在css文件中对引用的图片名进行替换就可以更新样式。 3 menu整体宽度也可修改，但是不建议，因为计算的参数很多，需要看懂后再更改。 4 目前只适用于IE浏览器，但是与w3c要求没有大的出入，很容易自行修改并调试。
带动画伸缩菜单可分级菜单超出后自动显示滚动条滚动条样式自定义
09-25
带动画伸缩菜单可分级菜单超出后自动显示滚动条滚动条样式自定义,带动画伸缩菜单可分级菜单超出后自动显示滚动条滚动条样式自定义
JS+CSS实现滑动切换tab菜单效果
10-23
主要介绍了JS+CSS实现滑动切换tab菜单效果,涉及javascript鼠标事件及页面元素样式的动态切换效果实现技巧,需要的朋友可以参考下
MUI仿今日头条第三集--侧滑菜单制作
张富银的专栏
06-11 7086
MUI仿今日头条第三集--侧滑菜单制作 今天我们主要来看侧滑菜单的制作 使用第二集中的打开侧滑菜单代码--打开侧滑菜单，我们参照今日头条发现，侧滑菜单的最顶部是登陆按钮。支持第三登陆以及本应用内的登陆 支持QQ、微信、微博的登陆， 一、先把CSS和html效果做出来 Hello MUI
纯css制作三级下拉菜单
热门推荐
web_xiaolei的博客
10-12 1万+
css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是本人用纯css制作的三级下拉菜单效果：思路很简单，三级菜单直接用三层嵌套的ul布局： 电器
JS+CSS实现经典的左侧竖向滑动菜单效果
10-23
主要介绍了JS+CSS实现经典的左侧竖向滑动菜单效果,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
掌握CSS+JS编写技巧，提升网页设计效率
知识点三：CSS与JavaScript的结合使用 CSS和JavaScript可以协同工作来实现更丰富的网页功能和更好的用户体验。以下是一些常见的结合方式： 1. 动态样式：JavaScript可以动态修改CSS属性，使元素根据用户交互或其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值