webpage designs

_mac os x

_mint choco

_red y2k retro

_starry night 2000s 2010s inspired blog

close

website features

_ipod classic player ver 1.0
relatively limited due to my beginner js abilities. uses iframes so at times the screen will blink when clicking on buttons.

_dropdown nav bar on click:

<style> .nav{ width:100%; background-color: white; height: 50px; } .linkcontainer{ width:25%; position:relative; float:left; height:100%; border-right:2px black solid; box-sizing: border-box; } .link{ cursor: pointer; width: 100%; border: none; outline: none; background: none; font-size: 20px; height:100%; } .link:hover{ background-color: grey; } .dropdowncontainer{ width: 70%; border-bottom: 2px black solid; background-color: white; height:25px; } .dropdowncontainer:hover{ background-color: rgb(175, 173, 173); } .dropdown { display: none; overflow: hidden; width:80px; } </style> <div class="nav"> <div class="linkcontainer"> <div class="link"> <button class="link">nav1</button> </div> <div class="dropdown"> <div class="dropdowncontainer"> <a href="">link1</a> </div> <div class="dropdowncontainer"> <a href="">link2</a> </div> <div class="dropdowncontainer"> <a href="">link3</a> </div> </div> </div> <div class="linkcontainer"> <div class="link"> <button class="link">nav2</button> </div> <div class="dropdown"> <div class="dropdowncontainer"> <a href="">link1</a> </div> <div class="dropdowncontainer"> <a href="">link2</a> </div> <div class="dropdowncontainer"> <a href="">link3</a> </div> </div> </div> <div class="linkcontainer"> <div class="link"> <button class="link">nav3</button> </div> <div class="dropdown"> <div class="dropdowncontainer"> <a href="">link1</a> </div> <div class="dropdowncontainer"> <a href="">link2</a> </div> <div class="dropdowncontainer"> <a href="">link3</a> </div> </div> </div> <div class="linkcontainer"> <div class="link"> <button class="link">nav4</button> </div> <div class="dropdown"> <div class="dropdowncontainer"> <a href="">link1</a> </div> <div class="dropdowncontainer"> <a href="">link2</a> </div> <div class="dropdowncontainer"> <a href="">link3</a> </div> </div> </div> </div> <script> var acc = document.getElementsByClassName("link"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdown = this.nextElementSibling; if (dropdown.style.display === "contents") { dropdown.style.display = "none"; } else { dropdown.style.display = "contents"; } }); } </script>