html - 导航菜单和转换不起作用

我正在为我的站点添加折叠式导航菜单，由于某种原因，Transform无法正常工作，无法在我的代码编辑器（Espresso）中正常工作，也无法在Safari中正常工作，这是未知属性。不确定我的代码中缺少什么，它可以在Chrome中正常运行。

下面是我的基本代码：

nav {
    background-color: #FDE74C;
    padding:10px;
    padding-left: 0;
    -moz-box-shadow: 0 0 5px #fbfbd4;
    box-shadow: 0 0 5px #fbfbd4;
}

#menuToggle {
  display: block;
  position: relative;
  top: 0;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 33px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
}

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  -webkit-transform-origin: 4px 0px;
  transform-origin: 4px 0px;
  -webkit-transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;
  transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),opacity 0.55s ease;
 }

#menuToggle span:first-child {
-webkit-transform-origin: 0% 0%;
 transform-origin: 0% 0%;

 }

#menuToggle span:nth-last-child(2) {
-webkit-transform-origin:0% 0%;
 transform-origin: 0% 100%;

}

#menuToggle input:checked ~ span {
  opacity: 1;
  -webkit-transform:rotate(45deg) translate(-2px, -1px);
   transform: rotate(45deg) translate(-2px, -1px);
   background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
  transform: rotate(0deg) scale(0.2, 0.2);

  }

#menuToggle input:checked ~ span:nth-last-child(2) {
  opacity: 1;
  -webkit-transform: rotate(-45deg) translate(0, -1px);
   transform: rotate(-45deg) translate(0, -1px);

 }

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  -webkit-transform-origin: 0% 0%;
  transform-orgin: 0% 0%;
  -webkit-transform:translate (-100%,0);
   transform: translate(-100%,0);
   -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
   transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
   }

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul {
-webkit-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
 opacity: 1;
}

