Tartışma:Güncellemeler-ex: Revizyonlar arasındaki fark
Gezintiye git
(Sayfayı boşalttı) |
Değişiklik özeti yok |
||
| 1. satır: | 1. satır: | ||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<style> | |||
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="#">About</a> | |||
<a href="#">Services</a> | |||
<a href="#">Clients</a> | |||
<a href="#">Contact</a> | |||
</div> | |||
<h2>Animated Sidenav Example</h2> | |||
<p>Click on the element below to open the side navigation menu.</p> | |||
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> | |||
<script> | |||
function openNav() { | |||
document.getElementById("mySidenav").style.width = "250px"; | |||
} | |||
function closeNav() { | |||
document.getElementById("mySidenav").style.width = "0"; | |||
} | |||
</script> | |||
</body> | |||
</html> | |||
12.55, 21 Ekim 2018 tarihindeki hâli
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> 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>
Click on the element below to open the side navigation menu.
☰ open
<script> function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
} </script>
</body> </html>