Created
October 9, 2017 11:12
-
-
Save phpfiddle/741687f4733cc3ff6d7461842848fd36 to your computer and use it in GitHub Desktop.
[ Posted by Owolabi Blo ] property link work code lalll
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> | |
<style> | |
<title>W3.CSS</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
body { | |
font-family: "Lato", 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 { | |
color: #f1f1f1; | |
} | |
.sidenav .closebtn { | |
position: absolute; | |
top: 0; | |
right: 25px; | |
font-size: 36px; | |
margin-left: 50px; | |
} | |
@media screen and (max-height: 450px) { | |
.sidenav {padding-top: 15px;} | |
.sidenav a {font-size: 18px;} | |
} | |
</style> | |
</head> | |
<body> | |
<div id="mySidenav" class="sidenav"> | |
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> | |
<a href="#">ESTATES</a> | |
<div class="w3-dropdown-hover"> | |
<button class="w3-button">ESTATES | |
<i class="fa fa-caret-down"></i> | |
</button> | |
<div class="w3-dropdown-content w3-bar-block"> | |
<a href="#" class="w3-bar-item w3-button">PENAIL</a> | |
<a href="#" class="w3-bar-item w3-button">DANGOTES REFINARY</a> | |
</div> | |
</div> | |
<a href="#">INFORMATIONS</a> | |
<div class="w3-dropdown-hover"> | |
<button class="w3-button">INFORMA | |
<i class="fa fa-caret-down"></i> | |
</button> | |
<div class="w3-dropdown-content w3-bar-block"> | |
<a href="#" class="w3-bar-item w3-button">Estate Location</a> | |
<a href="#" class="w3-bar-item w3-button">longitude $ latitude</a> | |
</div> | |
</div> | |
<a href="#">Plot details</a> | |
<div class="w3-dropdown-hover"> | |
<button class="w3-button">plot details | |
<i class="fa fa-caret-down"></i> | |
</button> | |
<div class="w3-dropdown-content w3-bar-block"> | |
<a href="#" class="w3-bar-item w3-button">Outright</a> | |
<a href="#" class="w3-bar-item w3-button">Instalment</a> | |
</div> | |
</div> | |
<a href="#">Contact</a> | |
</div> | |
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ PROPERTY LINK</span> | |
<script> | |
function openNav() { | |
document.getElementById("mySidenav").style.width = "250px"; | |
} | |
function closeNav() { | |
document.getElementById("mySidenav").style.width = "0"; | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment