单击响应菜单时导航按钮移动

时间：2019-02-20 22:09:11

标签： javascript html css

下面是一个导航栏，其左侧带有徽标（主页按钮），右侧带有呼叫按钮和菜单下拉按钮。单击菜单按钮并打开下拉菜单后，呼叫按钮将移至菜单按钮顶部的右侧，整个导航栏仅变成1个按钮。是什么原因导致这种转变？

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
body {
   position: relative;
   height: 100vh;
   margin: 0px;
   background-color: #e6e6e6e6;
   color: #444;
   font: .9em Arial, sans-serif;
 }

 .topnav {
   overflow: hidden;
   background-color: #185b9b;
   position: fixed;
   top: 0;
   width: 100%;
 }

 .topnav a {
   float: left;
   display: block;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
 }

 .topnav a:hover {
   background-color: #2672b2;
   color: white;
 }

 .active {
   background-color: #185b9b;
   color: white;
 }

 .topnav .icon {
   display: none;
 }

 @media screen and (max-width: 600px) {
   .topnav a:not(:first-child) {
     display: none;
   }
   .topnav a.icon {
     float: right;
     display: block;
   }
 }

 @media screen and (max-width: 600px) {
   .topnav.responsive {
     position: relative;
   }
   .topnav.responsive .icon {
     position: absolute;
     right: 0;
     top: 0;
   }
   .topnav.responsive a {
     float: none;
     display: block;
     text-align: left;
   }
 }

 .main {
   padding: 16px;
   margin-top: 30px;
   height: 100%;
 }

 .wrapper {
   box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
   border-radius: 5px;
   overflow: hidden;
   margin-bottom: 20px;
   background-color: white;
 }

 #one {
   float: left;
   margin: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 130px;
   width: 200px;
   height: 100%;
 }

 #one img {
   max-height: 25px;
   max-width: 160px;
 }

 #two {
   overflow: hidden;
   margin: 10px;
   min-height: 130px;
 }

 @media screen and (max-width: 910px) {
   #one {
     float: none;
     margin-right: 10;
     width: auto;
     border: 0;
   }
 }
<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  </head>

  <body>

    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Logo Name</a>
      <a href="#contact">Contact Us</a>
      <a href="#news">Download</a>
      
      
  
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
  
  <a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
  </a>
    </div>

    <div class="main">

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

    </div>

  </body>

</html>

2 个答案:

答案 0 :(得分：0)

我发现您在媒体查询中使用position: absolute 

 @media screen and (max-width: 600px) {
   .topnav.responsive .icon {
     position: absolute;
     right: 0;
     top: 0;
   }

此解决方案没有position: absolute

我从css中删除了以上内容，我输入了.topnav 

.topnav {
   display: flex;
   justify-content: space-between;
}

并将菜单链接和图标都放在div中。看看上面的代码。

希望对您有帮助。

 body {
   position: relative;
   height: 100vh;
   margin: 0px;
   background-color: #e6e6e6e6;
   color: #444;
   font: .9em Arial, sans-serif;
 }

 .topnav {
   overflow: hidden;
   background-color: #185b9b;
   position: fixed;
   top: 0;
   width: 100%;
     display: flex;
   justify-content: space-between;
 }

 .topnav a {
   float: left;
   display: block;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
 }

 .topnav a:hover {
   background-color: #2672b2;
   color: white;
 }

 .active {
   background-color: #185b9b;
   color: white;
 }

 .topnav .icon {
   display: none;
 }

.menu-icons {
  display: flex;
  height:48px;
}

 @media screen and (max-width: 600px) {
   .topnav a:not(:first-child) {
     display: none;
   }
   .topnav a.icon {
     float: right;
     display: block;
   }
 }

 @media screen and (max-width: 600px) {
   .topnav.responsive {
     position: relative;
   }
   .topnav.responsive a {
     float: none;
     display: block;
     text-align: left;
   }
 }

 .main {
   padding: 16px;
   margin-top: 30px;
   height: 100%;
 }

 .wrapper {
   box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
   border-radius: 5px;
   overflow: hidden;
   margin-bottom: 20px;
   background-color: white;
 }

 #one {
   float: left;
   margin: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 130px;
   width: 200px;
   height: 100%;
 }

 #one img {
   max-height: 25px;
   max-width: 160px;
 }

 #two {
   overflow: hidden;
   margin: 10px;
   min-height: 130px;
 }

 @media screen and (max-width: 910px) {
   #one {
     float: none;
     margin-right: 10;
     width: auto;
     border: 0;
   }
 }
