导航栏实例

最新推荐文章于 2024-07-18 13:52:01 发布
最新推荐文章于 2024-07-18 13:52:01 发布
阅读量51 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/zhangxiaolei521/p/5342854.html
版权

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
oDiv{ width:100px; height:100px; background:#FF0000; position:absolute; left:0px; top:20px;}

ul li{ list-style:none;}
a{ text-decoration:none;}
#nav{ margin:0 auto; width:520px;}
#nav li{ float:left; width:120px; text-align:center; background:#CCCCCC; display:block; margin-right:10px; height:30px; line-height:30px; text-decoration:none; font-size:14px; font-weight:bold;}
#nav li a{ display:block;}
#nav li .list{ height:0px; position:absolute; width:120px; overflow:hidden;}
#nav li .list li{ background:#003399; border:none; height:28px; line-height:28px; color:#FFFFFF; display:block;}
</style>

<script language="javascript">
window.οnlοad=function()
{
var oDiv=document.getElementById("oDiv");


//startMove(oDiv);
var oNav=document.getElementById("nav");
var oLi=oNav.children;

for(var i=0;i<oLi.length;i++)
{
oLi[i].οnmοuseοver=function()
{
var oUl=this.getElementsByTagName("ul")[0];

oUl.style.height="auto";
var height=parseInt(getStyle(oUl,"height"));
oUl.style.height="0px";
startMove(oUl,height);

}
oLi[i].οnmοuseοut=function()
{
var oUl=this.getElementsByTagName("ul")[0];
//oUl.setAttribute("style","display:none");
oUl.style.height="auto";
var height=parseInt(getStyle(oUl,"height"));

startMove(oUl,0);
}
}


}
</script>
</head>

<body>
<br/><br/><br/><br/><br/><br/>
<div id="oDiv"></div>


<ul id="nav">
<li><a href="#">网站首页</a></li>
<li>
<a href="#">关于我们</a>
<ul class="list">
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
</ul>
</li>
<li>
<a href="#">新闻中心</a>
<ul class="list">
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
</ul>
</li>
<li>
<a href="#">产品展示</a>
<ul class="list">
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
</ul>
</li>
</ul>
<script language="javascript" >
var i=0;
function startMove(obj,iTarget)
{
clearInterval(obj.iTimer);
obj.iTimer=setInterval(function(){


var iCur=parseInt(getStyle(obj,"height"));
var iSpeed="";

iSpeed=((iTarget-iCur)/8);

if(iSpeed>0)
{
iSpeed=Math.ceil(iSpeed);
}
else
{
iSpeed=Math.floor(iSpeed);
}

if(iCur==iTarget)
{
clearInterval(obj.iTimer);
}
else
{
obj.style["height"]=iCur+iSpeed+"px";
}


},10)
}

//获取样式
function getStyle(obj,attr)
{
var v="";
if(obj.currentStyle)
{
v=obj.currentStyle[attr];
}
else
{
v=getComputedStyle(obj,false)[attr];
}
return v;
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/zhangxiaolei521/p/5342854.html

baipai8449
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端实战：小实例1——导航栏
weixin_43328954的博客
05-24 3268
前言 一个导航栏可看作一个链接列表，在 HTML 使用 ul 标签和 li 标签元素进行结构表示，在 CSS 中进行样式处理，对应标签元素的具体用法可查看 HTML常见标签介绍。 实现思路 1. 使用 div 包装导航栏，用 ul 和 li 标签展示导航栏的基本模样 2. 在 li 标签设置子导航栏 ul 和 li，将子导航栏初始设为不可见（display : none） 3. 在 CSS 中设置伪类选择器，鼠标移入时子导航栏设为可见
导航栏例子
wlx1991的专栏
01-09 557
导航栏 * {margin:0; padding:0; border:0;} .out {margin:auto; width:400px; height:auto; border:solid 1px black; list-style:none; background:#3C0; margin-top:50px;} .out > li {float:left; width:100px; he
07-----小米
weixin_30326745的博客
07-16 64
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ paddin...
HTML各种导航栏例子
07-10
HTML各种导航栏例子
20个导航栏实例
01-16
这里有二十个效果很不错的导航栏实例，可供大家学习
BootStrap 导航条实例代码
08-30
Bootstrap 导航条实例代码详解 Bootstrap 是一个流行的前端框架，提供了许多实用的组件和插件，其中导航条是其中一个非常重要的组件。本文将详细介绍 Bootstrap 导航条的实例代码，包括默认的导航条和带有表单的...
微信小程序自定义导航栏实例代码
12-01
在微信小程序开发中，为了实现更灵活的导航栏设计，我们常常需要自定义导航栏，以便解决默认导航栏带来的各种问题。例如，Android和iOS设备上页面标题的展示不一致，标题样式控制有限，以及左上角事件监听与定制的...
BootStrap制作导航条实例代码
09-02
<title>Bootstrap 导航条实例 <!-- Brand and toggle get grouped for better mobile display --> <span class="sr-only">Toggle navigation <span class="icon-bar"></span> ...
Web前端开发-简单导航栏实例
05-17
关于HTML中的导航栏的设计(夏季风格)~可以出现鼠标悬停效果变化~用div框起来，使用ul标签包含a。
导航栏案例——下拉菜单案列
LY
03-04 999
实现下面的下拉菜单案例：当鼠标经过一级菜单时，二级菜单显示，当鼠标离开菜单时，二级菜单隐藏 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &a
html+css导航栏案例展示
04-17
html+css导航栏案例展示。
网页导航栏示例100个
12-05
网页导航栏示例100个很多效果很不错。喜欢的小虾可以下载看看。
一个导航条的例子
sufeinet
05-22 1186
本文链接：http://user.qzone.qq.com/361983679/blog/1211386526 大家快做项目了， 一定会想到过自己的导航条怎么做呢，这是我做的一个小例子，我个人让为呢还行，有那位朋友想用的话
手写移动端导航栏（仿京东）实例【VUE3】
一键难忘的博客
03-16 1408
class="{ active: currentIndex === index }：主要作用于文字选中下标红色，如果currentIndex（当前页面下标）和index （循环下标）相同时，返回Ture，class标签新加active，下面css代码有所体现。测试没有问题，写的时候吧内容放到了下面，不过功能已经实现，这个并不重要，介意的直接把app.vue里的内容和导航栏互换一下位置，然后把导航栏进行一个绝对定位即可完成。methods：方法，这里写自定义函数，目的，获取子组件传参，进行改变页面内容。
CSS技能点--垂直导航栏实例
程序员大阳
07-21 2418
垂直导航栏可以说是相当常见，尤其是在一些管理系统中，左侧往往是一个垂直导航栏，便于用户快速切换菜单。 本篇就来实现一个简单的垂直导航栏
实例（一）简单实现新浪导航栏
weixin_52583990的博客
07-18 1246
简单实现新浪导航栏
个人学习日记—CSS复合选择器、背景、三大特性
zh_hunan的博客
10-15 224
CSS复合选择器 目的是为了可以选择更准确更精细的目标元素标签。 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 后代选择器（重点） 概念： 后代选择器又称为包含选择器 作用： 用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。 语法： .class h3{color:red;font-size:16px;} 当标签发生嵌套时...
导航菜单示例
xiaosongwahaha的博客
12-21 1026
1、masite.ftl 2、页首page-header.ftl    其中为菜单伸缩按钮                                                          搜索数据尼米兹
web前端基础面试85题（一）
最新发布
柯晓楠
07-18 798
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
JS+CSS碰撞缓冲竖向导航条实例与代码
本篇文章详细介绍了如何通过JavaScript (JS) 和 CSS 实现一个具有碰撞缓冲效果的竖向导航栏。这种导航条的特点在于滑块在移动过程中会模拟出弹性振动的效果，为用户的交互体验增添了一种动态的触感。作者分享的是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值