팝 업 메뉴

<!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" content="text/html; charset=utf-8" />

<title>     </title>



<style>

*{ margin:0; padding:0; font-family:"    "; font-size:18px;}

a{text-decoration:none;}



.popmenu { width:400px; margin:50px auto;}



.popmenu ul { background:#B10000; height:25px; }

.popmenu ul li{float:left; width:100px; position:relative;list-style:none;}



.popmenu ul li a{display:block;height:25px; line-height:25px;  text-align:center; color:white;}

.popmenu ul li a:hover{ background:#79951A; }



.popmenu ul li div{display:none; line-height:30px;width:100px; background:#528DF1; position:absolute;}

</style>



</head>



<body>

<div class="popmenu" id="popmenu">

    <ul>

        <li>

            <a class="first" href="#">  1</a>

            <div>

                <a href="http://www.baidu.com">  </a>

                <a href="http://www.qq.com">  </a>

                <a href="http://www.baidu.com">  </a>

                <a href="http://www.qq.com">  </a>  

                <a href="http://www.baidu.com">  </a>

                <a href="http://www.qq.com">  </a>

                <a href="http://www.baidu.com">  </a>

                <a href="http://www.qq.com">  </a>                           

            </div>

        </li>

        <li>

            <a href="#">  2</a>

            <div>

                <a href="http://www.baidu.com">  </a>

                <a href="http://www.qq.com">  </a>

                <a href="http://www.baidu.com">   </a>

            </div></li>

        <li><a href="#">  3</a><div>content3</div></li>                

        <li><a href="#">  4</a><div>content4</div></li>                

    </ul>

</div>



</body>

</html>

<script>



//  firstchild

function firstChild(elem)

{

    var node = elem.firstChild ? elem.firstChild : null;

    while(node && node.nodeType != 1)

    {

        node = node.nextSibling;

    }

    return node;

}



//         （ie         ）

function next(elem)

{

    var node = elem.nextSibling ? elem.nextSibling : null;

    while(node && node.nodeType != 1 )

    {

        node = node.nextSibling;

    }

    

    return node;

}



//         （ie         ）

function prev(elem)

{

    var node = elem.previousSibling ? elem.previousSibling : null;

    while(node && node.nodeType != 1 )

    {

        node = node.previousSibling;

    }

    

    return node;

}



function contains(a,b)

{

    if(document.defaultView)

    {

        return !!( a.compareDocumentPosition(b) & 16 );

    }else{

        return a != b && a.contains(b);     

    }

} 



/**

children:      

childNodes：    

           

*/





var lis = document.getElementById('popmenu').getElementsByTagName('li');

for(var i=0;i<lis.length;i++) 

{

    lis[i].onmouseover = function(evt){

        var evt = evt || window.event;

        evt.relatedTarget = evt.relatedTarget || evt.fromElement;



        if(!evt.relatedTarget || !contains(this, evt.relatedTarget))

        {

            //console.log('over')

            next(firstChild(this)).style.display = 'block';

        }

    }

    

    lis[i].onmouseout = function(evt){

        var evt = evt || window.event;

        evt.relatedTarget = evt.relatedTarget || evt.toElement;

        

        if( !evt.relatedTarget || (evt.relatedTarget && !contains(this, evt.relatedTarget)))

        {

            //console.log('out')

            next(firstChild(this)).style.display = 'none';

        }

    }

}

</script>

효과 그림:
　　

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

위챗 공중번호 테스트 계정 사용자 정의 메뉴의 실례 코드

사용자가 클릭 형식 단추를 누르면 위챗 서버는 메시지 인터페이스를 통해 메시지 형식이 이벤트인 구조를 개발자에게 전송하고 (메시지 인터페이스 안내서 참조) 단추에 개발자가 작성한 키 값을 가지고 개발자는 사용자 정의...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

팝 업 메뉴

좋은 웹페이지 즐겨찾기