Question

我正在尝试使用bootstrap制作自定义菜单动画。我想有三个阶段。首先是悬停时，第二次是聚焦时（按下菜单图标），最后是未聚焦时（再次按下菜单图标）。

菜单：

＆＃13;

#custom-bootstrap-menu.navbar-default .navbar-toggle .bar:nth-of-type(1) {
  display: block;
  width: 3em;
  margin: 0.3em;
  border: 0.1em solid white;
  transition-duration: 600ms;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle .bar:nth-of-type(2) {
  display: block;
  width: 1em;
  margin-left: 2.7em;
  transform: rotate(90deg);
  border: 0.1em solid white;
  transition-duration: 600ms;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle .bar:nth-of-type(3) {
  display: block;
  width: 3em;
  margin: 0.3em;
  border: 0.1em solid white;
  transition-duration: 600ms;
  margin-right:0.5em;
}

CSS animation on hover:
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .bar:nth-of-type(2) {
  margin-left: 1.4em;
}

CSS animation on focus:
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .bar:nth-of-type(2) {
  margin-left: -0.1em;
}

＆＃13;

<nav id="custom-bootstrap-menu" class=" navbar navbar-default  navbar-static-top" role="navigation">
    <div class="navbar-header">
			<button type="button" class="navbar-toggle"   data-toggle="collapse" data-target="#navHeaderCollapse">
				<span class="bar"></span>
				<span class="bar"></span>
				<span class="bar"></span>
			</button>
	</div>
</nav>

＆＃13;

悬停第二个条形图从右侧移动到中间，然后按下菜单时，条形图向左移动。我的问题是，如果再次按下菜单图标，则没有任何事情发生（条形图仍然在左侧），因为它正在聚焦，所以你必须按其他地方来取消菜单重置并重置过程。

我希望再次按下菜单图标后会发生同样的事情，所以如果第二次按下该图标则将其取消对焦（条形图应移到右侧）。

Answer 1

我的解决方案是添加一个“onmouseenter”处理程序来清除按钮的“焦点”状态。您应该将此事件处理程序添加到onload中的按钮，但是它是最简单的形式，请尝试：

<script>
function losefocus(target) {
  target.blur();
}
</script>
<nav id="custom-bootstrap-menu" class=" navbar navbar-default  navbar-static-top" role="navigation">
  <div class="navbar-header">
    <button id="mb" type="button" class="navbar-toggle"   data-toggle="collapse" data-target="#navHeaderCollapse" onmouseenter="losefocus(this)">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
    </button>
  </div>
</nav>

如果您想要一个切换按钮，当前的“悬停”更改会令人困惑。我建议你使用除了bar（2）之外的其他东西移动到中心以指示悬停，因此按钮的聚焦/未聚焦状态总是很明显。举个例子：

 <script>
var isfocused = 0;
function toggle(target) {
  isfocused = (isfocused + 1) % 2;  
  if (isfocused) {
        target.focus(); 
  } else {
        target.blur(); 
  }    
}
</script>
<nav id="custom-bootstrap-menu" class=" navbar navbar-default  navbar-static-top" role="navigation">
  <div class="navbar-header">
    <button id="mb" type="button" class="navbar-toggle"   data-toggle="collapse" data-target="#navHeaderCollapse" onclick="toggle(this)" >
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
    </button>
  </div>
</nav>

：hover CSS更改为此类

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .bar:nth-of-type(2) {
 border: 0.1em solid black;
}

CSS悬停，焦点和＆＃34;无焦点＆＃34;

1 个答案: