0
所以...我之前有一个关于菜单栏的问题，它已被正确修复，但我仍然需要帮助（这是我第一次制作自己的网页）我该如何移动导航栏到另一个位置？导航栏应该是在右侧没有离开，这是代码：如何将导航栏移动到另一个位置
document.getElementById('menu').addEventListener("click", function() {
document.getElementById('header').classList.toggle('nav-is-open');
});html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table;
}
body {
background-image: url("https://cdn.shopify.com/s/files/1/0862/7604/files/Sugar_Paper-Wedding_Agenda-Blog-2_1024x1024.jpg?v=1487113518")
}
body {
background-size: cover;
}
.my-block {
text-align: center;
display: table-cell;
vertical-align: middle;
}
h1 {
font-family: raleway;
letter-spacing: 3px;
color: Salmon;
}
h4 {
font-family: raleway;
font-weight: 100;
letter-spacing: 1.5px;
color: DarkGray;
line-height: 200%
}
button {
font-family: raleway;
color: salmon;
letter-spacing: 2px;
}
.button {
background-color: darksalmon;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border: 2px solid #E9967A;
margin: 10px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: transparent;
color: black;
border: 2px solid #FA8072;
}
.square {
border: solid 21px #fffff;
width: 30px;
height: 30px;
}
span {
font-family: raleway;
font-weight: 300;
}
li {
font-family: raleway;
}
text {
font-family: montserrat;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0px;
z-index: 10;
}
header.non-fixed {
position: absolute;
}
header .header-inner {
padding: 0px 40px;
height: 0;
margin-top: 60px;
margin-bottom: 60px;
}
header .header-inner.wrapper {
padding: 0;
}
#menu {
position: relative;
z-index: 10;
}
.open-nav {
display: block;
height: 30px;
float: right;
position: relative;
z-index: 10;
margin-left: 20px;
}
.open-nav .hamburger {
display: inline-block;
width: 22px;
height: 2px;
background-color: darksalmon;
position: relative;
top: -3px;
transition: background 0.4s ease;
}
.open-nav .hamburger:before,
.open-nav .hamburger:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: darksalmon;
right: 0;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform 0.4s, background 0.4s ease, right .2s ease;
-webkit-transition: -webkit-transform 0.4s ease, background 0.4s, right .2s ease;
-moz-transition: -moz-transform 0.4s, background 0.4s ease, right .2s ease;
-o-transition: -o-transform 0.4s, background 0.4s ease, right .2s ease;
-ms-transition: -ms-transform 0.4s, background 0.4s ease, right .2s ease;
}
.open-nav .hamburger:before {
right: 2px;
-webkit-transform: translateY(-6px) rotate(0deg);
-moz-transform: translateY(-6px) rotate(0deg);
-ms-transform: translateY(-6px) rotate(0deg);
-o-transform: translateY(-6px) rotate(0deg);
transform: translateY(-6px) rotate(0deg);
}
.open-nav .hamburger:after {
right: 5px;
-webkit-transform: translateY(6px) rotate(0deg);
-moz-transform: translateY(6px) rotate(0deg);
-ms-transform: translateY(6px) rotate(0deg);
-o-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.open-nav:hover .hamburger:before,
.open-nav:hover .hamburger:after {
right: 0px;
}
.open-nav .text {
width: 65px;
text-align: right;
display: inline-block;
font-family: 'raleway';
font-weight: 700;
font-size: 14px;
line-height: 30px;
text-transform: uppercase;
color: darksalmon;
letter-spacing: 0.12em;
transition: width 0.4s ease, opacity 0.2s ease 0.3s, color 0.4s;
}
/* open nav state */
header.nav-is-open #menu .open-nav .hamburger {
background-color: transparent;
transition: background 0.1s ease;
}
header.nav-is-open #menu .open-nav .hamburger:before {
width: 70%;
right: 0px;
-webkit-transform: translateY(0) rotate(45deg);
-moz-transform: translateY(0) rotate(45deg);
-ms-transform: translateY(0) rotate(45deg);
-o-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .hamburger:after {
width: 70%;
right: 0px;
-webkit-transform: translateY(0) rotate(-45deg);
-moz-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
-o-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .text {
transition: width 0.4s ease, opacity 0.2s ease;
width: 0px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
nav#main-nav {
float: left;
visibility: hidden;
}
header.nav-is-open #menu nav#main-nav {
visibility: visible;
}
nav#main-nav ul {
list-style: none;
text-align: center;
margin: 0 auto;
position: relative;
z-index: 10;
}
nav#main-nav ul>li {
margin: 0 0 0 20px;
padding: 0;
display: inline-block;
position: relative;
transition: top 0.3s ease 0.4s, opacity 0.3s ease;
top: -5px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
#menu {
position: relative;
z-index: 10;
}
.open-nav {
display: block;
height: 30px;
float: right;
position: relative;
z-index: 10;
margin-left: 20px;
}
.open-nav .hamburger {
display: inline-block;
width: 22px;
height: 2px;
background-color: #0d0d0d;
position: relative;
top: -3px;
transition: background 0.4s ease;
}
.open-nav .hamburger:before,
.open-nav .hamburger:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #0d0d0d;
right: 0;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform 0.4s, background 0.4s ease, right .2s ease;
-webkit-transition: -webkit-transform 0.4s ease, background 0.4s, right .2s ease;
-moz-transition: -moz-transform 0.4s, background 0.4s ease, right .2s ease;
-o-transition: -o-transform 0.4s, background 0.4s ease, right .2s ease;
-ms-transition: -ms-transform 0.4s, background 0.4s ease, right .2s ease;
}
.open-nav .hamburger:before {
right: 2px;
-webkit-transform: translateY(-6px) rotate(0deg);
-moz-transform: translateY(-6px) rotate(0deg);
-ms-transform: translateY(-6px) rotate(0deg);
-o-transform: translateY(-6px) rotate(0deg);
transform: translateY(-6px) rotate(0deg);
}
.open-nav .hamburger:after {
right: 5px;
-webkit-transform: translateY(6px) rotate(0deg);
-moz-transform: translateY(6px) rotate(0deg);
-ms-transform: translateY(6px) rotate(0deg);
-o-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.open-nav:hover .hamburger:before,
.open-nav:hover .hamburger:after {
right: 0px;
}
.open-nav .text {
width: 65px;
text-align: right;
display: inline-block;
font-family: 'raleway';
font-weight: 700;
font-size: 14px;
line-height: 30px;
text-transform: uppercase;
color: #0d0d0d;
letter-spacing: 0.12em;
transition: width 0.4s ease, opacity 0.2s ease 0.3s, color 0.4s;
}
/* open nav state */
header.nav-is-open #menu .open-nav .hamburger {
background-color: transparent;
transition: background 0.1s ease;
}
header.nav-is-open #menu .open-nav .hamburger:before {
width: 70%;
right: 0px;
-webkit-transform: translateY(0) rotate(45deg);
-moz-transform: translateY(0) rotate(45deg);
-ms-transform: translateY(0) rotate(45deg);
-o-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .hamburger:after {
width: 70%;
right: 0px;
-webkit-transform: translateY(0) rotate(-45deg);
-moz-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
-o-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .text {
transition: width 0.4s ease, opacity 0.2s ease;
width: 0px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
nav#main-nav {
float: left;
visibility: hidden;
}
header.nav-is-open #menu nav#main-nav {
visibility: visible;
}
nav#main-nav ul {
list-style: none;
text-align: center;
margin: 0 auto;
position: relative;
z-index: 10;
}
nav#main-nav ul>li {
margin: 0 0 0 20px;
padding: 0;
display: inline-block;
position: relative;
transition: top 0.3s ease 0.4s, opacity 0.3s ease;
top: -5px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
nav#main-nav ul>li:first-child {
margin: 0;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(2n) {
transition: top 0.3s ease 0.5s, opacity 0.3s ease 0.5s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(3n) {
transition: top 0.3s ease 0.6s, opacity 0.3s ease 0.6s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(4n) {
transition: top 0.3s ease 0.7s, opacity 0.3s ease 0.7s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(5n) {
transition: top 0.3s ease 0.8s, opacity 0.3s ease 0.8s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(6n) {
transition: top 0.3s ease 0.9s, opacity 0.3s ease 0.9s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(7n) {
transition: top 0.3s ease 1.0s, opacity 0.3s ease 1.0s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(8n) {
transition: top 0.3s ease 1.1s, opacity 0.3s ease 1.1s;
}
header.nav-is-open #menu nav#main-nav ul>li {
top: 0;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
transition: top 0.3s ease 0.4s, opacity 0.3s ease 0.4s;
}
nav#main-nav ul li>a {
display: inline-block;
font-family: 'raleway';
font-weight: 700;
font-size: 14px;
line-height: 30px;
text-transform: uppercase;
color: #0d0d0d;
letter-spacing: 0.12em;
transition: all 100ms ease;
}
nav#main-nav>ul>li:hover>a,
nav#main-nav>ul>li.current-menu-item>a {
color: #ea4452 !important;
}
/* submenu */
nav#main-nav ul li>ul.submenu {
position: absolute;
top: 20px;
right: -20px;
width: 240px;
padding-top: 20px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility: hidden;
transition: all 400ms ease;
}
nav#main-nav ul li:hover>ul.submenu {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility: visible;
top: 30px;
transition: all 400ms ease;
}
nav#main-nav ul li>ul.submenu>li {
margin: 0;
padding: 2px 20px 2px 20px;
display: block;
position: relative;
text-align: right;
background: #0d0d0d;
}
nav#main-nav ul li>ul.submenu>li:first-child {
padding-top: 15px;
}
nav#main-nav ul li>ul.submenu>li:last-child {
padding-bottom: 15px;
}
nav#main-nav ul li>ul.submenu>li a {
color: #ffffff;
font-weight: 400;
font-size: 13px;
line-height: 18px;
opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
nav#main-nav ul li>ul.submenu>li a em,
nav#main-nav ul li>ul.submenu>li a i {
font-size: 0.9em;
text-transform: none;
letter-spacing: 0.05em;
}
nav#main-nav ul li>ul.submenu>li a:hover,
nav#main-nav ul li>ul.submenu>li.current-menu-item>a {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=7-100)";
}
/* menu color switch */
header:not(.hero-invisible) .menu-light .open-nav .text {
color: #ffffff;
}
header:not(.hero-invisible) .menu-light .open-nav .hamburger,
header:not(.hero-invisible) .menu-light .open-nav .hamburger:before,
header:not(.hero-invisible) .menu-light .open-nav .hamburger:after {
background-color: #ffffff;
}
.menu-light nav#main-nav>ul>li>a {
color: #ffffff;
}
header.nav-is-open:not(.header-transparent) .menu-light nav#main-nav>ul>li>a {
color: #0d0d0d;
}
header.header-open:not(.header-transparent) .menu-light nav#main-nav>ul>li>a {
color: #0d0d0d;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .text {
color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:before {
background-color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:after {
background-color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:before {
background-color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:after {
background-color: #ffffff;
}
header.hero-invisible #menu .open-nav .text {
color: #0d0d0d !important;
}
header.hero-invisible #menu .open-nav .hamburger,
header.hero-invisible #menu .open-nav .hamburger:before,
header.hero-invisible #menu .open-nav .hamburger:after {
background-color: #0d0d0d !important;
}
header.nav-is-open #menu .open-nav .hamburger {
background-color: transparent !important;
}
header.hero-invisible .menu-light nav#main-nav>ul>li>a {
color: #0d0d0d;
}
/* header-open on page load */
header.header-open #menu .open-nav {
display: none;
}
header.header-open #menu nav#main-nav {
visibility: visible;
}
header.header-open nav#main-nav ul>li {
transition: none;
top: 0px;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}<!DOCTYPE html>
<html>
<head>
<title>Where is my item?</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- HEADER -->
<header id="header">
<div class="header-inner clearfix">
<div id="menu" class="right-float clearfix">
<a href="#" class="open-nav"><span class="hamburger"></span><span class="text">Menu</span></a>
<nav id="main-nav">
<ul>
<li class="current-menu-item"><a href="#">Home</a>
<li><a href="about.html">About Losta</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">EN </a>|<a href="index-masonry - copy.html">TH</a></li>
</ul>
</nav>
</div>
<!-- END .header-inner -->
</header>
<!-- HEADER -->
<body>
<div class="my-block">
<h1>WHERE IS MY ITEM?</h1>
<h4>Find your item easily--without GPS tiles!</h4>
<button class="button">Sign Up</button>
</div>
</body>
</html>我没有任何想法有什么不对的地方，非常感谢您的帮助！
PLOYPITI
我不明白你的问题。片段显示页面右侧的菜单项，而不是左侧。所以它看起来正确显示？ – Rubenxfd
您是否需要右上方的菜单？ –
@Rubenxfd对不清楚的问题，您需要先点击汉堡包菜单图标，这样导航栏才会出现，导航栏位于左侧。 – PL0YP1T1