媒体查询

Question

当我在平板电脑模式下点击汉堡包图标时，我希望导航栏转换。我尝试将转换添加到＆＃39; nav＆＃39;但似乎没有用。我想在平板电脑模式下为导航栏的背景设置动画。它似乎不会以某种方式起作用。

这是一个JSFiddle https://jsfiddle.net/66ff6d89/1/

＆＃13;

＆＃13;

var x = document.getElementById("bar");
var y = document.getElementById("menu");

x.addEventListener("click", function(event) {

  if (y.className === "menu") {
    event.preventDefault()
    y.className += " responsive";
  } else {
    y.className = "menu";
  }
});

＆＃13;

.icon{
	float: right;
	color: #444473;
	display: none;
}

nav{
	width: 100%;
	background: white;
	height: 60px;
	padding-top: 30px;
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #dedede;
}

nav .logo{
	display: inline-block;
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 2em;
	color: #10C0D6; 
	padding-left: 7%;
}

.menu{
	display: inline-block;
	float: right;
	padding-right: 7%;
	transition: all 1s ease-in-out;
}

.menu li{
	list-style: none;
	display: inline-block; 	
	margin-right: 20px;	
}

.menu li a{
	text-decoration: none;
	color: #444473;
	text-transform: uppercase;
	font-family: roboto;
	font-weight: 500;
	font-size: 0.9em;
}

/*Media queries*/

@media only screen and (max-width: 768px){
	.menu{
		opacity: 0;
	}

	.icon{
		display: block;
	}

	.menu.responsive{
		opacity: 1;
		display: block;
		background: #2B2B2B;
		width: 100%;
		margin-top: 6%;
		
	}

	.menu.responsive li{
		display: block;
		text-align: left;
		margin-bottom: 3%;
		padding-top: 3%;
		padding-left: 10%;

	}

	.menu.responsive li a{
		color: white;
	}
}

＆＃13;

<nav>
  <div><a class="logo">Timer</a>
    <div class="icon"><a href="" id="bar" type="button"><i class="fas fa-bars"></i></a></div>
    <ul class="menu" id="menu">
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Pages</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在您的菜单类中添加transition: all .3s ease会动态添加.responsive课程，因为至少在您在此处发布的代码中，您所做的只是修改宽度，边距和背景颜色。

由于您可能想要隐藏菜单，我已将过渡应用于不透明度属性。正如您所看到的，这也激活了移动菜单的外观。

希望这有帮助！

＆＃13;

＆＃13;

var x = document.getElementById("bar");
var y = document.getElementById("menu");

x.addEventListener("click", function(event) {

  if (y.className === "menu") {
    y.classList.add("responsive");
  } else {
    y.className = "menu";
  }
});

＆＃13;

nav {
  width: 100%;
  background: white;
  height: 60px;
  padding-top: 30px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #dedede;
  transition: all 1s ease-in-out;
  height: max-content;
}

.menu {
  transition: all .2s ease;
  opacity: 0;
}


@media screen and (max-width: 768px) {
  .menu.responsive {
    display: block;
    background: #2B2B2B;
    width: 100%;
    margin-top: 6%;
    opacity: 1;
  }
  .menu.responsive li {
    display: block;
    text-align: left;
    margin-bottom: 3%;
    padding-top: 3%;
    padding-left: 10%;
  }
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<nav>
  <div>
    <a class="logo">Timer</a>
    <div class="icon"><span id="bar" type="button"><i class="fas fa-bars"></i></span></div>
    <ul class="menu" id="menu">
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Pages</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;