javascript - 如何将导航栏移动到另一个位置

标签 javascript html css menu navigationbar

所以...我之前有一个关于菜单栏的问题并且它被正确修复，但我仍然需要帮助(这是我第一次制作自己的网页)如何将导航栏移动到另一个位置？导航栏应该在右边而不是左边，这是代码:

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>

我不知道它有什么问题，非常感谢您的帮助!

工作机会

最佳答案 

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 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>

 
    <!-- 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>

如果您需要将菜单放在最右上角，那么这个就可以了。

关于javascript - 如何将导航栏移动到另一个位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44700298/

上一篇：javascript - 继承另一个div的颜色？

下一篇：html - 包装图像位于右侧 100% 高度不重绘

相关文章：

css - 在 IE 中下拉菜单填充

css - 在呈现网页之前等待字体加载

javascript - TypeScript:如何无错误地访问 onChange 事件数据？ (对象可能是 'null' )

javascript - 字符串拆分映射组合的时间复杂度

javascript - 如何在浏览器上缓存视频并在每次播放视频时使用缓存版本

html - 使用css限制屏幕大小

javascript - JS 和 jQuery 事件监听器在页面加载时不起作用

javascript - React.js，在哪里放置谷歌地图API查询？

javascript - 如何在我创建的原始框旁边创建一个新框？

html - 如何在CSS3中放置前层

©2024 IT工具网  联系我们