最佳答案

      nav {
    	background-color: #FDE74C;
    	padding:10px;
    	padding-left: 0;
    	-moz-box-shadow: 0 0 5px #fbfbd4;
    	box-shadow: 0 0 5px #fbfbd4;
    }

    #menuToggle {
      display: block;
      position: relative;
      top: 0;
      left: 50px;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none;
    }

    #menuToggle input {
      display: block;
      width: 33px;
      height: 28px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
    }

    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #cdcdcd;
      border-radius: 3px;
      z-index: 1;
      -webkit-transform-origin: 4px 0px;
      transform-origin: 4px 0px;
      -webkit-transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;
      transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),opacity 0.55s ease;
     }

    #menuToggle span:first-child {
    -webkit-transform-origin: 0% 0%;
     transform-origin: 0% 0%;

     }

    #menuToggle span:nth-last-child(2) {
    -webkit-transform-origin:0% 0%;
     transform-origin: 0% 100%;

    }



    #menuToggle input:checked ~ span {
      opacity: 1;
      -webkit-transform:rotate(45deg) translate(-2px, -1px);
       transform: rotate(45deg) translate(-2px, -1px);
       background: #232323;
    }



    #menuToggle input:checked ~ span:nth-last-child(3) {
      opacity: 0;
      -webkit-transform: rotate(0deg) scale(0.2, 0.2);
      transform: rotate(0deg) scale(0.2, 0.2);

      }



    #menuToggle input:checked ~ span:nth-last-child(2) {
      opacity: 1;
      -webkit-transform: rotate(-45deg) translate(0, -1px);
       transform: rotate(-45deg) translate(0, -1px);

     }

    #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 125px;
      background: #ededed;
      -webkit-transform-origin: 0% 0%;
      transform-orgin: 0% 0%;
      -webkit-transform:translate (-100%,0);
       transform: translate(-100%,0);
       -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       }

    #menu li {
      padding: 10px 0;
      font-size: 22px;
    }


    #menuToggle input:checked ~ ul {
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
     opacity: 1;
    }
     

    <nav>
    	     <div id="menuToggle">
    		    <input type="checkbox">
    			<span></span>
    			<span></span>
    			<span></span>
    			<ul id="menu">
    				<li> <a href="#"> Home </a> </li>
    				<li> <a href="#"> Breeders </a> </li>
    				<li> <a href="#"> Contact </a> </li>
    			</ul>
    		</div>
    	</nav>
              

      nav {
    	background-color: #FDE74C;
    	padding:10px;
    	padding-left: 0;
    	-moz-box-shadow: 0 0 5px #fbfbd4;
    	box-shadow: 0 0 5px #fbfbd4;
    }

    #menuToggle {
      display: block;
      position: relative;
      top: 0;
      left: 50px;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none;
    }

    #menuToggle input {
      display: block;
      width: 33px;
      height: 28px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
    }

    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #cdcdcd;
      border-radius: 3px;
      z-index: 1;
      -webkit-transform-origin: 4px 0px;
      transform-origin: 4px 0px;
      -webkit-transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;
      transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),opacity 0.55s ease;
     }

    #menuToggle span:first-child {
    -webkit-transform-origin: 0% 0%;
     transform-origin: 0% 0%;

     }

    #menuToggle span:nth-last-child(2) {
    -webkit-transform-origin:0% 0%;
     transform-origin: 0% 100%;

    }



    #menuToggle input:checked ~ span {
      opacity: 1;
      -webkit-transform:rotate(45deg) translate(-2px, -1px);
       transform: rotate(45deg) translate(-2px, -1px);
       background: #232323;
    }



    #menuToggle input:checked ~ span:nth-last-child(3) {
      opacity: 0;
      -webkit-transform: rotate(0deg) scale(0.2, 0.2);
      transform: rotate(0deg) scale(0.2, 0.2);

      }



    #menuToggle input:checked ~ span:nth-last-child(2) {
      opacity: 1;
      -webkit-transform: rotate(-45deg) translate(0, -1px);
       transform: rotate(-45deg) translate(0, -1px);

     }

    #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 125px;
      background: #ededed;
      -webkit-transform-origin: 0% 0%;
      transform-orgin: 0% 0%;
      -webkit-transform:translate (-100%,0);
       transform: translate(-100%,0);
       -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       }

    #menu li {
      padding: 10px 0;
      font-size: 22px;
    }


    #menuToggle input:checked ~ ul {
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
     opacity: 1;
    }
     

    <nav>
    	     <div id="menuToggle">
    		    <input type="checkbox">
    			<span></span>
    			<span></span>
    			<span></span>
    			<ul id="menu">
    				<li> <a href="#"> Home </a> </li>
    				<li> <a href="#"> Breeders </a> </li>
    				<li> <a href="#"> Contact </a> </li>
    			</ul>
    		</div>
    	</nav>
              

      nav {
    	background-color: #FDE74C;
    	padding:10px;
    	padding-left: 0;
    	-moz-box-shadow: 0 0 5px #fbfbd4;
    	box-shadow: 0 0 5px #fbfbd4;
    }

    #menuToggle {
      display: block;
      position: relative;
      top: 0;
      left: 50px;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none;
    }

    #menuToggle input {
      display: block;
      width: 33px;
      height: 28px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
    }

    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #cdcdcd;
      border-radius: 3px;
      z-index: 1;
      -webkit-transform-origin: 4px 0px;
      transform-origin: 4px 0px;
      -webkit-transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;
      transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),opacity 0.55s ease;
     }

    #menuToggle span:first-child {
    -webkit-transform-origin: 0% 0%;
     transform-origin: 0% 0%;

     }

    #menuToggle span:nth-last-child(2) {
    -webkit-transform-origin:0% 0%;
     transform-origin: 0% 100%;

    }



    #menuToggle input:checked ~ span {
      opacity: 1;
      -webkit-transform:rotate(45deg) translate(-2px, -1px);
       transform: rotate(45deg) translate(-2px, -1px);
       background: #232323;
    }



    #menuToggle input:checked ~ span:nth-last-child(3) {
      opacity: 0;
      -webkit-transform: rotate(0deg) scale(0.2, 0.2);
      transform: rotate(0deg) scale(0.2, 0.2);

      }



    #menuToggle input:checked ~ span:nth-last-child(2) {
      opacity: 1;
      -webkit-transform: rotate(-45deg) translate(0, -1px);
       transform: rotate(-45deg) translate(0, -1px);

     }

    #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 125px;
      background: #ededed;
      -webkit-transform-origin: 0% 0%;
      transform-orgin: 0% 0%;
      -webkit-transform:translate (-100%,0);
       transform: translate(-100%,0);
       -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       }

    #menu li {
      padding: 10px 0;
      font-size: 22px;
    }


    #menuToggle input:checked ~ ul {
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
     opacity: 1;
    }
     

    <nav>
    	     <div id="menuToggle">
    		    <input type="checkbox">
    			<span></span>
    			<span></span>
    			<span></span>
    			<ul id="menu">
    				<li> <a href="#"> Home </a> </li>
    				<li> <a href="#"> Breeders </a> </li>
    				<li> <a href="#"> Contact </a> </li>
    			</ul>
    		</div>
    	</nav>
              

      nav {
    	background-color: #FDE74C;
    	padding:10px;
    	padding-left: 0;
    	-moz-box-shadow: 0 0 5px #fbfbd4;
    	box-shadow: 0 0 5px #fbfbd4;
    }

    #menuToggle {
      display: block;
      position: relative;
      top: 0;
      left: 50px;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none;
    }

    #menuToggle input {
      display: block;
      width: 33px;
      height: 28px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
    }

    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #cdcdcd;
      border-radius: 3px;
      z-index: 1;
      -webkit-transform-origin: 4px 0px;
      transform-origin: 4px 0px;
      -webkit-transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;
      transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),opacity 0.55s ease;
     }

    #menuToggle span:first-child {
    -webkit-transform-origin: 0% 0%;
     transform-origin: 0% 0%;

     }

    #menuToggle span:nth-last-child(2) {
    -webkit-transform-origin:0% 0%;
     transform-origin: 0% 100%;

    }



    #menuToggle input:checked ~ span {
      opacity: 1;
      -webkit-transform:rotate(45deg) translate(-2px, -1px);
       transform: rotate(45deg) translate(-2px, -1px);
       background: #232323;
    }



    #menuToggle input:checked ~ span:nth-last-child(3) {
      opacity: 0;
      -webkit-transform: rotate(0deg) scale(0.2, 0.2);
      transform: rotate(0deg) scale(0.2, 0.2);

      }



    #menuToggle input:checked ~ span:nth-last-child(2) {
      opacity: 1;
      -webkit-transform: rotate(-45deg) translate(0, -1px);
       transform: rotate(-45deg) translate(0, -1px);

     }

    #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 125px;
      background: #ededed;
      -webkit-transform-origin: 0% 0%;
      transform-orgin: 0% 0%;
      -webkit-transform:translate (-100%,0);
       transform: translate(-100%,0);
       -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       }

    #menu li {
      padding: 10px 0;
      font-size: 22px;
    }


    #menuToggle input:checked ~ ul {
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
     opacity: 1;
    }
     

    <nav>
    	     <div id="menuToggle">
    		    <input type="checkbox">
    			<span></span>
    			<span></span>
    			<span></span>
    			<ul id="menu">
    				<li> <a href="#"> Home </a> </li>
    				<li> <a href="#"> Breeders </a> </li>
    				<li> <a href="#"> Contact </a> </li>
    			</ul>
    		</div>
    	</nav>