Question

嘿，我点击了汉堡图标＆＃39;（在移动设备屏幕上，最多580px ），然后它变成了＆＃39; x＆＃39 ;，我还想添加一个转换到菜单然后打开，任何人都可以帮助我如何实现这一目标吗？

transition: all ease-in-out 0.4s;

我用这个吗？如果是的话，我把它放在哪里？

＆＃13;

$(document).ready(function() {
  $("#burger-container").on('click', function() {
    $(this).toggleClass("open");
  });
});

$(document).ready(function() {
  $("#burger-container").on('click', function() {
    $("header nav ul").toggleClass("open1");
    $("nav").toggleClass("open1");
  });
});

＆＃13;

/***** BASE STYLES *****/

body{
    font-family: Raleway;
    margin: 0;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/************************************/

.wrapper{
    max-width: 1180px;
    margin:  0 auto;
}

h1.logo {
    float: left;
    padding: 0;
    padding-left: 4%;
}

header nav h2{
    height: 0;
    margin: 0;
    text-indent: -10000px;
}

#main-banner, #main-banner img{
    width: 100%; 
}

#main-banner img{
    border-top: 2px dashed #a5053d;
    border-bottom: 4px solid #a5053d;
}

p{
    padding: 0 4%;
    text-align: justify;
    line-height: 170%;
    float: left;
}

h2{
    text-align: center;
    margin: 4px 0 0 0;
}

.bigger{
    font-size: 16.25px;
    font-weight: bold;
}

.paragraph{
    margin-bottom: 4%;
}

.work img{
    padding-right: 1%;
}

.work p{
    margin-bottom: 5%;
    padding: 0 15%;
    text-align: center;
}

.work{
    text-align: center;
}

#burger{
    height: 0;
    width: 0;
}

header{
    padding: 0;
}

nav{
    float: right;
    padding-right: 2%;
}

nav ul{
    display: flex;
}

nav li{ 
   margin: 10px 20px;
   list-style: none;
}

nav li a {
    text-decoration: none;
    color: #666666;
    font-size: 20px;   
}

a:hover {
    color: #a5053d;
    font-weight: bold;
}


/*************FOOTER************/

.links ul {
    list-style: none;
    display: block;
    margin: 0 auto;
    width: 300px;
}

.links ul li {
     display: inline-block;
}

.links ul img {
    margin: 0 4%;
    height: 40px;
    width: auto;
}

footer{
    margin-top:  15px;
}

.bottom{
    background-color: #e8e8e8;
    height: 70px;
    padding-top: 2px;
    margin-top: 150px;
}

li img:hover{
  box-shadow: 0 0 30px #c1c1c1;
    -moz-box-shadow: 0 0 30px #c1c1c1; 
    -webkit-box-shadow: 0 0 30px #c1c1c1; 
    -o-box-shadow: 0 0 30px #c1c1c1; 
  border-radius:100px;
}

/******** BURGER ********/
@media all and (max-width: 580px){

#burger-container{
    margin: 25px 0 0 0;
    width: 50px;
    float: right;
    padding-right: 70px;
}

#burger{
    cursor: pointer;
    display: block;
}

#burger span{
    background: black;
    display: block;
    width: 50px;
    height: 3px;
    margin-bottom: 10px;
    position: relative;
    top: 0;
    transition: all ease-in-out 0.4s;
}

#burger-container.open span:nth-child(2){
    width: 0;
    opacity: 0;
}

#burger-container.open span:nth-child(3){
    transform: rotate(45deg);
    top: -13px;
}

#burger-container.open span:nth-child(1){
    transform: rotate(-45deg);
    top: 13px;
}

}

/***************mobiles*********************/

