========= css ========= .nav-bar{ position: absolute; top: 0; left: 0; width: 100%; height: 8vh; background: black; } .nav-bar ul.ul-row-left{ position: absolute; float: left; left: 0; color: white; display: flex; list-style: none; margin: 0; padding: 0; } .nav-bar ul.ul-row-left li{ height: 8vh; width: 5vw; display: flex; justify-content: center; text-align:center; align-items: center; } .nav-bar ul.ul-row-left li:hover{ color: rebeccapurple; }
========= HTML =========
Navbar
About
Story
Navbar
About
Story
========= css ========= .nav-bar{ position: absolute; top: 0; left: 0; width: 100%; height: 8vh; background: black; } .nav-bar ul.ul-row-right{ float: right; right: 0; position: absolute; color: white; display: flex; list-style: none; margin: 0; padding: 0; } .nav-bar ul.ul-row-right li{ height: 8vh; width: 5vw; display: flex; justify-content: center; text-align:center; align-items: center; } .nav-bar ul.ul-row-right li:hover{ color: rebeccapurple; }
========= HTML =========
Navbar
About
Story
Navbar
About
Story
========= css ========= .nav-bar-vertical-left{ position: absolute; float: left; top: 0; left: 0; height: 100%; width: 5vw; background: black; } .nav-bar-vertical-left .ul-row-vertical-left{ position: absolute; display: inline-block; top: 0; left: 0; margin: 0; padding: 0; list-style: none; color: white; } .nav-bar-vertical-left .ul-row-vertical-left li{ height: 7vh; width: 5vw; display: flex; justify-content: center; text-align:center; align-items: center; } .nav-bar-vertical-left .ul-row-vertical-left li:hover{ color: aquamarine; }
========= HTML =========
Navbar
About
Story
Navbar
About
Story
========= css ========= .nav-bar-vertical-right{ position: absolute; float: right; top: 0; right: 0; height: 100%; width: 5vw; background: black; } .nav-bar-vertical-right .ul-row-vertical-right{ position: absolute; display: inline-block; top: 0; right: 0; margin: 0; padding: 0; list-style: none; color: white; } .nav-bar-vertical-right .ul-row-vertical-right li{ height: 7vh; width: 5vw; display: flex; justify-content: center; text-align:center; align-items: center; } .nav-bar-vertical-right .ul-row-vertical-right li:hover{ color: aquamarine; }
========= HTML =========
Navbar
About
Story
Navbar
About
Story
========= css ========= #right-slide{ position: absolute; float: right; right: 0; top: 0; height: 100vh; width: 0vw; background: red; transition: .5s ease-in-out; overflow: hidden; } #right-slide .card{ position: absolute; float: right; right: 0; top: 0; height: 100vh; width: 50vw; background: blue; transition: background .5s .5s ease-out; } .right-slide-h1{ position: absolute; float: left; top: 0; left: 0; margin: 0; background: black; color: white; padding: 20px 20px; } .right-slide-h1:hover ~ #right-slide{ width: 50%; background: red !important; } .right-slide-h1:hover ~ #right-slide > .card{ background: transparent; } .right-slide-h1:not(:hover) ~ #right-slide{ transition: 1s 1s ease-out; }
========= HTML =========
hover_here_for_right_side_slide
hello
hover_here
hello
========= css ========= #left-slide{ position: absolute; float: left; left: 0; top: 0; height: 100vh; width: 0vw; background: red; transition: .5s ease-in-out; overflow: hidden; } #left-slide .card{ position: absolute; float: left; left: 0; top: 0; height: 100vh; width: 50vw; background: blue; transition: background .5s .5s ease-out; } .left-slide-h1{ position: absolute; float: right; top: 0; right: 0; margin: 0; background: black; color: white; padding: 20px 20px; } .left-slide-h1:hover ~ #left-slide{ width: 50%; background: red !important; } .left-slide-h1:hover ~ #left-slide > .card{ background: transparent; } .left-slide-h1:not(:hover) ~ #left-slide{ transition: 1s 1s ease-out; }
========= HTML =========
hover_here_for_right_side_slide
hello
hover_here
hello
========= css ========= .left-open-bar{ position: absolute; float: left; top: 0; left: 0; font-size: 30px; margin: 0; padding: 10px 10px; transition: .5s ease-in-out; overflow: hidden; } .sliding-top-navbar{ position: absolute; top: 0; left: 0; width: 100%; /* height: 8vh; */ height: 0; background: black; transition: .5s ease-in-out; overflow: hidden; } .sliding-top-navbar ul.ul-row-left{ position: absolute; float: left; left: 0; color: white; display: flex; list-style: none; margin: 0; padding: 0; } .sliding-top-navbar ul.ul-row-left li{ position: relative; height: 8vh; width: 4vw; display: flex; justify-content: center; text-align:center; align-items: center; } .sliding-top-navbar ul.ul-row-left li .left-closed-bar{ color: red; font-size: 30px; } ========= JS ========= const _open_button = document.querySelector(".left-open-bar"); const _close_button = document.querySelector(".left-closed-bar"); const _navbar = document.querySelector(".sliding-top-navbar"); _open_button.addEventListener("click", show_navbar); _close_button.addEventListener("click", close_navbar); function show_navbar(){ _open_button.style.setProperty("background", "transparent"); _navbar.style.setProperty("height", "8vh"); } function close_navbar(){ _navbar.style.setProperty("height", "0vh"); }
========= HTML =========
Navbar
About
Story
Navbar
About
Story