Позиция абсолютная в фиксированной позиции

Question

У меня есть меню «гамбургер», которое фиксируется на всей странице.
Если щелкнуть «гамбургер», меню открывается с левой стороны до 50% ширины страницы.

Значок «гамбургер» сместился вправо с помощью меню. Я хочу, чтобы значок скользил по абсолютному праву страницы.

Поскольку страница может иметь разную ширину (100%), я не могу установить width в px.

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>

Может кто-нибудь сказать мне, как это исправить?

Answer 1

Я не уверен, что вы хотите, но, возможно, блок vw помогает вам

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

С этим гамбургер должен быть alignt справа при открытии меню.

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>