Navigation

Navigation mit JQuery hergestellt
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<script src="/js_webseite/jquery.js"></script> <style> body { margin: 0; } .link{ text-decoration: none; } #navbar{ height: 60px; top: 0; padding-left: 200px; padding-right: 200px; position: sticky; background: #1e222a; } #navbarItems{ height: 100%; display: flex; align-items: center; } #logoLink{ display: flex; align-items: center; } #navbarItems .navbarItem:not(:first-child){ margin-left: 30px; } .navbarItem{ background: #1e222a; } .navbarLink{ color: #ffffff; } .navbarLink:hover{ color: #3abcf3; } #btnMenuContainer{ height: 100%; display: none; } #btnMenu { cursor: pointer; } .menuBtnBar { width: 35px; height: 5px; margin: 6px 0; background-color: #ffffff; transition: 0.4s; } .activeMenuBtn #barTop { transform: rotate(-45deg) translate(-9px, 6px); } .activeMenuBtn #barCenter { opacity: 0; } .activeMenuBtn #barBottom { transform: rotate(45deg) translate(-8px, -8px); } @media(max-width: 1200px){ #navbar{ padding-left: 150px; padding-right: 150px; } } @media(max-width: 1100px){ #navbar{ padding-left: 0; padding-right: 0; } #btnMenuContainer { display: flex; align-items: center; } #btnMenu { margin-left: 20px; } #navbarItems { margin-left: 0; display:none; height:calc(100vh - 60px); } #logoLink{ display: inline-block; } .navbarItem{ width: 100%; text-align: center; display:flex; flex:1; align-items: center; align-items: center; } #navbarItems .navbarItem:not(:first-child){ margin-left: 0; } #navbarItems .navbarItem:not(:last-child){ border-bottom: 1px solid #676767; } .navbarLink { width: 100%; padding: 30px; } #navbarItems.activeNavbar{ display: flex; flex-direction:column; } } </style> <body> <div id="navbar"> <div id="btnMenuContainer"> <div id="btnMenu"> <div id="barTop" class="menuBtnBar"></div> <div id="barCenter" class="menuBtnBar"></div> <div id="barBottom" class="menuBtnBar"></div> </div> </div> <div id="navbarItems"> <div class="navbarItem"> <a id="logoLink" class="link navbarLink" href="#"> <img class="img" src="/image/Ok.webp"> </a> </div> <div class="navbarItem"> <a class="link navbarLink" href=""> Link 2 </a> </div> <div class="navbarItem"> <a class="link navbarLink" href=""> Link 3 </a> </div> <div class="navbarItem"> <a class="link navbarLink" href=""> Link 4 </a> </div> <div class="navbarItem"> <a class="link navbarLink" href=""> Link 5 </a> </div> </div> </div> <script> $(document).ready(() => { $("#btnMenu").click(() => { toggleMenu(); }); $(".navbarLink").click(() => { if ($("#navbarItems").hasClass("activeNavbar")) { toggleMenu(); } }); }); function toggleMenu() { $("#navbarItems").toggleClass("activeNavbar"); $("#btnMenu").toggleClass("activeMenuBtn"); } </script> </body>