Tartışma:Güncellemeler-ex: Revizyonlar arasındaki fark
Wiki The-West TR sitesinden
Gezintiye git
|
|
| 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.56, 21 Ekim 2018 tarihindeki hâli
