CSS+JavaScript 实现菜单功能

最新推荐文章于 2021-06-09 11:34:44 发布

majianan

最新推荐文章于 2021-06-09 11:34:44 发布

阅读量1.1k

点赞数

分类专栏：【01】JavaScript 【06】SourceCode 文章标签： javascript css menu class function float

本文链接：https://blog.csdn.net/majianan/article/details/3461974

版权

【01】JavaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

【06】SourceCode

11 篇文章 0 订阅

订阅专栏

CSS+JavaScript 实现菜单功能

马嘉楠 2008-12-07

共同学习，欢迎转载。转载请注明地址【 http://blog.csdn.net/majianan/archive/2008/12/07/3461974.aspx】，谢谢O(∩_∩)O！

自己动手写了一遍，收获不少O(∩_∩)O

功能如下：

代码如下：

 
 
<html>
    <head>
        <META NAME="Author" CONTENT="Ma Jia Nan">
    <META NAME="Date" CONTENT="2008-12-7">
    <META NAME="Description" CONTENT="">
        <title>Menu</title>
        <style type='text/css'> 
            #menubar { 
                font-family:verdana;
                font-size:12px;             
                margin:1px;
            } 
            #menubar li { 
                float:left;
                position:relative;              
                text-align:left;
            }       
            /* each menu item style */
            #menubar li a { 
                border-style:none;
                color:black;
                display:block;                          
                width:150px;
                height:20px;
                line-height:20px;
                padding-left:10px;
                text-decoration:none;   
            }
            /* the first level menu which displays default */
            #menubar .menuMain{ 
                border-color:#C0C0C0;
                border-width:1px;
                border-style:solid;
            }
            /* the first leve style when mouse on it */
            #menubar li a:hover{ 
                background-color:#efefef; 
                text-decoration:underline;
      }
      /* the second level menu block style */
            #menubar li ul{ 
                background-color:#efefef;
                border-style:none;
                display:none;
                position:absolute;
                top:20px;
              left:-40px;
                margin-top:2px;
                width:150px;            
            }
            /* the sub menu item style when mouse on it */
            #menubar li ul li a:hover { 
                text-decoration:underline; 
                padding-left:20px; 
      }
      /* the third or more level menu block style */
            #menubar li ul li ul { 
                display:none;
                position:absolute;
                top:0px;
        left:150px; 
        margin-top:0;
        margin-left:0;
        width:150px;
            }   
        </style>
        
        <script language='javascript'>
            function displaySubMenu(li){
                var subMenu = li.getElementsByTagName('ul')[0];
                subMenu.style.display = 'block';
            }
            
            function hideSubMenu(li){
                var subMenu = li.getElementsByTagName('ul')[0];
                subMenu.style.display = 'none';
            }   
        </script>
    </head>
    <body>
        <div>
            <ul id='menubar'>
                 <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
            <a href="#" class='menuMain'>File</a>   
            <ul>
                <li><a href="#" >New</a></li>
                <li><a href="#" >Open</a></li>
                <li><a href="#" >Save</a></li>
                <li><a href="#" >Save As</a></li>
                <li><a href="#" >Close</a></li>
            </ul>
        </li>
        <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
            <a href="#" class='menuMain'>Edit</a>    
            <ul>
                <li><a href="#" >Cut</a></li>
                <li><a href="#" >Copy</a></li>
                <li><a href="#" >Paset</a></li>
                <li><a href="#" >Delete</a></li>
                <li><a href="#" >Select All</a></li>
            </ul>
        </li>
        <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
            <a href="#" class='menuMain'>View</a>    
            <ul>
                <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
                    <a href="#">View List</a>
                    <ul>
                        <li><a href="#" >Tool Bar</a></li>
                        <li><a href="#" >State Bar</a></li>
                        <li><a href="#" >Function List</a></li>
                        <li><a href="#" >Label List</a></li>
                    </ul>
                </li>
                <li><a href="#" >Show Line Number</a></li>
                <li><a href="#" >Set Color</a></li>
            </ul>
        </li>
            </ul>
        </div>
    </body>
</html>
 

majianan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS+JavaScript 实现菜单功能

CSS+JavaScript 实现菜单功能马嘉楠 2008-12-07共同学习，欢迎转载。转载请注明地址【http://blog.csdn.net/majianan/archive/2008/12/07/3461974.aspx】，谢谢O(∩_∩)O！自己动手写了一遍，收获不少O(∩_∩)O功能如下： #menubar {
复制链接

扫一扫