如何制作带有菜单图标的响应式导航栏

Question

I am trying to make a responsive navigation bar with responsive style, if the size of screen is smaller than 750px then in the navigation bar will appear the menu icon in the middle and when hovering it will display the options in the list, below is my code, and possibly i have overlapped css styling.我正在尝试使用响应式样式制作响应式导航栏，如果屏幕尺寸小于 750px，则导航栏中将出现中间的菜单图标，悬停时它将显示列表中的选项，下面是我的代码，并且可能我重叠了 css 样式。

 .topnav { position: relative; overflow: hidden; background-color: #a2d4c3; margin: 3px 50px 3px 50px; border: 1px solid black; border-radius: 5px; } .topnav a { float: left; text-align: center; padding: 14px 16px; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } @media screen and (max-width: 760px) { .topnav a { float: none; display: block; } } ul { list-style-type: none; margin: 0; padding: 0; } .hidden:hover a { background-color: #dab756; display: block; } .hidden:hover ul a:hover { color: #fff; } .hidden li ul { display: none; } .hidden li { display: block; float: none; } .hidden ul li a { width: auto; min-width: auto; display: block; } .hidden .hidden:hover li a { display: block; } @media screen and (max-width: 750px) { .hidden ul { position: static; display: none; } .hidden li a { width: 100%; } }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link </head> <body> <header id="header"> <div class="topnav"> <ul class="hidden"> <li><a href="#">Menu</a></li> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> </ul> </div> </header> </body> </html>

Answer 1

you need to change classes of your nav with javascript depending on conditions something like given below and then style this changed classes accordingly.您需要根据如下所示的条件使用 javascript 更改导航的类，然后相应地设置更改后的类的样式。

<a href="javascript:void(0);" class="icon" onclick="myFunction()">
  <i class="fa fa-bars"></i>
</a>
    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
           x.className = "topnav";
        }
      }
   </script>

or refere this example 或参考这个例子

Answer 2

Now I think that this snippet is the same as you want...现在我认为这个片段和你想要的一样......

 body { font-family: sans-serif; } * { box-sizing: border-box; } header { background: #181818; height: 200px; padding-top: 40px; } .inner { max-width: 1000px; margin: 0 auto; padding: 0px 20px; position: relative; } .logo { text-decoration: none; color: #777; font-weight: 800; font-size: 30px; line-height: 40px; } h1 { text-align: center; width: 100%; margin-top: 120px; color: #eee; font-weight: 800; font-size: 40px; } nav > ul { float: left; } nav > ul > li { text-align: center; line-height: 40px; margin-left: 70px; } nav > ul li ul li { width: 100%; text-align: left; } nav ul li:hover { cursor: pointer; position: relative; } nav ul li:hover > ul { display: block; } nav ul li:hover > a { color: #777; } nav > ul > li > a { cursor: pointer; display: block; outline: none; width: 100%; text-decoration: none; } nav > ul > li { float: left; } nav a { color: white; } nav > ul li ul { display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 2000; } nav > ul li ul li > a { text-decoration: none; } [type="checkbox"], label { display: none; } @media screen and (max-width: 750px) { nav ul { display: none; } label { display: block; background: #222; width: 40px; height: 40px; cursor: pointer; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } label:after { content: ''; display: block; width: 30px; height: 5px; background: #777; margin: 7px 5px; box-shadow: 0px 10px 0px #777, 0px 20px 0px #777 } [type="checkbox"]:checked ~ ul { display: block; z-index: 9999; position: absolute; right: 20px; left: 20px; } nav a { color: #777; } nav ul li { display: block; float: none; width: 100%; text-align: left; background: #222; text-indent: 20px; } nav > ul > li { margin-left: 0px; } nav > ul li ul li { display: block; float: none; } nav > ul li ul { display: block; position: relative; width: 100%; z-index: 9999; float: none; } h1 { font-size: 26px; } }

 <header> <div class="inner"> <nav> <input type="checkbox" id="nav" /><label for="nav"></label> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> </ul> </nav> </div> </header>

如何制作带有菜单图标的响应式导航栏

问题描述

2 个解决方案

解决方案1
1 2019-02-06 14:08:29

解决方案2
1 已采纳 2019-02-06 20:03:31

如何制作带有菜单图标的响应式导航栏

问题描述

2 个解决方案

解决方案1 1 2019-02-06 14:08:29

解决方案2 1 已采纳 2019-02-06 20:03:31

解决方案1
1 2019-02-06 14:08:29

解决方案2
1 已采纳 2019-02-06 20:03:31