需要在所有屏幕尺寸上進行異常導航

Question

我使用somehwat不尋常的導航，因為看到這里 。 當用戶將鼠標懸停在條上時，它們會滑出視圖。 所有這些都很好。 問題是，無論顯示尺寸如何，我都無法找到使按鈕對齊屏幕邊緣左側的CSS（如圖中所示）。

我最初嘗試過：

<style>
#container {width: 600px; height: 25px; position: relative;} 
#bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}"; 
</style> 

哪個工作完美。 但僅在我的屏幕上。 我認為不管屏幕尺寸如何，position：absolute內部位置：relative都可以​​工作，但是顯然是錯誤的。

然后，我嘗試了使用運行onload的函數動態調整容器div中的屏幕寬度的幾種變體：

function populateArrays() {                 
  for (i = 0; i <= 5; i++) {
    position[i] = -340; 
    bar[i] = document.getElementById("bar" + i.toString());
    id[i] = i; 
  }
    var sheet = document.createElement('style'); 
    var sWidth = screen.width; 
    sheet.innerHTML = "#container {width: " + sWidth + "px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}"; 
    document.body.appendChild(sheet);           
}

但這也不起作用。

無論尺寸如何，將圖像對齊到屏幕最左側（部分（大部分））的正確方法是什么？

謝謝

編輯：請求HTML。 我不知道這是否有幫助，問題似乎是正確地調整了CSS（也許使用JavaScript）。

<div id ="container">
    <br><br><br><br>
    <img src="homeSilverGlassText.png" alt="Home" width="200" height="35" id="bar0" onmouseover="startMove(0)" />
    <br><br><br><br>
    <img src="aboutSilverGlassText.png" alt="Anout Me" width="200" height="35" id="bar1" onmouseover="startMove(1)" />
    <br><br><br><br>
    <img src="contactSilverGlassText.png" alt="Contact Me" width="200" height="35" id="bar2" onmouseover="startMove(2)" />
    <br><br><br><br>
    <img src="gallerySilverGlassText.png" alt="Gallery" width="200" height="35" id="bar3" onmouseover="startMove(3)" />
    <br><br><br><br>
    <img src="uiSilverGlassText.png" alt="Design" width="200" height="35" id="bar4" onmouseover="startMove(4)" />
    <br><br><br><br>
    <img src="editSilverGlassText.png" alt="Editor" width="200" height="35" id="bar5" onmouseover="startMove(5)" />
</div>

尚未添加按鈕單擊的鏈接。

謝謝

Answer 1

我想我可能有你想要的。 但是，您的代碼確實不能很好地描述問題。 您的圖片只有200像素寬，您需要先將其向左移動340像素，這樣您才能完全看不到它們。 您要達到什么目的？ 我不確定這是否是您想要的百分之一百，但是此HTML / CSS會將圖像的一半移出屏幕，然后緩慢地（2秒）將它們移到懸停時的“正常”位置。 我只將它們移到了100px屏幕外，以便您可以實際看到它們。 讓我知道您是否真的會有所不同。

 #container { width: 600px; position: relative; } .bar { position: absolute; transition: left 2s; left: -100px; } .bar:hover { left: 0px; } 

 <div id="container"> <br><br><br><br> <img src="https://placehold.it/200x35" alt="Home" width="200" height="35" id="bar0" class="bar" /> <br><br><br><br> <img src="https://placehold.it/200x35" alt="Anout Me" width="200" height="35" id="bar1" class="bar" /> <br><br><br><br> <img src="https://placehold.it/200x35" alt="Contact Me" width="200" height="35" id="bar2" class="bar" /> <br><br><br><br> <img src="https://placehold.it/200x35" alt="Gallery" width="200" height="35" id="bar3" class="bar" /> <br><br><br><br> <img src="https://placehold.it/200x35" alt="Design" width="200" height="35" id="bar4" class="bar" /> <br><br><br><br> <img src="https://placehold.it/200x35" alt="Editor" width="200" height="35" id="bar5" class="bar" /> </div>