经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
导航菜单的实现
来源：cnblogs　　作者：码农下的天空　　时间：2019/8/12 9:06:26　　对本文有异议

　　熟练使用导航栏，对于网站排版非常重要,使用CSS，js，jq等你可以转换成好看的导航栏而不是枯燥的HTML菜单。

　　CSS实现：

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5         <meta name="Genarator" content="Sublime Text"/>
  6.  6         <meta name="description" content="菜单的实现" />
  7.  7         <meta name="keywords" content="CSS实现，下拉菜单"/>
  8.  8   <title>CSS实现下拉菜单</title>
  9.  9  <style type="text/css">
  10. 10       *{ margin:0px; padding:0px;}
  11. 11        #menu{ 
  12. 12         background-color:#eee; 
  13. 13         width:600px; 
  14. 14         height:40px;
  15. 15          margin:0 auto;
  16. 16        }
  17. 17        ul{ list-style:none;}
  18. 18        ul li{ 
  19. 19         float:left; 
  20. 20         line-height:40px;
  21. 21          text-align:center; 
  22. 22          position:relative;
  23. 23        }
  24. 24        a{ 
  25. 25         text-decoration:none; 
  26. 26         color:#000;
  27. 27          display:block;
  28. 28          width:90px;
  29. 29        }
  30. 30        a:hover{ 
  31. 31         color:#FFF; 
  32. 32         background-color:#666;
  33. 33         }
  34. 34        ul li ul li{
  35. 35         float:none; 
  36. 36         border-left:none;
  37. 37          margin-top:2px; 
  38. 38          background-color:#eee;
  39. 39           } 
  40. 40        ul li ul{ 
  41. 41         display:none;
  42. 42          width:90px; 
  43. 43          position:absolute;
  44. 44        }
  45. 45        ul li:hover ul{ display:block;}
  46. 46  </style>
  47. 47 </head>
  48. 48 <body>
  49. 49 <div id="menu">
  50. 50    <ul>
  51. 51   <li><a href="#">首页</a></li>
  52. 52   <li><a href="#">课程大厅</a>
  53. 53       <ul>
  54. 54           <li><a href="#">JavaScript</a></li>
  55. 55           <li><a href="#">jQuery</a></li>
  56. 56       </ul>
  57. 57   </li>
  58. 58   <li><a href="#">学习中心</a>
  59. 59     <ul>
  60. 60     <li><a href="#">视频学习</a></li>
  61. 61       <li><a href="#">案例学习</a></li>
  62. 62       <li><a href="#">交流平台</a></li>
  63. 63       </ul>
  64. 64   </li>
  65. 65   <li><a href="#">经典案例</a></li>
  66. 66   <li><a href="#">关于我们</a></li>
  67. 67   <li><a href="#">联系我们</a></li>
  68. 68  </ul>
  69. 69 </div>
  70. 70 </body>
  71. 71 </html>

　　js实现：

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4   <meta charset="UTF-8">
  5.  5         <meta name="Genarator" content="Sublime Text"/>
  6.  6         <meta name="description" content="菜单的实现" />
  7.  7         <meta name="keywords" content="javascript实现，下拉菜单"/>
  8.  8    <title>JavaScript实现下拉菜单</title>
  9.  9 <style type="text/css">
  10. 10       *{ margin:0px; padding:0px;}
  11. 11       body{ 
  12. 12         font-family:Verdana, Geneva, sans-serif;
  13. 13        font-size:14px;
  14. 14      }
  15. 15       #nav{
  16. 16        width:600px; 
  17. 17        height:40px; 
  18. 18        background-color:#eee;
  19. 19         margin:0 auto;
  20. 20       }
  21. 21       ul{ list-style:none;}
  22. 22       ul li{ 
  23. 23         float:left; 
  24. 24         line-height:40px; 
  25. 25         text-align:center; 
  26. 26         width:100px;
  27. 27       }
  28. 28       a{ 
  29. 29         text-decoration:none;
  30. 30          color:#000; 
  31. 31          display:block;
  32. 32        }
  33. 33       a:hover{ 
  34. 34         color:#F00; 
  35. 35         background-color:#666;
  36. 36       }
  37. 37       ul li ul li{ 
  38. 38         float:none;
  39. 39         background-color:#eee; 
  40. 40         margin:2px 0px;
  41. 41       }
  42. 42       ul li ul{ display:none;}
  43. 43 </style>
  44. 44  <script type="text/javascript">
  45. 45 
  46. 46         function displaySubMenu(li) {
  47. 47 
  48. 48             var subMenu = li.getElementsByTagName("ul")[0];
  49. 49 
  50. 50             subMenu.style.display = "block";
  51. 51 
  52. 52         }
  53. 53 
  54. 54         function hideSubMenu(li) {
  55. 55 
  56. 56             var subMenu = li.getElementsByTagName("ul")[0];
  57. 57 
  58. 58             subMenu.style.display = "none";
  59. 59 
  60. 60         }
  61. 61 
  62. 62     </script>
  63. 63 </head>
  64. 64 
  65. 65 <body>
  66. 66 <div id="nav">
  67. 67 <ul>
  68. 68   <li><a href="#">首页</a></li>
  69. 69   <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">课程大厅</a>
  70. 70      <ul>
  71. 71          <li><a href="#">JavaScript</a></li>
  72. 72          <li><a href="#">Html/CSS</a></li>
  73. 73      </ul>  
  74. 74   </li>
  75. 75   <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">学习中心</a>
  76. 76       <ul>
  77. 77          <li><a href="#">视频学习</a></li>
  78. 78          <li><a href="#">实例练习</a></li>
  79. 79          <li><a href="#">问与答</a></li>
  80. 80      </ul>  
  81. 81   </li>
  82. 82   <li><a href="#">经典案例</a></li>
  83. 83   <li><a href="#">关于我们</a></li>
  84. 84   <li><a href="#">联系我们</a></li>
  85. 85 </ul>
  86. 86 </div>
  87. 87 </body>
  88. 88 </html>

