Нужно заставить необычную навигацию работать на всех размерах экрана

Question

Я использую необычную навигацию, как видно здесь .Когда пользователь наводит курсор на полосу, он выдвигается на экран.Все это работает нормально.Проблема в том, что я не могу найти CSS для выравнивания кнопок слева от края экрана (как видно на изображении), независимо от размеров дисплея.

Я изначально пробовал:

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

, который работал отлично.Но только на моем экране.Я думал, что позиция: абсолютная внутренняя позиция: относительная будет работать независимо от размеров экрана, но, очевидно, была неправильной.

Затем я попробовал несколько вариантов динамической регулировки ширины экрана в контейнере 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 секунды) переместит их в «нормальное» положение при наведении курсора.Я только переместил их на 100 пикселей за пределы экрана, чтобы вы могли их видеть.Дайте мне знать, если вы действительно хотите получить другой эффект.

#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>