Problem with Bootstrap it has a set of default components, beyond those compoents its useless and you have to start coding your own. Your dropmenu menu is quite complex being as though it has several levels of menus. Bootstrapless example below just to make a point how easy it is If you get to grips with some html and css.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootrapless Dropdown Menu</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('.archives h6').css('cursor' , 'pointer').click(function(){
$(this).next('div').toggle();
$(this).toggleClass('active');
});
$('.archived_blogs a').css('cursor' , 'pointer').click(function(){
$(this).next('ul').toggle();
$(this).toggleClass('activeRight');
});
});
</script>
<style>
body {
font-family: helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.blogs {
width: 85%;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.blogs {
width: 95%;
margin: 0 auto;
}
}
.blog_header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-color: #2e89f6;
padding: 12px 30px;
}
h6 {
color: #fff;
margin: 0;
padding: 5px 0 5px 0;
font-size: 18px;
font-weight: 400;
}
.recent_blogs {
width: 65%;
}
@media screen and (max-width: 768px) {
.recent_blogs {
width: 100%;
}
}
.archives {
width: 35%;
position: relative;
}
@media screen and (max-width: 768px) {
.archives {
width: 100%;
}
}
.archived_blogs {
display: none;
position: absolute;
top: 2.1em;
background-color: #fff;
width: 100%;
padding: 10px 20px 0 20px;
border: 1px solid #ccc;
}
.archived_blogs ul {
margin: 0;
padding: 0;
list-style: none;
}
.archived_blogs li {
margin: 0;
padding: 0;
}
.archived_blogs a {
display: block;
text-decoration: none;
padding: 8px 0;
border-top: 1px solid #ccc;
color: #666;
}
.archived_blogs ul ul{
display: none;
}
.archived_blogs ul ul a{
padding: 8px 0 8px 20px;
background-color: #e6e6e6;
color: #000;
}
.archived_blogs ul ul ul a{
padding: 8px 0 8px 20px;
background-color: #f2f2f2;
color: #000;
}
.archives span:after {
float: right;
content: '\002B';
font-weight: bold;
font-size: 21px;
}
.active span:after {
float: right;
content: "\2212";
font-weight: bold;
font-size: 21px;
}
.page_content {
width: 85%;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="blogs">
<div class="blog_header">
<div class="recent_blogs"><h6>Recent Blogs (De 2014 - Sep 2013)</h6></div>
<!-- end recent_blogs -->
<div class="archives">
<h6>Archives<span></span></h6>
<div class="archived_blogs">
<ul>
<li><a href="#" style="border-top: none;">2014</a>
<ul>
<li><a href="#">December</a>
<ul>
<li><a href="#">Blog Entry 1</a></li>
<li><a href="#">Blog Entry 2</a></li>
<li><a href="#">Blog Entry 3</a></li>
<li><a href="#">Blog Entry 4</a></li>
<li><a href="#">Blog Entry 5</a></li>
</ul>
</li>
<li><a href="#">November</a>
<ul>
<li><a href="#">Blog Entry 1</a></li>
<li><a href="#">Blog Entry 2</a></li>
<li><a href="#">Blog Entry 3</a></li>
<li><a href="#">Blog Entry 4</a></li>
<li><a href="#">Blog Entry 5</a></li>
</ul>
</li>
<li><a href="#">October</a>
<ul>
<li><a href="#">Blog Entry 1</a></li>
<li><a href="#">Blog Entry 2</a></li>
<li><a href="#">Blog Entry 3</a></li>
<li><a href="#">Blog Entry 4</a></li>
<li><a href="#">Blog Entry 5</a></li>
</ul>
</li>
<li><a href="#">September</a>
<ul>
<li><a href="#">Blog Entry 1</a></li>
<li><a href="#">Blog Entry 2</a></li>
<li><a href="#">Blog Entry 3</a></li>
<li><a href="#">Blog Entry 4</a></li>
<li><a href="#">Blog Entry 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">2013</a>
<ul>
<li>Decemeber</li>
<li>November</li>
<li>October</li>
<li>September</li>
</ul>
</li>
<li><a href="#">2012</a>
<ul>
<li>December</li>
<li>November</li>
<li>October</li>
<li>September</li>
</ul>
</li>
<li><a href="#">2011</a>
<ul>
<li>December</li>
<li>November</li>
<li>October</li>
<li>September</li>
</ul>
</li>
</ul>
</div>
<!-- end archived_blogs -->
</div>
<!-- end archives -->
</div>
<!-- end blog_header -->
</div>
<!-- end blogs -->
<div class="page_content">
<h2>Page content goes here. Page content goes here. Page content goes here.Page content goes here.</h2>
</div>
<!-- end page_content -->
</body>
</html>
1 Correct answer
29
Replies
AdChoices