　　jq实现：

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4   <meta charset="UTF-8">
  5.  5         <meta name="Genarator" content="Sublime Text"/>
  6.  6         <meta name="description" content="菜单的实现" />
  7.  7         <meta name="keywords" content="JQuery实现，下拉菜单"/>
  8.  8 <title>JQuery实现下拉菜单</title>
  9.  9   <style type="text/css">
  10. 10       *{ margin:0px; padding:0px;}
  11. 11        #menu{ 
  12. 12           background-color:#eee;
  13. 13           width:600px;
  14. 14          height:40px;
  15. 15           margin:0 auto;
  16. 16         }
  17. 17        ul{ list-style:none;}
  18. 18        ul li{ 
  19. 19           float:left;  
  20. 20           line-height:40px;
  21. 21           text-align:center;
  22. 22           position:relative;
  23. 23         }
  24. 24        a{ 
  25. 25          text-decoration:none; 
  26. 26          color:#000; 
  27. 27          display:block;
  28. 28          width:90px;
  29. 29        }
  30. 30        a:hover{ 
  31. 31         color:#FFF; 
  32. 32         background-color:#666;
  33. 33       }
  34. 34        ul li ul li{ 
  35. 35         float:none;
  36. 36         border-left:none;
  37. 37          margin-top:2px; 
  38. 38          background-color:#eee;
  39. 39           } 
  40. 40        ul li ul{
  41. 41           width:90px;
  42. 42           position:absolute;
  43. 43           left:0px; 
  44. 44           top:40px;
  45. 45            display:none;
  46. 46          }
  47. 47   </style>
  48. 48 <script src="jquery-1.12.0.min.js"></script>
  49. 49 <script type="text/javascript">
  50. 50     $(function(){
  51. 51 
  52. 52        $(".navmenu").mouseover(function(){
  53. 53 
  54. 54            $(this).children("ul").show();
  55. 55 
  56. 56            })
  57. 57 
  58. 58        $(".navmenu").mouseout(function(){
  59. 59 
  60. 60            
  61. 61            $(this).children("ul").hide();
  62. 62 
  63. 63            
  64. 64            })
  65. 65 
  66. 66         })
  67. 67 
  68. 68 </script>
  69. 69 </head>
  70. 70 <body>
  71. 71 <div id="menu">
  72. 72    <ul>
  73. 73   <li><a href="#">首页</a></li>
  74. 74   <li class="navmenu"><a href="#">课程大厅</a>
  75. 75       <ul>  
  76. 76          <li><a href="#">JavaScript</a></li>
  77. 77          <li><a href="#">jQuery</a></li>
  78. 78       </ul>
  79. 79   </li>
  80. 80   <li class="navmenu"><a href="#">学习中心</a>
  81. 81       <ul>
  82. 82          <li><a href="#">视频学习</a></li>
  83. 83          <li><a href="#">案例学习</a></li>
  84. 84          <li><a href="#">交流平台</a></li>
  85. 85       </ul>
  86. 86   </li>
  87. 87   <li><a href="#">经典案例</a></li>
  88. 88   <li><a href="#">关于我们</a></li>
  89. 89   <li><a href="#">联系我们</a></li>
  90. 90   </ul>
  91. 91  </div> 
  92. 92 </body>
  93. 93 </html>

原文链接：http://www.cnblogs.com/songtianfa/p/11325909.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号