Navigation
Navigation mit JQuery hergestellt
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>