[JavaScript] JS+CSS 制作超级简单的下拉菜单

最新推荐文章于 2024-11-09 09:36:39 发布

原创最新推荐文章于 2024-11-09 09:36:39 发布 · 3.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文展示了如何利用JavaScript和CSS实现一个简洁的下拉菜单。通过结合JS动态效果与CSS样式，创建出交互式的菜单项，适用于网页导航栏。教程包括代码示例，帮助读者快速理解和应用。

先看效果：

代码：

<html>
    <head>
        <title>Good Test</title>

        <script> 
           
            function showSubMenu(SubMenu) {
                document.getElementById(SubMenu).style.display = "inline";                
            }
            function HideSubMenu(SubMenu) {                
                document.getElementById(SubMenu).style.display = "none";
            }

        </script> 
        <style>
             .menu{
                margin:1px 1px 1px 1px;   
                padding:3px 5px 3px 5px;
                background-color:#8080C0;                
                color:white;
            }
            .submenu {
                margin:1px 1px 1px 1px;   
                padding:3px 5px 3px 5px;
                background-color:#8080C0;                
                color:white;
            
            }            

        </style>



    </head>
    <body>
        <div>
            <table>
                <tr>
                    <td style="vertical-align:top;">
                        <span class="menu" id="Menu1" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')" >Menu1</span>
                        <br />
                        <div id="SubMenu1" style="display:none" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')">
                            <span class="submenu">SubMenu1</span><br />
                            <span class="submenu">SubMenu2</span><br />
                            <span class="submenu">SubMenu3</span><br />
                            <span class="submenu">SubMenu4</span>
                        </div>
                    
                    </td>
                    <td style="vertical-align:top;">
                        <span class="menu" id="Menu2" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">Menu2</span>
                        <br />
                        <div id="SubMenu2" style="display:none" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">
                            <span class="submenu">SubMenu1</span><br />
                            <span class="submenu">SubMenu2</span><br />
                            <span class="submenu">SubMenu3</span><br />
                            <span class="submenu">SubMenu4</span>
                        </div>
                    </td>
                    <td style="vertical-align:top;">
                        <span class="menu" id="Menu3" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">Menu3</span>
                        <br />
                        <div id="SubMenu3" style="display:none" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">
                            <span class="submenu">SubMenu1</span><br />
                            <span class="submenu">SubMenu2</span><br />
                            <span class="submenu">SubMenu3</span><br />
                            <span class="submenu">SubMenu4</span>
                        </div>
                    </td>
                    <td style="vertical-align:top;">
                        <span class="menu" id="Menu4" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">Menu4</span>
                        <br />
                        <div id="SubMenu4" style="display:none" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">
                            <span class="submenu">SubMenu1</span><br />
                            <span class="submenu">SubMenu2</span><br />
                            <span class="submenu">SubMenu3</span><br />
                            <span class="submenu">SubMenu4</span>
                        </div>
                    </td>
                </tr>
                
            </table>       
            
            
            
        </div>

        
        
        
        

    </body>


</html>

标签

#js #css #下拉菜单 #菜单