Description:- In today’s example I’m gonna show you how to make vertical drop-down navigation menu. You can use it in your site or in your admin dashboard like I did. So for this we need to download jquery file so go to http://code.jquery.com/jquery-1.11.3.min.js and download it and save it in your folder.
So, here is the finish product’s images in first image you can see only 5 menus with down arrow but after click on courses link it expands and the sub menus of courses will appear with the arrow facing to the upper direction.
Code is below just change the names of list items and use it or play with the colors or do whatever you want to do peeps.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(e) {
$(".course-sub").click(function(e){
$(this).toggleClass("roll");
});
});
</script>
<style>
*{padding:0px; margin:0px;}
.nav{width:250px; background:rgba(51,51,51,1);}
.nav a{display:block;padding:10px 0px 10px 20px; text-decoration:none; border-bottom:1px dotted gray;color:#fff; letter-spacing:.2em; text-transform:uppercase; transition:all 0.3s linear;}
.nav a:hover{background:#dd0909;}
.nav li{list-style:none;}
.nav-ul ul{display:none;}
.nav-ul li.roll ul{display:block;}
.arrow:after{content:'\203A'; float:right; margin-right:20px; transform:rotate(90deg); font-size:20px;}
.nav li.tap .arrow:after{content:'\2039';}
.nav-ul ul a:before{content:'\203A'; margin-right:20px;}
</style>
</head>
<body>
<nav class="nav">
<ul class="nav-ul">
<li><a href="#">Home</a></li>
<li class="course-sub"><a href="#">Courses<span class="arrow"></span></a>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
</html>
*Note:- Don’t forget to include jQuery file.
26.836946
75.772763
webtechball 