Created
October 31, 2016 13:35
-
-
Save anonymous/0d46b4f77f6b776f0a88663753e3c749 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/punosid
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .topnav{ | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| background: black; | |
| border: 1px solid black; | |
| /* width: 100%; */ | |
| /* overflow: hidden; */ | |
| } | |
| .topnav li{ | |
| float: left; | |
| /* padding: 10px; */ | |
| border-right: 1px solid black; | |
| } | |
| .topnav li a.active{ | |
| background: green; | |
| } | |
| .topnav li a:hover:not(.active){ | |
| background: blue; | |
| color: white; | |
| } | |
| /* .topnav li a:hover{ | |
| background: white; | |
| color: black; | |
| } | |
| */ | |
| .topnav li a{ | |
| display: block; | |
| padding: 10px; | |
| text-decoration: none; | |
| text-align: left; | |
| color: white; | |
| } | |
| .clearfix:after{ | |
| content: ''; | |
| display: table; | |
| clear: both; | |
| } | |
| .dropdown-content{ | |
| display: none; | |
| position: absolute; | |
| width: 100px; | |
| background: blue; | |
| } | |
| .dropdown-content a:hover{ | |
| background: red; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .dropdown .dropdown-content a:hover{ | |
| background: red; | |
| } | |
| /* .topnav li.right{ | |
| margin-right: 10px; | |
| float: right; | |
| } */ | |
| @media screen and (max-width: 250px) { | |
| .topnav li{ | |
| float: none; | |
| } | |
| } | |
| @media screen and (min-width: 251px) and (max-width: 500px) { | |
| .topnav{ | |
| width: 25%; | |
| float: left; | |
| } | |
| .topnav li{ | |
| float: none; | |
| } | |
| .content{ | |
| margin-left: 25%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul class="topnav clearfix"> | |
| <li><a class="active" href="#home">Home</a></li> | |
| <li><a href="#news">News</a></li> | |
| <li class="dropdown"> | |
| <a href="#contact" class="parent">Contact</a> | |
| <div class="dropdown-content"> | |
| <a href="#1">first</a> | |
| <a href="#2">second</a> | |
| <a href="#3">Third</a> | |
| </div> | |
| </li> | |
| <li class="right"><a href="#about">About</a></li> | |
| </ul> | |
| <div class="content " style="padding:0 16px;"> | |
| <h2>Responsive Topnav Example</h2> | |
| <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p> | |
| <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p> | |
| <h4>Resize the browser window to see the effect.</h4> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">.topnav{ | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| background: black; | |
| border: 1px solid black; | |
| /* width: 100%; */ | |
| /* overflow: hidden; */ | |
| } | |
| .topnav li{ | |
| float: left; | |
| /* padding: 10px; */ | |
| border-right: 1px solid black; | |
| } | |
| .topnav li a.active{ | |
| background: green; | |
| } | |
| .topnav li a:hover:not(.active){ | |
| background: blue; | |
| color: white; | |
| } | |
| /* .topnav li a:hover{ | |
| background: white; | |
| color: black; | |
| } | |
| */ | |
| .topnav li a{ | |
| display: block; | |
| padding: 10px; | |
| text-decoration: none; | |
| text-align: left; | |
| color: white; | |
| } | |
| .clearfix:after{ | |
| content: ''; | |
| display: table; | |
| clear: both; | |
| } | |
| .dropdown-content{ | |
| display: none; | |
| position: absolute; | |
| width: 100px; | |
| background: blue; | |
| } | |
| .dropdown-content a:hover{ | |
| background: red; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .dropdown .dropdown-content a:hover{ | |
| background: red; | |
| } | |
| /* .topnav li.right{ | |
| margin-right: 10px; | |
| float: right; | |
| } */ | |
| @media screen and (max-width: 250px) { | |
| .topnav li{ | |
| float: none; | |
| } | |
| } | |
| @media screen and (min-width: 251px) and (max-width: 500px) { | |
| .topnav{ | |
| width: 25%; | |
| float: left; | |
| } | |
| .topnav li{ | |
| float: none; | |
| } | |
| .content{ | |
| margin-left: 25%; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
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
| .topnav{ | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| background: black; | |
| border: 1px solid black; | |
| /* width: 100%; */ | |
| /* overflow: hidden; */ | |
| } | |
| .topnav li{ | |
| float: left; | |
| /* padding: 10px; */ | |
| border-right: 1px solid black; | |
| } | |
| .topnav li a.active{ | |
| background: green; | |
| } | |
| .topnav li a:hover:not(.active){ | |
| background: blue; | |
| color: white; | |
| } | |
| /* .topnav li a:hover{ | |
| background: white; | |
| color: black; | |
| } | |
| */ | |
| .topnav li a{ | |
| display: block; | |
| padding: 10px; | |
| text-decoration: none; | |
| text-align: left; | |
| color: white; | |
| } | |
| .clearfix:after{ | |
| content: ''; | |
| display: table; | |
| clear: both; | |
| } | |
| .dropdown-content{ | |
| display: none; | |
| position: absolute; | |
| width: 100px; | |
| background: blue; | |
| } | |
| .dropdown-content a:hover{ | |
| background: red; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .dropdown .dropdown-content a:hover{ | |
| background: red; | |
| } | |
| /* .topnav li.right{ | |
| margin-right: 10px; | |
| float: right; | |
| } */ | |
| @media screen and (max-width: 250px) { | |
| .topnav li{ | |
| float: none; | |
| } | |
| } | |
| @media screen and (min-width: 251px) and (max-width: 500px) { | |
| .topnav{ | |
| width: 25%; | |
| float: left; | |
| } | |
| .topnav li{ | |
| float: none; | |
| } | |
| .content{ | |
| margin-left: 25%; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment