Skip to content

Instantly share code, notes, and snippets.

@hasanmisbah

hasanmisbah/jsbin.fefetol.css

Last active October 26, 2017 19:52
Show Gist options
  • Save hasanmisbah/69b74ecc88de73e00a58bbeccc4e1ffe to your computer and use it in GitHub Desktop.
Save hasanmisbah/69b74ecc88de73e00a58bbeccc4e1ffe to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/fefetol
Raw
jsbin.fefetol.css
nav{
margin: 0;
padding: 0;
display: block;
width: 100%;
}
ul.topnav{
margin:0;
padding:0;
}
ul.topnav li{
list-style: none;
float: left;
}
ul.topnav li.rightnav{
float: right;
}
ul.topnav li a{
display: block;
min-height: 16px;
padding: 14px;
text-align: center;
text-decoration: none;
color: #666;
text-transform: uppercase;
}
ul.topnav li a:hover{
background-color: #008080;
color: #fff;
}
ul.topnav li.resicon{
display: none;
}
@media screen and (max-width:680px){
ul.topnav li:not(:nth-child(1)){
display: none;
}
ul.topnav li.resicon{
display: block;
position: absolute;
right:0;
top:0;
}
ul.topnav.responsive{
position: relative;
}
ul.topnav.responsive li{
display: inline;
float: none;
}
ul.topnav.responsive li a{
display: block;
text-align: left;
}
}
Raw
jsbin.fefetol.js
function menu(){
var manu = document.getElementById("mainnav");
if(manu.className === "topnav"){
manu.className += " responsive";
}else{
manu.className = "topnav";
}
}
Raw
responsive-menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
nav{
margin: 0;
padding: 0;
display: block;
width: 100%;
}
ul.topnav{
margin:0;
padding:0;
}
ul.topnav li{
list-style: none;
float: left;
}
ul.topnav li.rightnav{
float: right;
}
ul.topnav li a{
display: block;
min-height: 16px;
padding: 14px;
text-align: center;
text-decoration: none;
color: #666;
text-transform: uppercase;
}
ul.topnav li a:hover{
background-color: #008080;
color: #fff;
}
ul.topnav li.resicon{
display: none;
}
@media screen and (max-width:680px){
ul.topnav li:not(:nth-child(1)){
display: none;
}
ul.topnav li.resicon{
display: block;
position: absolute;
right:0;
top:0;
}
ul.topnav.responsive{
position: relative;
}
ul.topnav.responsive li{
display: inline;
float: none;
}
ul.topnav.responsive li a{
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<nav>
<ul class="topnav" id="mainnav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li class="rightnav"><a href="">Login</a></li>
<li class="rightnav"><a href="">Signup</a></li>
<li class="resicon" onclick="menu()"><a href="javascript:void(0);">&#9776;</a></li>
</ul>
</nav>
<script id="jsbin-javascript">
function menu(){
var manu = document.getElementById("mainnav");
if(manu.className === "topnav"){
manu.className += " responsive";
}else{
manu.className = "topnav";
}
}
</script>
<script id="jsbin-source-css" type="text/css">nav{
margin: 0;
padding: 0;
display: block;
width: 100%;
}
ul.topnav{
margin:0;
padding:0;
}
ul.topnav li{
list-style: none;
float: left;
}
ul.topnav li.rightnav{
float: right;
}
ul.topnav li a{
display: block;
min-height: 16px;
padding: 14px;
text-align: center;
text-decoration: none;
color: #666;
text-transform: uppercase;
}
ul.topnav li a:hover{
background-color: #008080;
color: #fff;
}
ul.topnav li.resicon{
display: none;
}
@media screen and (max-width:680px){
ul.topnav li:not(:nth-child(1)){
display: none;
}
ul.topnav li.resicon{
display: block;
position: absolute;
right:0;
top:0;
}
ul.topnav.responsive{
position: relative;
}
ul.topnav.responsive li{
display: inline;
float: none;
}
ul.topnav.responsive li a{
display: block;
text-align: left;
}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">function menu(){
var manu = document.getElementById("mainnav");
if(manu.className === "topnav"){
manu.className += " responsive";
}else{
manu.className = "topnav";
}
}</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment