CODEWITHSUNDEEP
csstwitter-bootstrapmenu
Jakub A Suplicki
Jakub A Suplicki

Reputation: 4801

CSS hover, focus and "unfocus"

I am trying to make custom menu animation using bootstrap. I would like to have three stages. First when hovered, second when focused (menu icon pressed) and last when unfocused (menu icon pressed again).

menu:

#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;
}
<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>

On hover second bar is moving to the middle from right, then when the menu is pressed, the bar moves to the left. My problem is that if you press the menu icon again nothing is happening (the bar is still on the left side) since it is being focused, so you have to press somewhere else to unfocus the menu and reset the process.

I would like the same thing to happen after you press the menu icon again, so to unfocus the icon if it is pressed for the second time (bar should move to the right side).

Upvotes: 4

Views: 3922

Answers (1)

Nikkorian
Nikkorian

Reputation: 790

My solution involves adding an "onmouseenter" handler to clear the "focus" state of the button. You should add this event handler to the button in the onload but in it's simplest form, try this:

<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>

If you want a toggling button, the current "hover" change is confusing. May I suggest you use something other than bar(2) moving to the centre to indicate hovering, so the focused/unfocused state of the button is always obvious. As an example:

 <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>

The :hover CSS changes to something like this

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

Upvotes: 3

Related Questions