manniru
5/8/2018 - 4:53 PM

nav2.html

nav2.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.vertical-menu {
    width: 200px;
}

.vertical-menu a {
    background-color: #eee;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
}

.vertical-menu a:hover {
    background-color: #ccc;
}

.vertical-menu a.active {
    background-color: #4CAF50;
    color: white;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


</head>
<body>

<h1>Vertical Menu</h1>

<div class="vertical-menu">
  <ul>
    <li class="active-class"><a href="#">Home</a></li>
    <li class="active-class"><a href="#" class="active">Link 1</a></li>
    <li class="active-class"><a href="#">Link 2</a></li>
    <li class="active-class"><a href="#">Link 3</a></li>
    <li class="active-class"><a href="#">Link 4</a></li>
  </ul>
</div>

<script>


$(document).ready(function(){
$(".active-class a").click(function() {
  $(".active-class a").removeClass("active");
  $(this).addClass("active");
});
});

</script>

</body>
</html>