css - 添加过渡到下拉菜单

标签 css menu css-transitions

嘿，当您点击“汉堡图标”(在移动设备屏幕上，最大 580 像素)时，我有一个过渡，然后它变成了一个“x”，我也想添加一个过渡到随后打开的菜单，有人可以帮助我如何实现吗？

transition: all ease-in-out 0.4s;

我用这个吗？如果可以，我应该把它放在哪里？

$(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");
  });
});
/***** 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;
}  
    
    
}
<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>

此代码的其他链接: Homepage 或在代码笔上 here

最佳答案

这是我为启用动画所做的对现有代码段所做更改(和注释)的完整列表:

  1. 您不能为从 0 到 auto 或 100% 的 transition 设置动画。唯一能够做到这一点的库是 velocity.js 但他们使用一种 hack 来确定他们在动画之前呈现的值。更好地理解潜在问题read this .
  2. 上面链接的文章还将解释为什么我将 height 的动画更改为 max-height 的动画。
  3. #burger 元素没有height 和width，因此很难使用。 (必须准确点击汉堡的线条才能打开它)。
  4. 为了计算元素的正确 max-height，我选择将您的菜单包装在包装器 (.animator) 中，因为它简化了需要的 JavaScript打开时计算高度。
  5. 让容器和内容在关闭时都具有 height:0 是没有意义的。你只是让动画过于复杂，让你自己更难理解/调试正在发生的事情。所以我删除了将 open1 放在 child 身上，我只把它留在 parent 身上。
  6. 拥有多个 $(document).ready(){} 实例毫无意义。只需将要在该事件上运行的所有代码放入一个包装器即可。

  7. 一般来说，您希望在页面加载时运行两种类型的代码:
    A。 DOM 操作代码 - 放在 $(document).ready(){} - 首先运行
    b.绑定(bind)到事件代码 - 放置在 $(window).load(){} - 在

    之后运行

    由于此脚本是“绑定(bind)到事件”代码，因此我将其放在 $(window).load(){} 中。

Updated pen .

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

  • normalize.css,
  • main.css,
  • burger.css,
  • index.js

关于css - 添加过渡到下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45390170/

上一篇：html - 是什么导致了两个元素之间的这个空间，我该如何摆脱它？

下一篇：javascript - 当我添加文本时元素改变位置

相关文章：

html - z-index 和汉堡菜单

"top"和 "left"属性的 CSS3 转换不起作用

html - 触发多个 CSS 事件

java - Selenium WebDriver - getCssValue() 方法

javascript - 使用键盘滚动表格

jquery - 调整浏览器大小时的导航菜单宽度

c# - 如何在 WPF 中更改 MouseOver 上的 MenuItem 的背景

css - 从左到右到右到左的反向宽度过渡

html - 无法在 Ruby on Rails 元素中使用 css 类

qt - Qml 菜单弹出延迟

©2024 IT工具网  联系我们