经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » XHTML » 查看文章
HTML6实现折叠菜单与手风琴菜单的实例代码_HTML/Xhtml
来源：jb51　　时间：2019/8/29 8:33:43　　对本文有异议

页面主体部分：

  1. <body>  <ul id="menu">
  2.           <li>   
  3.                  <a href="#">一级菜单1</a>
  4.                  <ul>
  5.                         <li>二级菜单1-1</li>
  6.                         <li>二级菜单1-2</li>
  7.                         <li>二级菜单1-3</li>
  8.                  </ul>       
  9.           </li>
  10.           <li>    
  11.                   <a href="#">一级菜单2</a>
  12.                   <ul>
  13.                         <li>二级菜单2-1</li>
  14.                         <li>二级菜单2-2</li>
  15.                         <li>二级菜单2-3</li>
  16.                   </ul>   
  17.           </li>
  18.           <li>
  19.                   <a href="#">一级菜单3</a>
  20.                   <ul>
  21.                         <li>二级菜单3-1</li>
  22.                         <li>二级菜单3-2</li>
  23.                         <li>二级菜单3-3</li>
  24.                   </ul> 
  25.           </li>
  26.           <li>
  27.                   <a href="#">一级菜单4</a>
  28.                   <ul>
  29.                         <li>二级菜单4-1</li>
  30.                         <li>二级菜单4-2</li>
  31.                         <li>二级菜单4-3</li>
  32.                   </ul> 
  33.           </li>
  34.   <ul>
  35. </body>

折叠菜单 例：

css部分

  1. <head>
  2. <style type="text/css">
  3. li{
  4.     list-style:none;  去掉列表前面图形
  5. }
  6. li a{
  7.     color:#123;    设置一级菜单文本颜色
  8. }
  9. #menu ul{
  10.     display:none;  设置二级菜单默认不显示
  11. }
  12. #menu>li:hover ul{
  13.     display:block;       鼠标滑过一级菜单时，显示二级菜单
  14. }
  15. </style>
  16. </head>

手风琴菜单 例：

css部分

  1. <head>
  2. <style type="text/css">
  3. li{
  4.     list-style:none;  去掉列表前面图形
  5. }
  6. li a{
  7.     color:#123;    设置一级菜单文本颜色
  8. }
  9. #menu>li,#menu>li>a,#menu>li>ul{
  10.     float:left;             一级菜单，二级菜单左移动
  11. }
  12. #menu>li>a{
  13.     display:block;
  14.     background-color;red;    
  15. }
  16. #menu>li:hover ul{
  17.     display:block;
  18. }
  19. #menu>ul{
  20.      dispaly:none;
  21.      width:100px；
  22.      background-color:#123 ;
  23.      padding-top:20px;
  24. }
  25. </style>
  26. </head>

总结

以上所述是小编给大家介绍的HTML6实现折叠菜单与手风琴菜单的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

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

XHTML热门文章

  • html中显示特殊符号(附带特殊字符对应表)_HTML/Xhtml
  • Html读取本地文件夹下图片并显示的示例代码_HTML/Xhtml
  • HTML+VUE分页实现炫酷物联网大屏功能_HTML/Xhtml
  • html中使用vue-router的示例代码_HTML/Xhtml
  • 使用html2canvas对有百度地图的Dom元素处理成图片的解决_HTML/Xhtml
  • html输入两个数实现加减乘除功能_HTML/Xhtml
  • HTML中table表格拆分合并(colspan、rowspan)_HTML/Xhtml
  • HTML中的if判断用法_HTML/Xhtml
  • HTML表格跨行跨列操作(rowspan、colspan)_HTML/Xhtml
  • html转pdf截图保存功能的实现_HTML/Xhtml

    • XHTML推荐文章

  • HTML基础详解(上)_HTML/Xhtml
  • HTML基础详解（下）_HTML/Xhtml
  • html中显示特殊符号(附带特殊字符对应表)_HTML/Xhtml
  • HTML中的表单Form实现居中效果_HTML/Xhtml
  • HTML+VUE分页实现炫酷物联网大屏功能_HTML/Xhtml

    • 本站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号