Position absolut innerhalb einer festen Position

Question

Ich habe ein "Hamburger" -Menü, das über die gesamte Seite festgelegt ist.
Wenn der "Hamburger" angeklickt wird, öffnet sich ein Menü von links bis zu 50% der Breite der Seite.

Das Symbol "Hamburger" wird mit dem Menü nach rechts verschoben. Ich möchte, dass das Symbol ganz rechts auf der Seite angezeigt wird.

Da die Seite unterschiedliche Breiten haben kann (100%) kann ich width in px nicht einstellen.

jQuery(document).ready(function($) { 
 
    $('a#click-a').click(function() { 
 
    $('.hoofdmenu').toggleClass('nav-view'); 
 
    }); 
 

 
});

.hamburger { 
 
    display: block; 
 
    position: absolute; 
 
    top: -7px; 
 
    left: 300px; 
 
} 
 
.hoofdmenu { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0px; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: #333; 
 
    transform: translateX(-100%); 
 
    transition: transform 0.3s ease-in-out; 
 
    z-index: 9999; 
 
} 
 
.nav-view { 
 
    transform: translateX(0); 
 
} 
 
.nav-view div.hamburger { 
 
    left: 330px; 
 
} 
 
.hoofdmenu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.hoofdmenu ul li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.hoofdmenu ul li a { 
 
    color: #fff; 
 
    display: block; 
 
    padding: 10px; 
 
    border-bottom: solid 1px rgba(255, 255, 255, 0.4); 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hoofdmenu"> 
 
    <div class="hamburger"> 
 
    <a href="#" id="click-a"> 
 
     <img width="80" height="80" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/220px-Hamburger_icon.svg.png"> 
 
    </a> 
 
    </div> 
 
    <a href="#" style="color:#FFF;">Link</a> 
 
</div>

Kann mir jemand sagen, wie dieses Problem beheben?

Answer 1

Ich bin nicht sicher, was Sie wollen, aber vielleicht das Gerät vw hilft Ihnen

.nav-view div.hamburger { 
    left: 85vw; 
} 

Mit diesem Hamburger sollte auf der rechten Seite alignt werden, wenn das Menü geöffnet wird.

jQuery(document).ready(function($) { 
 
    $('a#click-a').click(function() { 
 
    $('.hoofdmenu').toggleClass('nav-view'); 
 
    }); 
 
});

.hamburger { 
 
    display: block; 
 
    position: absolute; 
 
    top: -7px; 
 
    left: 300px; 
 
} 
 
.hoofdmenu { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0px; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: #333; 
 
    transform: translateX(-100%); 
 
    transition: transform 0.3s ease-in-out; 
 
    z-index: 9999; 
 
} 
 
.nav-view { 
 
    transform: translateX(0); 
 
} 
 
.nav-view div.hamburger { 
 
    left: 85vw; 
 
} 
 
.hoofdmenu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.hoofdmenu ul li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.hoofdmenu ul li a { 
 
    color: #fff; 
 
    display: block; 
 
    padding: 10px; 
 
    border-bottom: solid 1px rgba(255, 255, 255, 0.4); 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hoofdmenu"> 
 
    <div class="hamburger"> 
 
    <a href="#" id="click-a"> 
 
     <img width="80" height="80" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/220px-Hamburger_icon.svg.png"> 
 
    </a> 
 
    </div> 
 
    <a href="#" style="color:#FFF;">Link</a> 
 
</div>