时间戳

首页 > 解决方案 > 需要帮助将汉堡菜单向右移动

html - 需要帮助将汉堡菜单向右移动

问题描述

所以我打开的菜单/汉堡包图标一直显示在导航的标志下，我不知道如何让它根据桌面和移动设备上标题菜单最右侧的最佳实践显示它实际应该在的位置而不做对：-220 或其他。一定有更好的方法。

*,
*::before,
*::after {
  margin:0;
  padding:0;
  box-sizing: inherit;

}

html {
  font-size:18px;
  box-sizing: border-box;
}

a {text-decoration: none;}

 h1 {
font-size:48px;
font-weight:200;
font-family: 'Cormorant', 'Garamond', sans-serif;


}


.main-message p {
font-weight:400;
font-family: 'Montserrat', sans-serif;


}

.nav-list, .nav-item a{
  font-size:13px;
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  color:white;
  text-decoration: none;

}

li {
  list-style:none;
}

img {width:100%;
max-width:100%;
height:auto;
}

 section {
  padding:5rem 0;
}


.mobile-open {
  width:26px
}



.nav-list{
  width:20px;
}

header {
  width=100%;
height:5rem;
position:absolute;
top:90;
left:200;
z-index: 1;}
}



nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding:1rem 0;
border-bottom: none;
}






container {
  width: 100%;
  max-width: 98rem;
  margin:0 auto;
  padding: 0 1.5rem;
}

.nav-brand {width:14rem;}

.mobile-open {
cursor:pointer;


}





.nav-list{width:25rem;
  height:100vh;
      background-color:#D64C31;
  position:fixed;
  top:0;
  right:-26rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
  z-index:1500;
  transition: all 650ms ease-in-out;

}

.nav-list.active {
  right:0;
}

.close {position:absolute;}

.nav-list img {width:1.5rem;
  height:1.5rem



}

.mobile-close  {
  position: absolute;
  top:1rem;
  left:1.5rem;
}

.nav-item {
  margin: 1.5rem;
  color:white;

}

.nav-link {
  color:white;
  text-transform: uppercase;
}


.nav-list.active {
  right:0;
}



.close {
  position:absolute;
  top:1rem;
  bottom: 1.5rem;
}

.open {
  position:absolute;
  top:1rem;
  bottom: 1.5rem;

  right:-220px;
}
*,
*::before,
*::after {
  margin:0;
  padding:0;
  box-sizing: inherit;

}

html {
  font-size:18px;
  box-sizing: border-box;
}

a {text-decoration: none;}

 h1 {
font-size:48px;
font-weight:200;
font-family: 'Cormorant', 'Garamond', sans-serif;


}


.main-message p {
font-weight:400;
font-family: 'Montserrat', sans-serif;


}

.nav-list, .nav-item a{
  font-size:13px;
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  color:white;
  text-decoration: none;

}

li {
  list-style:none;
}

img {width:100%;
max-width:100%;
height:auto;
}

 section {
  padding:5rem 0;
}


.mobile-open {
  width:26px
}



.nav-list{
  width:20px;
}

header {
  width=100%;
height:5rem;
position:absolute;
top:90;
left:200;
z-index: 1;}
}



nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding:1rem 0;
border-bottom: none;
}






container {
  width: 100%;
  max-width: 98rem;
  margin:0 auto;
  padding: 0 1.5rem;
}

.nav-brand {width:14rem;}

.mobile-open {
cursor:pointer;


}





.nav-list{width:25rem;
  height:100vh;
      background-color:#D64C31;
  position:fixed;
  top:0;
  right:-26rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
  z-index:1500;
  transition: all 650ms ease-in-out;

}

.nav-list.active {
  right:0;
}

.close {position:absolute;}

.nav-list img {width:1.5rem;
  height:1.5rem



}

.mobile-close  {
  position: absolute;
  top:1rem;
  left:1.5rem;
}

.nav-item {
  margin: 1.5rem;
  color:white;

}

.nav-link {
  color:white;
  text-transform: uppercase;
}


.nav-list.active {
  right:0;
}



.close {
  position:absolute;
  top:1rem;
  bottom: 1.5rem;
}

.open {
  position:absolute;
  top:1rem;
  bottom: 1.5rem;

  right:-220px;
}
<!doctype html>
<!doctype html>
<html lang='en'>
<head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scale=no, initial-scale=1.0,
  maximum-scale=1.0, minimum-scale=1.0">
  <title> Juno College </title>
  <meta-http-equiv="X-UA-COMPATIBLE" content="ie-edge">
  <!--GGL FONTS-->
  <link herf="https://fonts.google.com/specimen/Cormorant+Garamond"
  rel="stylesheet">

  <link href="https://fonts.google.com/specimen/Montserrat"
  rel=stylesheet">

  <link rel="stylesheet" link href="style.css">

</head>

<body>
  <header>

<div class="container">

  <nav>
    <div class="nav-brand">
      <a href="site.html">
         <img src="assets/juno-logo.png"  alt="">
      </a>
    </div>

<div class="mobile-open open">
      <i class="mobile-open">
  <img src="assets/mobile-open.png"> </i>
</div>


<ul class="nav-list">
  <div-class="mobile-close close">
  <i class="mobile-close">
    <img src="assets/mobile-close.png"> </i>

  <li class="nav-item">
    <a href="#" class="nav-link">Course</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">About</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Alumni</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Blog</a>
  </li>
</ul>
</nav>
</div>
</div>
</header>

<section class="dog-main">
<div class="container">
  <div class="main-message">
    <h1> Tech challenge</h1>
    <p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales neque sodales ut etiam sit amet. Tristique risus nec feugiat in fermentum posuere urna. Nascetur ridiculus mus mauris vitae ultricies leo integer. Augue interdum velit euismod in pellentesque massa placerat. Vitae suscipit tellus mauris a diam maecenas sed enim. Egestas purus viverra accumsan in nisl nisi. At volutpat diam ut venenatis tellus in metus vulputate. In massa tempor nec feugiat. Curabitur gravida Nascetur ridiculus mus mauris vitae ultricies leo integer. Augue interdum velit euismod in pellentesque massa placerat. Vitae suscipit tellus mauris a diam maecenas sed enim. Egestas purus viverra accumsan in nisl nisi. At volutpat diam ut venenatis tellus in metus vulputate. In massa tempor nec feugiat. Curabitur gravida arcu ac tortor dignissim. Tristique nulla aliquet enim tortor at auctor. Quam id leo in vitae turpis massa. Tellus mauris a diam maecenas sed enim. </p>
    <div class="cta">
      <a href="#" class="btn"> Begin Your Journey at Juno </a>


</div>
<script type="text/javascript" src="scripts.js" ></script>
</section>

</body>
</html>

标签： htmlcsswebresponsive

解决方案

您的视口元标记存在一些问题：

<meta name="viewport" content="width=device-width, user-scale=no, initial-scale=1.0,
  maximum-scale=1.0, minimum-scale=1.0">

在上面的代码片段中，您有user-scale=no. 这应该是user-scalable=no，但不建议这样做，因为它限制了缩放的能力，这是一个可访问性问题。

也maximum-scale=1.0, minimum-scale=1.0因缩放原因而皱眉。

首选的视口元标记是：

<meta name="viewport" content="width=device-width, initial-scale=1">

有关视口元标记的更多信息，请参阅此内容：https ://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

您也不会在 CSS 中显示任何媒体查询。

推荐阅读