当前位置:Gxlcms > css > css实现响应下拉式菜单的代码

css实现响应下拉式菜单的代码

时间:2021-07-01 10:21:17 帮助过:68人阅读

这篇文章分享给大家的内容是关于css实现响应下拉式菜单的代码,内容很有参考价值,希望可以帮到有需要的小伙伴。

一、简介

响应式下拉菜单可在多个移动端显示会有不同的效果。

二、代码如下

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="width=device-width"/>
  6. <title>响应式下拉菜单</title>
  7. <link rel="stylesheet" type="text/css" href="demo020.css" media="screen and (min-width:1024px)"/>
  8. <link rel="stylesheet" type="text/css" href="demo021.css" media="screen and (max-width:1024px)"/>
  9. <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <p class="nav">
  13. <p class="toggle">
  14. <img class="tu" src="shitu2.png"/>
  15. <i id="btn" class="fa fa-bars"></i>
  16. </p>
  17. <p class="bb"></p>
  18. <ul id="menu" class="clearfix">
  19. <li><a href="#">First</a></li>
  20. <li><a href="#">Second</a></li>
  21. <li><a href="#">Third</a></li>
  22. <li><a href="#">Fourth</a></li>
  23. <li><a href="#">Fifth</a></li>
  24. </ul>
  25. </p>
  26. <script type="text/javascript">
  27. var btn=document.getElementById("btn");
  28. var menu=document.getElementById("menu");
  29. btn.onclick=function(){
  30. //alert(1);
  31. if(menu.style.display=="none"){
  32. menu.style.display="block";
  33. }else{
  34. menu.style.display="none";
  35. }
  36. }
  37. window.onresize=function(){
  38. var vw=document.documentElement.clienWidth;
  39. if(vw>640){
  40. menu.style.display="block";
  41. }
  42. }
  43. </script>
  44. </body>
  45. </html>

body{

  1. margin:0;

}
.nav{

  1. width:100%;
  2. background-color:#00316b;
  3. position:relative;

}
ul{

  1. padding:0px;
  2. margin:0px;
  3. width:80%;
  4. margin:0 auto;
  5. background:#00316b;

}
ul>li{

  1. list-style:none;
  2. float:left;

}
ul>li>a{

  1. color:#fff;
  2. text-decoration:none;
  3. display:block;
  4. padding:20px 30px;

}
ul>li:hover{

  1. background-color:red;

}
.clearfix:after{

  1. display:block;
  2. content:"";
  3. height:0px;
  4. visibility:hidden;
  5. clear:both;

}
.clearfix{

  1. zoom:1;

}
.toggle{

  1. text-align:right;
  2. color:#fff;
  3. padding:20px;
  4. font-size:20px;
  5. background:black;
  6. /* background-color:#001r44; */
  7. display:none;
  8. overflow:hidden;

}
.tu{

  1. float:left;

}
.bb{

  1. position:absolute;
  2. background-image:url(shitu2.png);
  3. background-repeat:no-repeat;
  4. background-size:100px;
  5. width:100px;
  6. height:40px;
  7. left:20px;
  8. top:10px;

}

  1. ----------
  2. body{
  3. margin:0;
  4. }
  5. .nav{
  6. width:100%;
  7. background-color:#00316b;
  8. }
  9. ul{
  10. padding:0px;
  11. margin:0px;
  12. width:100%;
  13. margin:0 auto;
  14. background:#00316b;
  15. }
  16. ul>li{
  17. text-align:center;
  18. list-style:none;
  19. /* float:left; */
  20. }
  21. ul>li>a{
  22. color:#fff;
  23. text-decoration:none;
  24. display:block;
  25. padding:20px 30px;
  26. }
  27. ul>li:hover{
  28. background-color:red;
  29. }
  30. .clearfix:after{
  31. display:block;
  32. content:"";
  33. height:0px;
  34. visibility:hidden;
  35. clear:both;
  36. }
  37. .clearfix{
  38. zoom:1;
  39. }
  40. .toggle{
  41. text-align:right;
  42. color:#fff;
  43. padding:20px;
  44. background:yellow;
  45. font-size:20px;
  46. overflow:hidden;
  47. display:block;
  48. }
  49. .tu{
  50. float:left;
  51. width:100px;
  52. }

第三、效果图如下

3189520-5b55ad02aa560_articlex.png

这是视口大于1024px的时候所显示的内容<PC端>
min-width:1024px

4100708583-5b55ae66c058c_articlex.gif

这是视口小于1024px的时候所显示的内容<手机>
max-width:1024px
这是在手机上和iPad上的效果图

2853091635-5b55af9bc72ce_articlex.gif

相关推荐:

css和js如何实现响应式导航菜单

css如何自定义滚动条(代码)

以上就是css实现响应下拉式菜单的代码的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行