<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  </head>

  <body>

    <div class="topnav" id="myTopnav">
      <div>
      <a href="#home" class="active">Logo Name</a>
      <a href="#contact">Contact Us</a>
      <a href="#news">Download</a>
      </div>
     <div class="menu-icons"> 
    <a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
  </a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
      </div>

    </div>

    <div class="main">

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

    </div>

    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
          x.className = "topnav";
        }
      }

    </script>

  </body>

</html>

`

答案 1 :(得分：0)

条形图标和电话图标都使用同一类，因此它们都被分配了相同的定位属性。将它们设置为单独的类，以便它们可以保持自己的唯一位置而不是重叠。

body {
     position: relative;
     height: 100vh;
     margin: 0px;
     background-color: #e6e6e6e6;
     color: #444;
     font: .9em Arial, sans-serif;
}

.topnav {
     overflow: hidden;
     background-color: #185b9b;
     position: fixed;
     top: 0;
     width: 100%;
}

.topnav a {
     float: left;
     display: block;
     color: #f2f2f2;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
}

.topnav a:hover {
     background-color: #2672b2;
     color: white;
}

.active {
     background-color: #185b9b;
     color: white;
}

.topnav .iconBars, .topnav .iconPhone {
     display: none;
}

@media screen and (max-width: 600px) {
     .topnav a:not(:first-child) {
         display: none;
     }
     .topnav a.iconBars, .topnav a.iconPhone {
         float: right;
         display: block;
     }
}

@media screen and (max-width: 600px) {
     .topnav.responsive {
         position: relative;
     }
     .topnav.responsive .iconBars {
         position: absolute;
         right: 0;
         top: 0;
     }
     .topnav.responsive .iconPhone {
         position: absolute;
         right: 47px;
         top: 0;
     }
     .topnav.responsive a {
         float: none;
         display: block;
         text-align: left;
     }
}

.main {
     padding: 16px;
     margin-top: 30px;
     height: 100%;
}

.wrapper {
     box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
     border-radius: 5px;
     overflow: hidden;
     margin-bottom: 20px;
     background-color: white;
}

#one {
     float: left;
     margin: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 130px;
     width: 200px;
     height: 100%;
}

#one img {
     max-height: 25px;
     max-width: 160px;
}

#two {
     overflow: hidden;
     margin: 10px;
     min-height: 130px;
}

@media screen and (max-width: 910px) {
     #one {
         float: none;
         margin-right: 10;
         width: auto;
         border: 0;
     }
}
<!DOCTYPE html>
    <html>
	    <head>
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
	    <link rel="stylesheet" type="text/css" href="./style.css">
	    </head>

	    <body>

	    <div class="topnav" id="myTopnav">
	      <a href="#home" class="active">Logo Name</a>
	      <a href="#contact">Contact Us</a>
	      <a href="#news">Download</a>
	      
	      
	  
	  <a href="javascript:void(0);" class="iconBars" onclick="myFunction()">
	    <i class="fa fa-bars"></i>
	  </a>
	  
	  <a href="tel:800-922-0204" class="iconPhone">
	<i class="fas fa-phone"></i>
	  </a>
	    </div>

	    <div class="main">

	      <div class="wrapper">
	        <div id="one">

	          <img src="http://jsfiddle.net/img/logo.png" />
	        </div>
	        <div id="two">
	          <h2>LOREM IPSUM</h2>
	          <br>
	          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
	            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
	          <br>
	          <p>
	            <p>
	              https://google.com/
	            </p>
	        </div>
	      </div>

	      <div class="wrapper">
	        <div id="one">

	          <img src="http://jsfiddle.net/img/logo.png" />
	        </div>
	        <div id="two">
	          <h2>LOREM IPSUM</h2>
	          <br>
	          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
	            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
	          <br>
	          <p>
	            <p>
	              https://google.com/
	            </p>
	        </div>
	      </div>

	      <div class="wrapper">
	        <div id="one">

	          <img src="http://jsfiddle.net/img/logo.png" />
	        </div>
	        <div id="two">
	          <h2>LOREM IPSUM</h2>
	          <br>
	          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
	            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
	          <br>
	          <p>
	            <p>
	              https://google.com/
	            </p>
	        </div>
	      </div>

	      <div class="wrapper">
	        <div id="one">

	          <img src="http://jsfiddle.net/img/logo.png" />
	        </div>
	        <div id="two">
	          <h2>LOREM IPSUM</h2>
	          <br>
	          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
	            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
	          <br>
	          <p>
	            <p>
	              https://google.com/
	            </p>
	        </div>
	      </div>

	    </div>

	    <script>
	      function myFunction() {
	        var x = document.getElementById("myTopnav");
	        if (x.className === "topnav") {
	          x.className += " responsive";
	        } else {
	          x.className = "topnav";
	        }
	      }

	    </script>

	  </body>

	</html>

相关问题
最新问题