js二级导航菜单代码实例

最新推荐文章于 2022-12-25 19:26:32 发布
翻译最新推荐文章于 2022-12-25 19:26:32 发布
· 6k 阅读
前端js 同时被 2 个专栏收录
39 篇文章
订阅专栏
效果
13 篇文章
订阅专栏
分享一个比较简单的二级导航菜单效果。
鼠标悬浮菜单能够出现二级菜单，代码实例如下:
     
     
      
      
       
       
        
         
            
              001 
             
            
              002 
             
            
              003 
             
            
              004 
             
            
              005 
             
            
              006 
             
            
              007 
             
            
              008 
             
            
              009 
             
            
              010 
             
            
              011 
             
            
              012 
             
            
              013 
             
            
              014 
             
            
              015 
             
            
              016 
             
            
              017 
             
            
              018 
             
            
              019 
             
            
              020 
             
            
              021 
             
            
              022 
             
            
              023 
             
            
              024 
             
            
              025 
             
            
              026 
             
            
              027 
             
            
              028 
             
            
              029 
             
            
              030 
             
            
              031 
             
            
              032 
             
            
              033 
             
            
              034 
             
            
              035 
             
            
              036 
             
            
              037 
             
            
              038 
             
            
              039 
             
            
              040 
             
            
              041 
             
            
              042 
             
            
              043 
             
            
              044 
             
            
              045 
             
            
              046 
             
            
              047 
             
            
              048 
             
            
              049 
             
            
              050 
             
            
              051 
             
            
              052 
             
            
              053 
             
            
              054 
             
            
              055 
             
            
              056 
             
            
              057 
             
            
              058 
             
            
              059 
             
            
              060 
             
            
              061 
             
            
              062 
             
            
              063 
             
            
              064 
             
            
              065 
             
            
              066 
             
            
              067 
             
            
              068 
             
            
              069 
             
            
              070 
             
            
              071 
             
            
              072 
             
            
              073 
             
            
              074 
             
            
              075 
             
            
              076 
             
            
              077 
             
            
              078 
             
            
              079 
             
            
              080 
             
            
              081 
             
            
              082 
             
            
              083 
             
            
              084 
             
            
              085 
             
            
              086 
             
            
              087 
             
            
              088 
             
            
              089 
             
            
              090 
             
            
              091 
             
            
              092 
             
            
              093 
             
            
              094 
             
            
              095 
             
            
              096 
             
            
              097 
             
            
              098 
             
            
              099 
             
            
              100 
             
            
              101 
             
            
              102 
             
            
              103 
             
            
              104 
             
            
              105 
             
            
              106 
             
            
              107 
             
            
              108 
             
            
              109 
             
            
              110 
             
            
              111 
             
            
              112 
             
            
              113 
             
            
              114 
             
            
              115 
             
            
              116 
             
            
              117 
             
            
              118 
             
            
              119 
             
            
              120 
             
            
              121 
             
            
              122 
             
            
              123 
             
            
              124 
             
            
              125 
             
            
              126 
             
            
              127 
             
            
              128 
             
            
              129 
             
            
              130 
             
            
              131 
             
             
              
              <!doctype html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
              
              
              < 
              title 
              >鼠标悬浮菜单能够出现二级菜单</ 
              title 
              > 
              
              
              < 
              style 
              > 
              
              
              a { 
              
              
                 
              color: #fff; 
              
              
                 
              text-decoration: none; 
              
              
              } 
              
              
                 
              
              
              ul { 
              
              
                 
              margin: 0; 
              
              
                 
              list-style: none; 
              
              
              } 
              
              
                 
              
              
              #menu { 
              
              
                 
              width: 500px; 
              
              
                 
              height: 60px; 
              
              
                 
              background: #06F; 
              
              
                 
              border-radius: 6px; 
              
              
                 
              box-shadow: 2px 2px 5px #0066FF; 
              
              
              } 
              
              
                 
              
              
              #menu li { 
              
              
                 
              float: left; 
              
              
                 
              margin-top: 10px; 
              
              
                 
              line-height: 22px; 
              
              
                 
              padding: 0; 
              
              
                 
              position: relative; 
              
              
              } 
              
              
                 
              
              
              #menu li a { 
              
              
                 
              padding: 10px 20px; 
              
              
                 
              display: inline-block; 
              
              
              } 
              
              
                 
              
              
              #menu li .hover { 
              
              
                 
              background: #fff; 
              
              
                 
              opacity: 0.5; 
              
              
                 
              color: #06F; 
              
              
                 
              border-radius: 5px; 
              
              
              } 
              
              
                 
              
              
              #menu li .lis { 
              
              
                 
              width: 300px; 
              
              
                 
              height: 40px; 
              
              
                 
              line-height: 40px; 
              
              
                 
              border-radius: 5px; 
              
              
                 
              background: #FC6; 
              
              
                 
              position: absolute; 
              
              
                 
              top: 70px; 
              
              
              } 
              
              
                 
              
              
              #menu li .lis a { 
              
              
                 
              padding: 0 10px; 
              
              
                 
              background: none; 
              
              
                 
              opacity: 1; 
              
              
                 
              color: #fff; 
              
              
              } 
              
              
                 
              
              
              #menu li .lis a:hover { 
              
              
                 
              text-decoration: underline; 
              
              
              } 
              
              
              </ 
              style 
              > 
              
              
              < 
              script 
              > 
              
              
              window.onload = function() { 
              
              
                 
              var oUl = document.getElementById('menu'); 
              
              
                 
              var aLi = oUl.getElementsByTagName('li'); 
              
              
                 
              var aDiv = oUl.getElementsByTagName('div'); 
              
              
                 
              var timer = null; 
              
              
                 
              
              
                 
              for (var i = 0; i < aLi.length; i++) { 
              
              
                   
              var oA = aLi[i].getElementsByTagName('a')[0]; 
              
              
                   
              oA.index = i; 
              
              
                   
              clearTimeout(timer); 
              
              
                 
              
              
                   
              oA.onmouseover = function() { 
              
              
                     
              this.className = 'hover'; 
              
              
                     
              aDiv[this.index].style.display = 'block'; 
              
              
                   
              } 
              
              
                   
              oA.onmouseout = function() { 
              
              
                     
              this.className = ''; 
              
              
                     
              n = this.index; 
              
              
                     
              timer = setTimeout(function() { 
              
              
                       
              aDiv[n].style.display = 'none'; 
              
              
                     
              }, 200); 
              
              
                   
              } 
              
              
                   
              aDiv[i].onmouseover = function() { 
              
              
                     
              clearTimeout(timer); 
              
              
                     
              this.style.display = 'block'; 
              
              
                   
              } 
              
              
                   
              aDiv[i].onmouseout = function() { 
              
              
                     
              this.style.display = 'none'; 
              
              
                   
              } 
              
              
                 
              } 
              
              
              } 
              
              
              </ 
              script 
              > 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
              < 
              div 
              > 
              
              
                 
              < 
              ul  
              id 
              = 
              "menu" 
              > 
              
              
                   
              < 
              li 
              > 
              
              
                     
              < 
              a  
              href 
              = 
              "javascript:;" 
              >首页</ 
              a 
              > 
              
              
                     
              < 
              div  
              class 
              = 
              "lis"  
              style 
              = 
              "display:none;" 
              > 
              
              
                       
              < 
              a  
              href 
              = 
              "javascript:;" 
              >最新活动</ 
              a 
              > 
              
              
                       
              < 
              a  
              href 
              = 
              "javascript:;" 
              >最新更新</ 
              a 
              > 
              
              
                       
              < 
              a  
              href 
              = 
              "javascript:;" 
              >最新课程</ 
              a 
              > 
              
              
                     
              </ 
              div 
              > 
              
              
                   
              </ 
              li 
              > 
              
              
                   
              < 
              li 
              > 
              
              
                     
              < 
              a  
              href 
              = 
              "javascript:;" 
              >关于我们</ 
              a 
              > 
              
              
                     
              < 
              div  
              class 
              = 
              "lis"  
              style 
              = 
              "display:none;" 
              > 
              
              
                       
              < 
              a  
              href 
              = 
              "javascript:;" 
              >企业文化</ 
              a 
              > 
              
              
                       
              < 
              a  
              href 
              = 
              "javascript:;" 
              >联系我们</ 
              a 
              > 
              
              
                       
              < 
              a  
              href 
              = 
              "javascript:;" 
              >客服</ 
              a 
              > 
              
              
                     
              </ 
              div 
              > 
              
              
                   
              </ 
              li 
              > 
              
              
                   
              < 
              li 
              > 
              
              
                     
              < 
              a  
              href 
              = 
              "javascript:;" 
              >课程</ 
              a 
              > 
              
              
                     
              < 
              div  
              class 
              = 
              "lis"  
              style 
              = 
              "display:none;" 
              > 
              
              
                       
              < 
              a  
              href 
              = 
              "javascript:;" 
              >js课程</ 
              a 
              > 
              
              
                       
              < 
              a  
              href 
              = 
              "javascript:;" 
              >css3课程</ 
              a 
              > 
              
              
                       
              < 
              a  
              href 
              = 
              "javascript:;" 
              >HTML5课程</ 
              a 
              > 
              
              
                     
              </ 
              div 
              > 
              
              
                   
              </ 
              li 
              > 
              
              
                 
              </ 
              ul 
              > 
              
              
              </ 
              div 
              > 
              
              
              </ 
              body 
              > 
              
              
              </ 
              html 
              >