Skip to content

Instantly share code, notes, and snippets.

@nantreee

nantreee/Responsive-Navigation-Ideas.markdown

Forked from anonymous/Responsive-Navigation-Ideas.markdown
Last active August 29, 2015 14:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nantreee/94869e35b271a1dfc123 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nantreee/94869e35b271a1dfc123 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<div class="container">
<h1>Responsive Navigation Ideas</h1>
<!-- Style #1 -->
<div class="iphone style-1">
<div class="iphone__item">#1</div>
<div class="iphone__power-btn"></div>
<div class="iphone__left-btn"></div>
<div class="iphone__details"></div>
<div class="iphone__screen">
<a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link" href="#">Home</a></li>
<li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
</ul>
</nav>
<div class="iphone__content"></div>
</div>
<div class="iphone__home-btn"></div>
</div>
<!-- /Style #1 -->
<!-- Style #2 -->
<div class="iphone style-2">
<div class="iphone__item">#2</div>
<div class="iphone__power-btn"></div>
<div class="iphone__left-btn"></div>
<div class="iphone__details"></div>
<div class="iphone__screen">
<a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link" href="#">Home</a></li>
<li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
</ul>
</nav>
<div class="iphone__content"></div>
</div>
<div class="iphone__home-btn"></div>
</div>
<!-- /Style #2 -->
<!-- Style #23-->
<div class="iphone style-3">
<div class="iphone__item">#3</div>
<div class="iphone__power-btn"></div>
<div class="iphone__left-btn"></div>
<div class="iphone__details"></div>
<div class="iphone__screen">
<a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link" href="#">Home</a></li>
<li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
</ul>
</nav>
<div class="iphone__content"></div>
</div>
<div class="iphone__home-btn"></div>
</div>
<!-- /Style #3 -->
<!-- Style #4-->
<div class="iphone style-4">
<div class="iphone__item">#4</div>
<div class="iphone__power-btn"></div>
<div class="iphone__left-btn"></div>
<div class="iphone__details"></div>
<div class="iphone__screen">
<a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link" href="#">Home</a></li>
<li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
</ul>
</nav>
<div class="iphone__content"></div>
</div>
<div class="iphone__home-btn"></div>
</div>
<!-- /Style #4 -->
<!-- Style #5-->
<div class="iphone style-5">
<div class="iphone__item">#5</div>
<div class="iphone__power-btn"></div>
<div class="iphone__left-btn"></div>
<div class="iphone__details"></div>
<div class="iphone__screen">
<a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link" href="#">Home</a></li>
<li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
</ul>
</nav>
<div class="iphone__content"></div>
</div>
<div class="iphone__home-btn"></div>
</div>
<!-- /Style #5 -->
<!-- Style #6-->
<div class="iphone style-6">
<div class="iphone__item">#6</div>
<div class="iphone__power-btn"></div>
<div class="iphone__left-btn"></div>
<div class="iphone__details"></div>
<div class="iphone__screen">
<a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link" href="#">Home</a></li>
<li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
</ul>
</nav>
<div class="iphone__content"></div>
</div>
<div class="iphone__home-btn"></div>
</div>
<!-- /Style #6 -->
</div>
Raw
Responsive-Navigation-Ideas.markdown
Raw
script.js
$('.nav__trigger').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('nav--active');
});
Raw
style.less
@main-bg: #1BBC9B;
@nav-color: #FFFFFF;
@nav-bg-active: #333;
@screen-bg: #D2527F;
@duration: 300ms;
@ease: ease-in-out;
/**
* Demo Stuff
*/
body {
background: @main-bg;
font-family: 'Montserrat', sans-serif;
}
.container {
text-align: center;
}
h1 {
color: darken(@main-bg, 15%);
font-weight:400;
font-size:2em;
margin:1em 0;
}
/**
* iPhone
* Credits: Flat, Scaleable CSS iPhone Illustration by Tom Hergenreter
* http://codepen.io/TomHergenreter/details/qDywF/
*/
.iphone {
width: 16.06em;
height: 30.6em;
border-radius: 1.875em;
margin: 2em;
position: relative;
display:inline-block;
background: #fff;
}
.iphone__item {
width: 16.06em;
height:1em;
position: absolute;
bottom:-2em;
color: darken(@main-bg, 10%);
text-align: center;
}
.iphone__power-btn{
width: 2.188em;
height: .188em;
background: #e0e0e0;
position: absolute;
right: 2.5em;
top: -.188em;
}
.iphone__left-btn {
width: .188em;
height: 1.250em;
top: 3.250em;
left: -.188em;
position: absolute;
background: #e0e0e0;
&:before {
content: '';
width: .188em;
height: .875em;
position: absolute;
top: 3em;
background: #e0e0e0;
}
&:after {
content: '';
width: .188em;
height: .875em;
position: absolute;
top: 5.5em;
background: #e0e0e0;
}
}
.iphone__details {
width: .438em;
height: .438em;
border-radius: 100%;
position: relative;
top: 1.313em;
left: 8em;
background: #7c7c7c;
&:before {
content: '';
width: 2.5em;
height: .25em;
border-radius: .25em;
position: absolute;
top: 1em;
left: -1em;
background: #7c7c7c;
}
}
.iphone__home-btn {
width: 2.25em;
height: 2.25em;
border-radius: 100%;
position: absolute;
bottom: 1em;
right: 6.75em;
background: #f7f7f7;
&:before {
content: '';
width: .813em;
height: .813em;
border: .15em solid #a8a8a8;
border-radius: .2em;
position: absolute;
top: .6em;
left: .57em;
}
}
.iphone__screen {
width: 14.5em;
height: 22.938em;
position: absolute;
top: 3.75em;
left: .750em;
overflow: hidden;
}
.iphone__content {
position: relative;
background-color: @screen-bg;
width:100%;
height:100%;
}
/**
* Navigation Defaults
*/
.nav {
position: absolute;
z-index:100;
opacity:0;
transition-property: all;
transition-duration: @duration;
}
.nav--active .nav {
opacity:1;
background-color: @nav-bg-active;
}
.nav__list {
margin:0;
padding:10px;
}
.nav__item {
list-style-type: none;
text-align: left;
}
.nav__link {
font-size:1.3em;
text-transform: uppercase;
text-decoration: none;
color: @nav-color;
opacity:1;
transition: opacity 300ms @ease;
}
/* Default navigation icon */
.nav__trigger {
display:block;
position:absolute;
width:30px;
height:25px;
right:10px;
top:10px;
z-index:200;
}
.nav--active .nav__trigger {
opacity:0.5;
}
.nav__icon {
display:inline-block;
position: relative;
width:30px;
height:5px;
background-color: @nav-color;
transition-property: background-color, transform;
transition-duration: @duration;
&:before,
&:after {
content:'';
display:block;
width:30px;
height:5px;
position: absolute;
background: @nav-color;
transition-property: margin, transform;
transition-duration: @duration;
}
&:before {
margin-top:-10px;
}
&:after {
margin-top:10px;
}
}
/* Don't nest if you don't have to. */
/**
* Style #1
*/
.style-1 {
.nav {
transform: translateX(-100%);
width:100%;
height:100%;
}
.nav__link {
opacity:0;
transition-delay:500ms;
}
.nav--active .nav__link {
opacity:1;
}
.nav--active .nav {
transition: all @duration @ease;
transform: translateX(0);
}
.nav--active .nav__icon {
background: rgba(0,0,0,0.0);
&:before {
margin-top:0;
transform:rotate(45deg);
}
&:after {
margin-top:0;
transform:rotate(-45deg);
}
}
}
/**
* Style #2
*/
.style-2 {
perspective:1000px;
.nav {
width:100%;
height:100%;
transform: rotateY(180deg);
}
.nav--active .nav {
transform: rotateY(360deg);
}
.iphone__content {
transform: rotateY(0);
transform-style: preserve-3d;
transition: all @duration @ease;
}
.nav--active .iphone__content {
transform-style: preserve-3d;
transform: rotateY(180deg);
}
.navi__icon {
background: rgba(0,0,0,0.0);
&:before {
margin-top:0;
transform:rotate(90deg);
}
&:after {
margin-top:0;
transform:rotate(180deg);
}
}
.nav--active .nav__icon {
background: rgba(0,0,0,0.0);
transform:rotate(135deg);
&:before {
margin-top:0;
transform:rotate(90deg);
}
&:after {
margin-top:0;
transform:rotate(180deg);
}
}
}
/**
* Style #3
*/
.style-3 {
.nav {
width:100%;
height:100%;
transform: translateX(100%);
}
.nav--active .nav {
transform: translateX(20%);
}
.iphone__content {
transform: scale(1) translateX(0);
transition: all @duration @ease;
}
.iphone__screen {
background-color: lighten(@nav-bg-active, 5%);
}
.nav--active .iphone__content {
transform: scale(0.9) translateX(-90%);
}
.nav__icon {
background: rgba(0,0,0,0.0);
&:before {
margin-top:0;
transform:rotate(90deg);
}
&:after {
margin-top:0;
transform:rotate(180deg);
}
}
.nav--active .nav__icon {
transform:rotate(135deg);
}
}
/**
* Style #4
*/
.style-4 {
.nav {
width:100%;
height:100%;
transform: translateY(-100%);
}
.nav--active .nav {
transform: translateY(0);
}
.nav--active .nav__icon {
transform:rotate(90deg);
}
.nav__link {
opacity:0;
transition-delay:500ms;
}
.nav--active .nav__link {
opacity:1;
}
}
/**
* Style #5
*/
.style-5 {
.nav {
transform: translate(100%,-100%) scale(0.5);
border-radius:100%;
}
.nav--active .nav {
transform: translateY(0) scale(1);
border-radius:0;
width:100%;
height:100%;
}
.nav__link {
opacity:0;
transition-delay:500ms;
}
.nav--active .nav__link {
opacity:1;
}
.nav--active .nav__icon {
background: rgba(0,0,0,0.0);
&:before {
margin-top:0;
transform:rotate(45deg);
}
&:after {
margin-top:0;
transform:rotate(-45deg);
}
}
}
/**
* Style #6
*/
.style-6 {
.nav {
transform: rotateZ(-90deg);
width:100%;
height:100%;
}
.nav--active .nav {
transform: rotateZ(0);
}
.nav__link {
opacity:0;
transition-delay:500ms;
}
.nav--active .nav__link {
opacity:1;
}
.nav__icon {
background: rgba(0,0,0,0.0);
&:before {
margin-top:0;
transform:rotate(90deg);
}
&:after {
margin-top:0;
transform:rotate(180deg);
}
}
.nav--active .nav__icon {
transform:rotate(135deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment