Advertisement
Crazykk1449

[Compressed] Website SideNav Code

Mar 18th, 2017
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.57 KB | None | 0 0
  1. <!DOCTYPE html><html><head><style>body { font-family: cursive, sans-serif;}.sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px;}.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s}.sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1;}.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;margin-top: 50px;}@media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;}}.myButton {background-color:#44c767;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;border:1px solid #18ab29;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:5px 21px;text-decoration:none;text-shadow:0px 1px 0px #2f6627;}.myButton:hover {background-color:#5cbf2a;}.myButton:active {position:relative;top:1px;}#w3schools {font-size: 10px;}</style></head><body><div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="http://crazykk1449.weebly.com/index.html">Home</a> <a href="http://crazykk1449.weebly.com/contact.html">Contact</a> <a href="http://crazykk1449.weebly.com/blogs.html">Blogs</a> <a href="http://crazykk1449.weebly.com/videos.html">Videos</a> <a href="http://crazykk1449.weebly.com/social-media.html">Social Media</a> <a href="http://crazykk1449.weebly.com/member_login.html">Member Chat</a> <a href="http://crazykk1449.weebly.com/member_manage_log-in.html">Manage Account</a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="https://www.w3schools.com/" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" id="w3schools">Side nagivator code cortesy of W3Schools.com</a></div><button style="font-size:30px;cursor:pointer" onclick="openNav()" class="myButton">&#9776; Open</button><script>function openNav() { document.getElementById("mySidenav").style.width = "250px";}function closeNav() { document.getElementById("mySidenav").style.width = "0";}</script> </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement