Basit HTML bir sayfaya yan açılır menü ekleme istiyorum. Eklemek istediğim menü şu şekilde;
https://www.webcebir.com/htmltest/yanMenu/yanmenu2.html
Yukarıda ki yan menünün kodu ise şu şekilde
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .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; } #main { transition: margin-left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } </style> </head> <body> <div id="YanMenu" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"> ×</a> <a href="#">Anasayfa</a> <a href="#">PHP</a> <a href="#">CSS</a> <a href="#">HTML</a> </div> <div id="main"> <h2>Sidenav Push Example</h2> <p>Yan gezinme menüsünü açmak için aşağıdaki öğeye tıklayın ve bu içeriği sağa doğru itin. Sidenav açıldığında body etiketine siyah bir şeffaf arka plan rengi eklediğimize dikkat edin.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()"> ☰ open</span> </div> <script> function openNav() { document.getElementById("YanMenu").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("YanMenu").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; document.body.style.backgroundColor = "white"; } </script> </body> </html>Ücretli ücretsiz yardımcı olabilecek ya da bu kodu html sayfada nereye ekleyeceğim konusunda yardımcı olabilecek birisi var mı acaba? Şimdiden çok teşekkür ederim.
Ben anlatamadım galiba hocam kusura bakmayın.
Hali hazırda bir adet index.html dosyası var. Bu dosya içerisinde <header></header> tagları arasına bu kodu yerleştirdiğimde sayfayı bozuyor