Change font is awesome icon when switching
I'm trying to find a way to change this icon to fa times when my menu switches and then switches back to fa bars when the menu switches back / closes.
I've tried some of the codes that this jsfiddle already has. http://jsfiddle.net/3RBQ4/39/
<nav class="primary_nav">
<label for="show-menu" class="label-show-menu"><i class="fa fa-bars fa-2x"></i></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="index">Home</a></li>
<li><a href="about">About</a></li>
<li>
<a href="services">Services</a>
<!-- <ul>
<li><a href="">Building</a></li>
<li><a href="">Plumbing</a></li>
<li><a href="">Electrician</a></li>
<li><a href="">Roofing</a></li>
</ul> -->
</li>
<li><a href="gallery">Gallery</a></li>
<li><a href="contact">Contact Us</a></li>
<li><a href="quote"><span class="get-quote">Get a Quote!</span></a></li>
</ul>
</nav>
CSS
input[type=checkbox]{
display:none;
}
.label-show-menu {
display: none;
}
#menu {
outline: 1px solid red;
overflow:hidden;
height: auto;
max-height: 0;
transition: max-height 0.5s ease-in-out;
}
#menu.expanded {
background: red;
max-height: 500px;
}
@media (max-width:632px){
.label-show-menu {
display: block;
}
}
Js
$('#show-menu').bind('click', function(e) {
$('.label-show-menu').removeClass('fa fa-bars').addClass('fa fa-times')
$('#menu').toggleClass('expanded');
});
source to share
Another way to do this is to use a hidden checkbox. This label is then used to set the checkbox. Since checkboxes are pseudo-class :checked
, you can use this to style sibling elements when toggling. Go through it.
Here's the HTML, for reference:
<div id="content">
<input type="checkbox" id="toggle">
<label for="toggle">
<i id="bars" class="fa fa-bars fa-fw"></i>
<i id="cross" class="fa fa-times fa-fw"></i>
</label>
<div id="menu">
<ul>
<li>item one</li>
<li>item one</li>
<li>item one</li>
<li>item one</li>
</ul>
</div>
</div>
The first thing we want to do is hide this ugly checkbox! Nobody wants to see it.
#toggle {
display: none;
position: absolute;
top: -100%;
left: -100%;
cursor: pointer;
}
But how can we toggle the checkbox if it is hidden? Easy. Use a label:
#toggle + label {
display: inline-block;
background-color: white;
}
Now it's just a matter of using a pseudo class :checked
.
/* by default, the menu should be hidden */
#menu {
height: 0px;
display: block;
/* removed other styling */
}
/* when the checkbox is checked, hide the bars icon */
#toggle:checked + label i#bars{
display: none;
}
/* and show the cross icon */
#toggle:checked + label i#cross{
display: block;
}
/* and, of course, give the menu a height */
#toggle:checked ~ #menu {
height: 85px;
}
And voila! You have a menu that doesn't use JavaScript. Here a
fiddle
source to share
First, you must target the child element i
. Also, you must change the class based on whether the menu item has a class expanded
.
(i.e. $('#menu.expanded').length
).
$('#show-menu').on('click', function (e) {
$('#menu').toggleClass('expanded');
$('.label-show-menu i').removeClass().addClass(
$('#menu.expanded').length ? 'fa fa-times fa-2x' : 'fa fa-bars fa-2x'
);
});
Also, use .on()
instead .bind()
.
As of jQuery 1.7, the .on () method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind () method is used to bind an event handler directly to elements. The handlers are bound to the currently selected elements in the jQuery object, so those elements must exist at the point where the .bind () call occurs. For more flexible event binding, see the discussion of event delegation in .on () or .delegate (). http://api.jquery.com/bind/
source to share