<div id="responsive" class="responsive__navbar">
<div class="nav__box">
<div class="nav__title d-flex justify-content-between align-items-center">
<p>Ministry</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 284.929 284.929" style="enable-background:new 0 0 284.929 284.929;"
xml:space="preserve">
<path d="M282.082,76.511l-14.274-14.273c-1.902-1.906-4.093-2.856-6.57-2.856c-2.471,0-4.661,0.95-6.563,2.856L142.466,174.441
L30.262,62.241c-1.903-1.906-4.093-2.856-6.567-2.856c-2.475,0-4.665,0.95-6.567,2.856L2.856,76.515C0.95,78.417,0,80.607,0,83.082
c0,2.473,0.953,4.663,2.856,6.565l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854L282.082,89.647
c1.902-1.903,2.847-4.093,2.847-6.565C284.929,80.607,283.984,78.417,282.082,76.511z"/>
</svg>
</div>
<div class="nav__link">
<nav>
<li><a href="#">Overview Ministry</a></li>
<li><a href="#">Political Staff and Organization</a></li>
<li><a href="#">Objectives and Tasks</a></li>
<li><a href="#">Our Offices</a></li>
<li><a href="#">Budget</a></li>
<li><a href="#">Funding</a></li>
<li><a href="#">Speeches</a></li>
</nav>
</div>
</div>
<div class="nav__box">
<div class="nav__title d-flex justify-content-between align-items-center">
<p>Education</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 284.929 284.929" style="enable-background:new 0 0 284.929 284.929;"
xml:space="preserve">
<path d="M282.082,76.511l-14.274-14.273c-1.902-1.906-4.093-2.856-6.57-2.856c-2.471,0-4.661,0.95-6.563,2.856L142.466,174.441
L30.262,62.241c-1.903-1.906-4.093-2.856-6.567-2.856c-2.475,0-4.665,0.95-6.567,2.856L2.856,76.515C0.95,78.417,0,80.607,0,83.082
c0,2.473,0.953,4.663,2.856,6.565l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854L282.082,89.647
c1.902-1.903,2.847-4.093,2.847-6.565C284.929,80.607,283.984,78.417,282.082,76.511z"/>
</svg>
</div>
<div class="nav__link">
<nav>
<li><a href="#">Overview Education</a></li>
<li><a href="#">The German Vocational Training System</a></li>
<li><a href="#">Recognition of Foreign Professional Qualifications</a></li>
<li><a href="#">Erasmus+</a></li>
<li><a href="#">BAföG</a></li>
</nav>
</div>
</div>
<div class="nav__box">
<div class="nav__title d-flex justify-content-between align-items-center">
<p>Academia</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 284.929 284.929" style="enable-background:new 0 0 284.929 284.929;"
xml:space="preserve">
<path d="M282.082,76.511l-14.274-14.273c-1.902-1.906-4.093-2.856-6.57-2.856c-2.471,0-4.661,0.95-6.563,2.856L142.466,174.441
L30.262,62.241c-1.903-1.906-4.093-2.856-6.567-2.856c-2.475,0-4.665,0.95-6.567,2.856L2.856,76.515C0.95,78.417,0,80.607,0,83.082
c0,2.473,0.953,4.663,2.856,6.565l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854L282.082,89.647
c1.902-1.903,2.847-4.093,2.847-6.565C284.929,80.607,283.984,78.417,282.082,76.511z"/>
</svg>
</div>
<div class="nav__link">
<nav>
<li><a href="#">Overview Academia</a></li>
<li><a href="#">Excellence Strategy</a></li>
<li><a href="#">Max Planck Schools</a></li>
<li><a href="#">Bologna Process</a></li>
<li><a href="#">Nobel Laureate Meetings in Lindau</a></li>
<li><a href="#">Research in Germany</a></li>
</nav>
</div>
</div>
<div class="nav__box">
<div class="nav__title d-flex justify-content-between align-items-center">
<p>Research</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 284.929 284.929" style="enable-background:new 0 0 284.929 284.929;"
xml:space="preserve">
<path d="M282.082,76.511l-14.274-14.273c-1.902-1.906-4.093-2.856-6.57-2.856c-2.471,0-4.661,0.95-6.563,2.856L142.466,174.441
L30.262,62.241c-1.903-1.906-4.093-2.856-6.567-2.856c-2.475,0-4.665,0.95-6.567,2.856L2.856,76.515C0.95,78.417,0,80.607,0,83.082
c0,2.473,0.953,4.663,2.856,6.565l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854L282.082,89.647
c1.902-1.903,2.847-4.093,2.847-6.565C284.929,80.607,283.984,78.417,282.082,76.511z"/>
</svg>
</div>
<div class="nav__link">
<nav>
<li><a href="#">Overview Ministry</a></li>
<li><a href="#">Political Staff and Organization</a></li>
<li><a href="#">Objectives and Tasks</a></li>
<li><a href="#">Our Offices</a></li>
<li><a href="#">Budget</a></li>
<li><a href="#">Funding</a></li>
</nav>
</div>
</div>
<div class="nav__box">
<div class="nav__title d-flex justify-content-between align-items-center">
<p>International Affairs</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 284.929 284.929" style="enable-background:new 0 0 284.929 284.929;"
xml:space="preserve">
<path d="M282.082,76.511l-14.274-14.273c-1.902-1.906-4.093-2.856-6.57-2.856c-2.471,0-4.661,0.95-6.563,2.856L142.466,174.441
L30.262,62.241c-1.903-1.906-4.093-2.856-6.567-2.856c-2.475,0-4.665,0.95-6.567,2.856L2.856,76.515C0.95,78.417,0,80.607,0,83.082
c0,2.473,0.953,4.663,2.856,6.565l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854L282.082,89.647
c1.902-1.903,2.847-4.093,2.847-6.565C284.929,80.607,283.984,78.417,282.082,76.511z"/>
</svg>
</div>
<div class="nav__link">
<nav>
<li><a href="#">Overview Ministry</a></li>
<li><a href="#">Political Staff and Organization</a></li>
<li><a href="#">Objectives and Tasks</a></li>
<li><a href="#">Our Offices</a></li>
<li><a href="#">Budget</a></li>
</nav>
</div>
</div>
<div class="nav__box">
<div class="nav__title d-flex justify-content-between align-items-center">
<p>Publications</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 284.929 284.929" style="enable-background:new 0 0 284.929 284.929;"
xml:space="preserve">
<path d="M282.082,76.511l-14.274-14.273c-1.902-1.906-4.093-2.856-6.57-2.856c-2.471,0-4.661,0.95-6.563,2.856L142.466,174.441
L30.262,62.241c-1.903-1.906-4.093-2.856-6.567-2.856c-2.475,0-4.665,0.95-6.567,2.856L2.856,76.515C0.95,78.417,0,80.607,0,83.082
c0,2.473,0.953,4.663,2.856,6.565l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854L282.082,89.647
c1.902-1.903,2.847-4.093,2.847-6.565C284.929,80.607,283.984,78.417,282.082,76.511z"/>
</svg>
</div>
<div class="nav__link">
<nav>
<li><a href="#">Speeches</a></li>
</nav>
</div>
</div>
</div>.responsive__navbar {
width: 260px;
top: 10px;
}
.nav__box {
width: 100%;
cursor: pointer;
background: #0778a5;
border-bottom: 1px solid #6aaec9;
}
.nav__title.open svg {
transform: rotate(180deg);
}
.nav__title {
width: 100%;
height: 50px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-around;
}
.nav__box p {
color: #fff;
font-family: 'BundesSerifWeb-Regular';
font-size: 17px;
margin-bottom: 0;
}
.nav__title svg{
width: 14px;
height: 18px;
fill: #fff;
}
.nav__title {
width: 100%;
height: 50px;
padding: 0 20px;
}
.nav__link {
height: 0;
overflow: hidden;
}
.nav__link.open {
height: auto;
overflow: auto;
}
.nav__link li {
background-color: #004f80;
width: 212px;
}
.nav__link a {
color: #fff;
border-bottom: 1px solid #6aaec9;
width: 180px;
text-decoration: none;
display: block;
}
.responsive__navbar a {
padding: 14px 20px;
display: block;
}
#responsive.open {
transform: translateX(0);
transition: all 400ms linear;
cursor: pointer;
}$(function () {
"use strict";
$('.nav__title').click(function(){
$('.responsive__navbar')
.find('.nav__title.open, .nav__link.open')
.not($(this))
.not($(this).next('.nav__link'))
.removeClass('open');
$(this).toggleClass('open');
$(this).next('.nav__link').toggleClass('open');
});
});
External CSS
This Pen doesn't use any external CSS resources.