固定位置内の絶対位置

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あなたはメニューが開いている場合はハンバーガーが右にaligntする必要があります。これにより

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

に役立ちます。

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>