Can someone help me with making a menu option selected in HTML? Here is my code:
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon"><img src="images/home.png"></span>
<div class="ca-content">
<h2 class="ca-main">Home</h2>
<h3 class="ca-sub">Home</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon"><img src="images/about.png"></span>
<div class="ca-content">
<h2 class="ca-main">About</h2>
<h3 class="ca-sub">About</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon"><img src="images/photo.png"></span>
<div class="ca-content">
<h2 class="ca-main">contact</h2>
<h3 class="ca-sub">Contact/h3>
</div>
</a>
</li>
</ul>
Here is the corresponding CSS:
.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #ff2020;
-webkit-animation: moveFromBottom 300ms ease;
-moz-animation: moveFromBottom 300ms ease;
-ms-animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
color: #000;
-webkit-animation: smallToBig 300ms ease;
-moz-animation: smallToBig 300ms ease;
-ms-animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #000;
background-color: #ff2020;
-webkit-animation: moveFromBottom 500ms ease;
-moz-animation: moveFromBottom 500ms ease;
-ms-animation: moveFromBottom 500ms ease;
}
$(document).ready(function(){
$("li a").click(function(event){
$('#navigation li').removeClass();
$(this).parent().addClass('active');
event.preventDefault();
});
});
I need to add an active class for when the li element is clicked. I don't want to change the hover effect. Can anyone assist me with this?