js导航条

最新推荐文章于 2021-04-15 19:01:58 发布

第三个电饭锅

最新推荐文章于 2021-04-15 19:01:58 发布

阅读量709

点赞数

分类专栏： asp.net

本文链接：https://blog.csdn.net/w18767104183/article/details/8673440

版权

asp.net 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!--
 所学技术：
    1.使用定时器延迟调用函数 和清除定时器
    2.style.cursor = cursor;手型光标
    3.visibility属性   
    4.border-right: none;设置边框
    5.offsetHeight 对象的长
    6.offsetTop 对象的高度
    7.absolute属性 绝对坐标
    -->


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>js 简单下拉菜单效果</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="description" content="" />
<meta name="keywords"    content="" />

<script type="text/javascript" >

    function at_show_aux(parent, child) {//子导航位置
        var p = document.getElementById(parent);
        var c = document.getElementById(child);

        //子导航出现在母导航的下面还是右边
        var top = (c["at_position"] == "y") ? p.offsetHeight + 2 : 0;//母导航高度+距离
        var left = (c["at_position"] == "x") ? p.offsetWidth + 2 : 0;

       
            top += p.offsetTop;//母导航高度+距离+母导航位置
            left += p.offsetLeft;
        

        c.style.position = "absolute";
        c.style.top = top + 'px';
        c.style.left = left + 'px';
        c.style.visibility = "visible";
    }

    // ***** at_show *****

    function at_show() {
        var p = document.getElementById(this["at_parent"]);
        var c = document.getElementById(this["at_child"]);

        at_show_aux(p.id, c.id);
        clearTimeout(c["at_timeout"]);//清除定时器
    }

    // ***** at_hide *****

    function at_hide() {

        var c = document.getElementById(this["at_child"]);

        c["at_timeout"] = setTimeout("document.getElementById('" + c.id + "').style.visibility = 'hidden'", 100);//设定100毫秒后执行
    }

    // ***** at_click *****



    function at_attach(parent, child,  position, cursor) {
        var p = document.getElementById(parent);//母导航
        var c = document.getElementById(child);//子导航

        p["at_parent"] = p.id;//母导航 
        p["at_child"] = c.id;//母导航下的子导航
        p["at_position"] = position;//导航位置

        c["at_parent"] = p.id;//子导航上的母导航
        c["at_child"] = c.id;//子导航
        c["at_position"] = position;//导航位置

        c.style.position = "absolute";
        c.style.visibility = "hidden";//隐藏子导航

        if (cursor != undefined) {
            p.style.cursor = cursor;//手型光标
            c.style.cursor = cursor;
        }


                p.onmouseover = at_show;
                p.onmouseout = at_hide;
                c.onmouseover = at_show;
                c.onmouseout = at_hide;


    }
</script>

<style type="text/css">

body { font-size: 0.7em; }
h3   { font-size: 1.6em; margin: 0px; }

a.sample_attach, div.sample_attach
{
  display: block;
  width:   100px;

  border:  1px solid black;
  padding: 2px 5px;

  background: #FFFFEE;

  text-decoration: none;
  font-family: Verdana, Sans-Sherif;
  font-weight: 900;
  font-size: 1.0em;
  color:   #008000;
  FLOAT: none;/*如果是横向导航条 就是left  纵向的就是none*/
}


a.sample_attach { border-right: none; }
div#sample_attach_menu_child             { border-right: 1px solid black; }
div#sample_attach_menu_child2             { border-right: 1px solid black; }
div#sample_attach_menu_child3             { border-right: 1px solid black; }



</style>

</head>
<body>



<div id="sample_attach_menu_parent" class="sample_attach">Main Menu</div>
<div id="sample_attach_menu_child" >
<a class="sample_attach">Item 1</a>
<a class="sample_attach">Item 2</a>
<a class="sample_attach">Item 3</a>
</div>
<div id="sample_attach_menu_parent2" class="sample_attach">Main Menu</div>
<div id="sample_attach_menu_child2" >
<a class="sample_attach">Item 1</a>
<a class="sample_attach">Item 2</a>
<a class="sample_attach">Item 3</a>
</div>

<div id="sample_attach_menu_parent3" class="sample_attach">Main Menu</div>
<div id="sample_attach_menu_child3" >
<a class="sample_attach">Item 1</a>
<a class="sample_attach">Item 2</a>
<a class="sample_attach">Item 3</a>
</div>
<script type="text/javascript">
    at_attach("sample_attach_menu_parent", "sample_attach_menu_child", "x", "pointer");//如果是横向就是y，纵向的事x
    at_attach("sample_attach_menu_parent2", "sample_attach_menu_child2",  "x", "pointer");
    at_attach("sample_attach_menu_parent3", "sample_attach_menu_child3",  "x", "pointer");
</script>







</body>
</html>

第三个电饭锅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js导航条

<!-- 所学技术： 1.使用定时器延迟调用函数和清除定时器 2.style.cursor = cursor;手型光标 3.visibility属性 4.border-right: none;设置边框 5.offsetHeight 对象的长 6.offsetTop 对象的高度 7.absolute属性绝对坐标
复制链接

扫一扫