@media all and (max-width: 580px){
    
nav{
    width: 100%;
    padding-right: 45px;
    background-color: #666666;
    height: 0;
}
    
header nav ul{
    height: 0;
    display: block;
    overflow: visible;
}

header nav ul.open1, nav.open1{
     height: auto;
}
    
header nav ul li{
    width: 100%;
    margin: 20px;
}
    
nav li a, nav ul li{
    color: white;
    text-align: right;
    display: block;
}

header .wrapper{
    width: 100%;
    padding: 0;
}

h1 {
    margin: 20px;
    padding: 0;
}   
    
h1.logo {
padding: 0;
margin: 20px;
}
    
header{
    padding: 0;
}

.paragraph{
   padding: 10px 20px 40px 20px;
}           

.work p{
        padding: 0 0 40px 0;
        margin: 0 20px;
}   
.work h3{
    padding: 0 20px;
}  
    
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="img/heart.png">
  <title>heartcube</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/burger.css">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway" rel="stylesheet">
</head>

<body>

  <header>
    <div class="wrapper">
      <h1 class="logo">Heartcube</h1>

      <!-- ............BURGER............ -->

      <div id="burger-container">
        <div id="burger">
          <span>&nbsp;</span>
          <span>&nbsp;</span>
          <span>&nbsp;</span>
        </div>
      </div>

      <nav>
        <h2>Main Navigation</h2>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#l">Blog</a></li>
        </ul>
      </nav>

  </header>

  <!-- START OF HOMEPAGE CONTENT-->

  <div id="main-banner">
    <img src="http://heartcube.co.uk/img/london.jpg" alt="london banner">
  </div>

  <div class="wrapper">

    <section id="home-menu">

      <h2>Betti Bremm</h2>

      <p class="paragraph"><span class="bigger">A little bit about me.</span> I'm a young and motivated Webdesigner located in West London. My journey into tech started when I was quite young already, I always loved setting up websites and my own homepages, but without coding
        it myself. I've always been fascinated with the internet, it's design and social media. I was hooked and wanted to learn how to build my own site to fit my own specific needs. That curiosity then opened a door that could never be shut. When I
        learned how to build my first website, I realized I found something that gave me the freedom &amp versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for
        detail to write clean, elegant code.</p>

      <div class="work">

        <img src="http://heartcube.co.uk/img/html.png" alt="HTML icon">
        <h3>Hand-Coded HTML</h3>
        <p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>

        <img src="http://heartcube.co.uk/img/css.png" alt="CSS icon">
        <h3>Well-Organized CSS</h3>
        <p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>

        <img src="http://heartcube.co.uk/img/pencil.png" alt="Pencil icon">
        <h3>Ease Converting Designs into Code</h3>
        <p>You can trust me to take a designer's PSD and quickly &amp; accurately convert it into a webpage that is pixel-perfect match.</p>

      </div>

    </section>

  </div>

  <!-- ..END OF HOMEPAGE CONTENT-->
  <div class="bottom">
    <footer>
      <div class="wrapper links">
        <ul>
          <li>
            <a href="mailto:betti94@gmx.de"><img src="http://heartcube.co.uk/img/mail.png" alt="Email"></a>
          </li>
          <li>
            <a href="https://twitter.com/Icanfindafaith"><img src="http://heartcube.co.uk/img/twitter.png" alt="Twitter"></a>
          </li>
          <li>
            <a href="http://fantasydesign.tumblr.com/"> <img src="http://heartcube.co.uk/img/tumblr.png" alt="Tumblrn"></a>
          </li>
          <li>
            <a href="https://www.instagram.com/princessofcakes/"><img src="http://heartcube.co.uk/img/instagram.png" alt="Instagram"></a>
          </li>
          <li>
            <a href="https://uk.linkedin.com/in/bettina-bremm-472314131"> <img src="http://heartcube.co.uk/img/linkedin.png" alt="LinkedIn"></a>
          </li>
        </ul>
      </div>
    </footer>
  </div>

</body>

＆＃13;

此代码的其他链接： Homepage 或在codepen上here

Answer 1

以下是我为启用动画而制作的现有代码段的更改（以及注释）的完整列表：

您无法将transition从0动画为auto或100%。唯一能够执行此操作的库是velocity.js，但它们使用一种黑客来确定它们在动画制作之前渲染的值。为了更好地理解潜在问题read this。
上面链接的文章还将解释为什么我将动画height更改为动画max-height。
#burger元素没有height和width，因此难以使用。（一个人必须完全点击汉堡的线条才能打开它。）
为了计算元素的正确max-height，我选择将菜单包装在包装器（.animator）中，因为它简化了打开时计算高度所需的JavaScript。 LI>
关闭时，容器和内容都有height:0没有意义。你只是过度复杂化动画，让你自己更难理解/调试正在发生的事情。所以我删除了将open1放在孩子身上，我只留在了父母身上。
拥有$(document).ready(){}的多个实例毫无意义。只需将要在该事件上运行的所有代码放在一个单独的包装器中。
一般来说，当页面加载时，您要运行两种类型的代码：
一个。 DOM操作代码 - 放在$(document).ready(){}上 - 首先运行湾绑定到事件代码 - 放在$(window).load(){}上 - 在
之后运行
由于此脚本是“绑定到事件”代码，因此我将其放在$(window).load(){}中。

Updated pen

注意：如果您问自己为什么我没有在答案中包含SO片段并使用您的笔，主要原因是因为您的SO片段不完整，因为您使用了相对链接以下资产：

normalize.css，
main.css，
burger.css，
index.js

添加转换到下拉菜单

1 个答案: