导航页面下拉菜单

<script>
window.onload=function(){
    var aLi=document.getElementsByTagName(‘li‘);
    for(var i=0; i<aLi.length; i++){
        aLi[i].onmouseover=function(){
            //鼠标经过一级菜单,二级菜单动画下拉显示出来
            var subnav = this.getElementsByTagName(‘ul‘)[0];
            if(subnav){
                var This = subnav;
                clearInterval(This.time);
                This.time=setInterval(function(){
                    This.style.height= This.offsetHeight+16+"px";
                    if(This.offsetHeight>=120)
                       clearInterval(This.time);
                },30)
            }   

        }
        //鼠标离开菜单,二级菜单动画收缩起来。
        aLi[i].onmouseout=function(){
            var subn = this.getElementsByTagName(‘ul‘)[0];
            if(subn) {
                var tt = subn;
                clearInterval(tt.time);
                tt.time = setInterval(function() {
                    tt.style.height = tt.offsetHeight -16 +"px";
                    if(tt.offsetHeight <= 0)
                        clearInterval(tt.time);
                },30)
            }                        

        }
    }
}
</script>
时间: 2024-12-20 21:30:08

导航页面下拉菜单的相关文章

css导航栏下拉菜单代码【转自http://zxm.92.blog.163.com/blog/static/544600282010727112723874/】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c

华丽导航CSS下拉菜单特效

华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.huiyi8.com/fengjing/

NAV导航栏———下拉菜单

利用CSS实现导航栏菜单—下拉菜单. 首先给出HTML下拉菜单布局格式: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Stylin' with CSS - Figure 6.5 Drop-Down Menus</title> <link rel="stylesheet" type="text/css&

Phpcms V9导航循环下拉菜单的调用技巧

这个方法基于PC V9官方模版中的调用方法,然后利用后台的“Phpcms V9菜单是否显示设置”控制菜单是否显示出来. 先看看最后的效果: 调用方法: <div id="navbar"> <div id="navbarcontent"> <div id="menu"> <ul id="menuul"> {pc:content action="category"

Css之导航栏下拉菜单

Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#333; /*固定在顶部*/ /*position:fixed; top:0; width:100%;*/ } li{ float:left; } li a, .dropbtn { display:inline-block; color:whi

js导航二级下拉菜单

<!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-

bootstrap-导航加下拉菜单(二级导航)

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>导航加下拉菜单(二级导航)</title>     <!-- 最新版

【特效】导航下拉菜单(二级三级都有)

导航的下拉菜单,分别写了二级的和三级的.其实下拉菜单最重要的是写好结构,哪一层是哪一层的,要清晰,做到心中有数. css定位时注意给隐藏的下拉菜单添加absolute绝对定位,但是其父级不必加relative.js嘛,简单,一个hover() 打遍天下.动画用了slideDown,slideUp,fadeIn,fadeOut,当然可换成其他效果,动画前加了stop() 是为了快速多次滑动时,不会一直闪呀闪个不停. html: <h1>二级下拉菜单</h1> <ul class

CSS 下拉菜单

使用 CSS 可以创建一个鼠标移入后显示下拉菜单的效果. 1.下拉菜单的实现 当鼠标移入指定元素时,显示下拉菜单.代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简单的下拉菜单</title> 6 <style> 7 .dropdown{ 8 position:relative; 9 display: