Pure CSS Responsive Flexbox Navigation

Pure CSS Responsive Flexbox Navigation

Since its appearance Flexbox is quite interesting for designers and developers. They keep playing with it and explore it further to know what are the advantages and limitations. The long awaited Bootstrap 4 is known to have it as a utility. The other popular grid-based framework, Foundation, has already adopted it.

There are many advantages of using Flexbox as it allows creatives to design beyond limitations when using only CSS3 and without adding many JavaScript plugins.

One of most important features in any website or web app is undoubtedly the navigation as it is vital for any successful design. Navigation is the user’s road map and designers and developers pay special attention to it. There are countless resources on nav design and development, from the hamburger icon to arrangement of links in it.

Today’s snippet uses Flexbox as responsive solution for a navigation. It is a bit different of the usual approaches of navigation and it aims to show that Flexbox can be used creatively to build a simple navigation. It uses inputs, labels and unordered lists as providers of structure.

Here is the snippet in action:

See the Pen Pure CSS Responsive Flexbox Navigation by Petia (@designify-me) on CodePen.

Here is how it is built:

HTML

<nav>
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">
<ul class="menu first">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<span class="toggle">☰</span>
</label>
</nav>

<nav>
<input type="checkbox" id="checkbox2" />
<label for="checkbox2">
<ul class="menu second">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<span class="toggle">☰</span>
</label>
</nav>

<nav>
<input type="checkbox" id="checkbox3" />
<label for="checkbox3">
<ul class="menu third">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<span class="toggle">☰</span>
</label>
</nav>

CSS

nav {
margin: 50px auto;
max-width: 100%;
width: 100%;
font-family: 'Droid Sans', sans-serif;
}

#checkbox1,
#checkbox2,
#checkbox3,
.toggle {
display: none;
}

.menu {
padding: 0;
margin: 0;
max-width: 100%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style-type: none;
}

.menu li a {
text-decoration: none;
align-self: center;
font-size: 14px;
padding: 16px 20px;
transition: background .2s linear;
}

@media screen and (max-width: 600px) {
.menu li a {
font-size: 13px;
}
}

@media screen and (max-width: 550px) {
.toggle {
clear: both;
display: block;
text-align: center;
font-size: 14px;
line-height: 40px;
cursor: pointer;
width: 100%;
height: 40px;
font-size: 18px;
color: #595959;
background: #dbdbdb;
transition: all .1s linear;
}
.toggle:hover {
background: #cecece;
}
#checkbox1:checked + label .first li {
opacity: 1;
visibility: visible;
transition: all .7s linear;
}
#checkbox2:checked + label .second li {
opacity: 1;
visibility: visible;
transition: all .7s linear;
}
#checkbox3:checked + label .third li {
opacity: 1;
visibility: visible;
transition: all .7s linear;
}
#checkbox1:checked + label .first {
height: 200px;
}
#checkbox2:checked + label .second {
height: 200px;
}
#checkbox3:checked + label .third {
height: 200px;
}
.menu {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 0px;
transition: height .3s linear;
}
.menu li {
display: flex;
/* magic */
align-self: center;
width: 100%;
opacity: 0;
visibility: hidden;
}
.menu li a {
width: 100%;
text-align: center;
align-self: center;
align-content: center;
}
}

.first {
background: #625b60;
}

.first li a {
color: #fff;
}

.first li a:hover {
background: #6d6268;
}

.second {
background: #51535f;
}

.second li a {
color: #fff;
}

.second li a:hover {
background: #5d5f6d;
}

.third {
background: #eee;
}

.third li a {
color: #606060;
}

.third li a:hover {
background: #d5d5d5;
}

body {
background: #6c6b6e;
}

Feel free to play with the pen to build a navigation solution that suits your needs.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.


The idea behind this navigation belongs to Mehmet Burak Erman


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *