时间戳

首页 > 解决方案 > 未激活但媒体屏幕大小为 600 像素时的菜单按钮位置

css - 未激活但媒体屏幕大小为 600 像素时的菜单按钮位置

问题描述

未激活但媒体屏幕大小为 600 像素时的菜单按钮位置。我有显示我需要它做什么的屏幕截图，我不担心菜单的外观，但是在调整媒体屏幕大小后，我一直遇到菜单按钮不在我想要的位置的问题。

Codepen 演示

我希望菜单按钮在单击它之后的位置，但它不能按我想要的方式工作。

截图：




@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: inline-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: center;
  }
}

在此先感谢您，感谢您的帮助。

标签： csshtmlposition

解决方案

请尝试此代码

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
body {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center; padding:0; margin:0;
}
.imglogo {
	float: inherit;
	width: 250px;
	height: 67px;
	background: url(img/logo.png) no-repeat center;
	display: block;
}

.topnav {
	overflow: hidden;
	background-color: #333;
	box-shadow: 0px 5px 5px grey;
	
}

.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: #ddd;
  color: black;
}

.active {
  background-color: #86cc53;
  color: white;
}
.transbox {
  background-color: #86cc53;
  border-radius: 5px;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: inline-block;
	position: absolute;
	top: 10px;
	right: 10px;
  }
  .topnav.responsive {position: absolute; left:0; right: 0; top:0;}
  .topnav.responsive .icon {
    position: absolute;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="topnav" id="myTopnav">
<i class="imglogo"></i>
	<a href="javascript:void(0);" class="icon" onClick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
  <a href="#home" class="active">Home</a>
  <a href="#news">Services</a>
  <a href="#contact">Contact</a>
  <a href="#about" class="transbox">About</a>
</div>

<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
  <h2>This Site is Under Construction.</h2>
  <p>In need of any computer, networking repair/setup/configuraion or consulting contact my cell leave a message for NICK. CELL:xxx-xxx-xxx</p>
</div>

推荐阅读