Last active
January 12, 2016 02:31
-
-
Save d1rtyvans/2f736c9fd359802b76e0 to your computer and use it in GitHub Desktop.
Fixed Collapsable Navbar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="fixed-nav-bar"> | |
<a class="brand"> | |
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Poundexclam.svg/2000px-Poundexclam.svg.png" /> | |
</a> | |
<label for="show-menu" class="show-menu"> | |
<img id="down" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/TriangleArrow-Down.svg/532px-TriangleArrow-Down.svg.png"/> | |
<img id="up" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/TriangleArrow-Up.svg/120px-TriangleArrow-Up.svg.png"/> | |
</label> | |
<input type="checkbox" id="show-menu" role="button"> | |
<ul id="menu"> | |
<li><a href="#">Projects</a></li> | |
<li><a href="#">Muniez</a></li> | |
</ul> | |
</nav> | |
<div class="page-container"> | |
<ul> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
<li><a>new blog</a></li> | |
</ul> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var showMenu = document.getElementById('show-menu'); | |
showMenu.addEventListener('click', function (event) { | |
if (this.checked) swapDisplay('down', 'up'); | |
else swapDisplay('up', 'down'); | |
}); | |
function swapDisplay(hide, show) { | |
document.getElementById(hide).style.display = 'none'; | |
document.getElementById(show).style.display = 'block'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
box-sizing: border-box; | |
} | |
body { | |
font-family: helvetica; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
/*border: 1px solid red;*/ | |
} | |
a { | |
text-decoration: none; | |
color: gray; | |
&:hover { | |
color: black; | |
} | |
} | |
.fixed-nav-bar { | |
position: fixed; | |
top: 0; | |
left: 0; | |
z-index: 9999; | |
width: 100%; | |
min-height: 50px; | |
max-height: 300px; | |
background-color: white; | |
box-shadow: 0px 0px 10px gray; | |
line-height: 50px; | |
li { | |
display: inline-block; | |
margin-right: 30px; | |
} | |
.brand { | |
float: left; | |
height: 50px; | |
margin-left: 10px; | |
> img { | |
height: inherit; | |
} | |
} | |
} | |
.page-container { | |
margin-top: 50px; | |
margin-bottom: 100px; | |
> ul { | |
text-align: center; | |
font-size: 3em; | |
font-family: "Inconsolata"; | |
list-style-type: none; | |
li { | |
padding: 30px 0; | |
display: block; | |
} | |
} | |
} | |
/* COLLAPSING STUFF */ | |
#menu { | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
max-width: max-content; | |
float: right; | |
} | |
.show-menu { | |
display: none; | |
flex: 1; | |
max-width: max-content; | |
float: right; | |
margin-right: 20px; | |
img { | |
padding-top: 20px; | |
height: 30px; | |
} | |
#up { | |
display: none; | |
} | |
} | |
input[type=checkbox] { | |
display: none; | |
&:checked ~ #menu { | |
display: block; | |
text-align: center; | |
} | |
} | |
/* MAKE SURE COLLAPSED NAVBAR CLOSES WHEN SCREEN | |
GETS BIGGER AGAIN */ | |
@media screen and (max-width: 760px) { | |
#menu { | |
display: none; | |
float: none; | |
max-width: 100%; | |
} | |
#menu li, li a { | |
width: 100%; | |
} | |
.show-menu { | |
display: block; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment