二级动态导航菜单特效

最新推荐文章于 2022-04-25 16:28:02 发布
最新推荐文章于 2022-04-25 16:28:02 发布
阅读量123 收藏
点赞数
文章标签： F# JavaScript XHTML HTML ViewUI
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<style>
BODY{
FONT-SIZE:12px;MARGIN:0px;BACKGROUND-COLOR:#131d30
}
A:link{
COLOR:#7ea9bf;TEXT-DECORATION:none
}
A:visited{
COLOR:#7ea9bf;TEXT-DECORATION:none
}
A:hover{
COLOR:#ffffff;TEXT-DECORATION:underline
}
A:active{
COLOR:#ffffff;TEXT-DECORATION:none
}
.Defautl-Navigation{
FONT-SIZE:12px;FLOAT:left;COLOR:#7ea9bf;LINE-HEIGHT:23px;HEIGHT:23px;TEXT-ALIGN:center
}
</style>
<SCRIPTlanguage=javascript>
varf=0;
vary=0;
vardiv_obj
functionover(obj){
div_obj=obj
_f=0;
y=0;
document.getElementById(obj).innerHTML="";
document.getElementById(obj).style.width="0px";
document.getElementById(obj).style.height="1px";
document.getElementById(obj).style.display="";
timerDIV();
}
functionout(obj){
obj.style.display="none";
}
functionTout(){
document.getElementById(div_obj).style.display="none";
}
functionTover(){
document.getElementById(div_obj).style.display="";
}
functiontimerDIV(){
if(_f>=140){/*宽度*/
objy();
return;
}
else{
_f=_f+10;
document.getElementById(div_obj).style.width=_f+"px";
window.setTimeout(timerDIV,1);
}
}
functionobjy(){
if(y>=150){/*高度*/
varstr="<divstyle=\"width:150px;height:auto;float:left;font-size:12px;margin:6px;line-height:20px\"><ahref=\"http://www.showwho.com\">新闻-1</a><br/><fontstyle=\"color:#7EA9BF;font-size:11px;\">&#9830;</font><ahref=\"http://www.showwho.com\"style=\"font-size:11px;\">新闻-1-1</a><br/><fontstyle=\"color:#7EA9BF;font-size:11px;\">&#9830;</font><ahref=\"http://www.showwho.com\"style=\"font-size:11px\">新闻-1-2</a><br/><fontstyle=\"color:#7EA9BF;font-size:11px;\">&#9830;</font><ahref=\"http://www.showwho.com\"style=\"font-size:11px\">新闻-1-3</a><br/><ahref=\"http://www.showwho.com\">新闻-2</a><br/><ahref=\"http://www.showwho.com\">新闻-3</a><br/><\/div>";
document.getElementById(div_obj).innerHTML=str
return;
}
else{
y+=6;
document.getElementById(div_obj).style.height=y+"px";
window.setTimeout(objy,1);
}
}
</SCRIPT>
<title>JS导航效果</title>
</HEAD>
<BODY>
<DIVclass=Default-top>
<DIVstyle="BORDER:#51789b1pxsolid;width:500px;HEIGHT:23px;margin:20pxauto;position:relative;">
<DIVclass=Defautl-Navigationstyle="WIDTH:60px"><Ahref="#">首页</A></DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:10px">|</DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:70px;CURSOR:pointer"><A
onMouseOver="over('two')"οnmοuseοut=out(two)href="#">新闻&#8711;</A>
</DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:10px">|</DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:80px"><Ahref="#">
联系我们</A></DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:10px">|</DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:50px"><Ahref="#">
其他</A></DIV>
<DIVid=twostyle="overflow:hidden;BORDER:#51789b2pxsolid;DISPLAY:none;FILTER:alpha(Opacity=70);LEFT:300px;FLOAT:left;WIDTH:1px;POSITION:absolute;TOP:14px;left:80px;HEIGHT:1px;BACKGROUND-COLOR:#444;-moz-opacity:0.7"
οnmοusemοve=Tover()οnmοuseοut=Tout()>NoContent
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
iteye_6481
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
各类动态导航条、二级导航条
06-08
div+css布局导航条示例代码、动态加载导航条，二级、三级导航，各类样式
动态生成二级导航菜单
weixin_34336526的博客
11-21 452
根据得到的json数据动态生成二级导航菜单 jsp:页面 <%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme(...
css 动态的二级导航
qing_xing_的博客
04-25 533
1650873759719 一个简单的动态二级导航，主要实现功能，页面比较简陋，各位按照自己的需要加上背景颜色就可以了。 1、html部分 <ul> <li> <a href="">首页</a> <div> <a href="">首页</a> <a href="">首页&lt
AXURE登录页面+系统左侧二级动态菜单+web主页框架原型
08-26
登录账号admin,密码admin。 包含登录，注册，忘记密码，修改用户信息，主页面支持左侧二级菜单联动。
国外网站扒下来的二级动态导航菜单特效特效代码
03-20
国外网站扒下来的二级动态导航菜单特效.rar
07-04
国外网站扒下来的二级动态导航菜单特效
js仿阿里云二级下拉导航菜单特效.rar
06-23
js仿阿里云二级下拉导航菜单特效.rar js仿阿里云二级下拉导航菜单特效.rar js仿阿里云二级下拉导航菜单特效.rar js仿阿里云二级下拉导航菜单特效.rar js仿阿里云二级下拉导航菜单特效.rar js仿阿里云二级下拉导航...
js仿阿里云二级下拉导航菜单特效
06-05
本教程将深入探讨如何使用JavaScript实现一个仿阿里云的二级下拉导航菜单特效，旨在提供一个蓝色风格、实用且高效的解决方案。 首先，让我们从HTML结构开始。`index.html`文件通常会包含一个`<nav>`元素，用于定义...
js仿阿里云二级下拉导航菜单特效.zip
07-11
本项目“js仿阿里云二级下拉导航菜单特效”旨在实现一个类似阿里云官方网站的高效、美观且功能丰富的二级下拉菜单，通过JavaScript技术来增强用户体验。 一、JavaScript基础 JavaScript是一种广泛应用于网页开发的...
纯CSS二级导航菜单
12-21
此源码内容为纯css打造绿色横向二级导航菜单代码，去IE6的BUG
vuek框架结构设计及左侧菜单右侧内容显示
08-16
环境配置 Node 下载地址http://nodejs.cn/ 安装文件下有一个绿色的图片交node.exe 点击运行 输入node -v进行检测是否安装成功 使用vue-cli(脚手架)搭建项目 vue-cli是vue官方提供的用域搭建基于vue+webpack_es6项目的脚手架工具 在线文档：https://github.com/vuejs/vue-cli 操作： 1.npm install -g vue-cli：全局下载工具 2.vue init webpack 项目名：下载基于webpack模板项目 3.cd 项目名：进入项目目录 4.npm install :下载项目依赖的所有模块 5.npm run dev ：运行项目 6.访问项目：localhost:8080 项目目录结构 src assets:存放照片、css、js css js img components:存放组件 lib：存放模拟数据 router:配置路由 store:存放vuex vuex的安装：cd x项目目录 cnpm install vuex --save views:存放所有单页面 配置访问端口号： 根目录下有一个config文件夹，看名字就知道与配置有关，打开config目录下的index.js dev: { env: require('./dev.env'), port: 8092, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, } 项目目录下：https://blog.csdn.net/weixin_39378691/article/details/83784403 1.安装elementUI：cd进入项目根目录，npm i element-ui -S 2.引入elementUI组件（main.js文件中） import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element, { size: 'small' }) 项目目录下：https://blog.csdn.net/weixin_41432849/article/details/81988058 1.安装jquery：cd进入项目根目录， npm install jquery --save 2.在项目 build 里的webpack.base.conf.js 里加载webpack文件，注意，要放在配置文件第一行； const webpack = require('webpack') 3.在module.exports的最后加入 , plugins:[ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", jquery:"jquery", "window.jQuery":"jquery" }) ]
JSP+JDBC+AJAX 进行二级联动下拉菜单的动态数据绑定
jingchao1998的博客
07-28 3283
今天做了个小例子，用来通过异步来实现一个二级菜单中的数据从数据库中获取并绑定，它将数据库中的数据查询出来后添加到map对象中，通过json包将其打为json字符串返回给前台。有不足的地方请建议(#^.^#) 用到的资源有： jquery-3.3.1.min.js gson-2.2.4.jar mysql-connector-java-8.0.11.jar 因为用到了数据库，就先看一下...
【html+css】一个简单好看特效的二级导航栏
Will的博客
11-20 4958
二级导航栏使用前言1.html部分2.css部分总结 前言 或许有某些小伙伴对二级导航栏的应用不是很熟悉，使用呢以下对二级导航栏进行一个示范 1.html部分 css代码如下（示例）： <body> <ul class="nav1"> <li>一级菜单 <ul class="nav2"> <li>二级菜单</li> <
Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
life is wonderful
01-08 8723
前面几篇博文都在讲导航菜单和二级下拉式菜单，其实有很多方法都可以实现的，具体的情况还要视情况而定。 在后面学习到jQuery框架之后，会有更丰富的动画效果，由于在学习Ajax和jQuery的初步阶段，对于很多的复杂的导 航菜单和二级下拉式菜单没法做，但是学习了CSS和JS还是能实现一些简单的变换的。这篇博文就来说说用CSS实现 导航菜单结合二级下拉式菜单的两个简单变换吧。        首
【css】纯css实现二级导航菜单
weixin_42582523的博客
12-12 2171
效果： html: <div class="navbar"> <div class="nav"> <ul> <li> <a href="javascript:;">一级菜单1</a> </li> <li> <a href="javascript:;">一级菜单2</a> <ol> .
手机端带二级菜单滑动导航的实现
Your life needs a sense of ritual!
12-02 4502
手机端带二级菜单滑动导航的实现实现的效果图： Swiper插件是开源、免费、强大的移动端触摸滑动插件。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。这个效果是freemode模式。 默认的这种模式下只能够实现一级导航，但是如果二级导航的话该如何实现呢？ 下面这段代码是布局加样式的代码： <div class="swiper-head">
知乎竞赛.zip
最新发布
09-11
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
导航菜单特效设计，如：二级、三级横向下拉菜单的代码
05-31
好的，以下是一个简单的二级横向下拉菜单的代码示例： HTML: ``` <li><a href="#">菜单1 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> <li>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值