Как сделать так, чтобы выпадающий контент перемещался вправо при переполнении
Я пытаюсь создать раскрывающийся компонент (в Reactjs), и у меня возникают проблемы с тем, как сделать так, чтобы он не появлялся за пределами ширины браузера.
Я пытался установить right: 0px, он отлично работает, когда выпадающий список находится в самом правом углу панели, но если выпадающего списка нет, он перепутался.
здесь — кодовая ручка для примера.
вот пример css
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
вот пример html
<li class = "dropdown">
<a href = "javascript:void(0)" class = "dropbtn">Dropdown</a>
<div class = "dropdown-content">
<a href = "#">Link 1</a>
<a href = "#">Link 2</a>
<a href = "#">Link 3</a>
</div>
</li>
, вы можете заметить, что там есть полоса прокрутки.
Чего я хочу добиться, так это того, что я могу правильно выровнять раскрывающийся контент относительно раскрывающегося заголовка.
Спасибо
Вы открыты для решения с использованием JavaScript?
Я пытаюсь добиться этого, используя либо чистый css, либо React+css, поэтому JavaScript может быть не таким идеальным.
React+css потребует от вас написания JavaScript, верно? То, о чем вы просите, является довольно распространенной проблемой при работе с меню. Вы можете использовать реакция-поппер или черпать оттуда вдохновение, как с этим справиться.
Ответы 1
Вам просто нужно настроить содержимое раскрывающегося списка справа. Один из возможных способов следующий
<div class = "dropdown-content d2">
<a href = "#">Link 1</a>
<a href = "#">Link 2</a>
<a href = "#">Link 3</a>
</div>
.d2 {
right:0;
}
Пингуйте меня, если у вас есть какие-либо вопросы.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
float: right;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
div.dropbtn {
display: inline-block;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.d2 {
right:0;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a href = "#home">Home</a></li>
<li><a href = "#news">News</a></li>
<li class = "dropdown">
<a href = "javascript:void(0)" class = "dropbtn">Dropdown</a>
<div class = "dropdown-content d2">
<a href = "#">Link 1</a>
<a href = "#">Link 2</a>
<a href = "#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
<div class = "dropdown">
<a href = "javascript:void(0)" class = "dropbtn">some other dropdown</a>
<div class = "dropdown-content">
<a href = "#">Link 1</a>
<a href = "#">Link 2</a>
<a href = "#">Link 3</a>
</div>
</div>
</body>
</html>ОП уже пробовал это. «Я пытался установить правильно: 0px, он отлично работает, когда выпадающий список находится в самом правом углу панели, но если выпадающий список не находится, он перепутался».
вы должны установить разные стили на основе местоположения, например. теперь у вас есть меню, одно выровнено по правому краю, а другое по левому. Вот почему я добавил отдельный класс для правого бокового меню. Вы можете поделиться своим полным шаблоном, если у вас есть дополнительные вопросы в настройках меню. Вы также можете условно добавлять классы в раскрывающиеся списки стилей в зависимости от позиции.
Я просто пытаюсь получить ответ на вопрос ОП. Просто измените порядок Home, News и Dropdown, и вы увидите проблему, которую пытается объяснить OP.
конечной целью этого вопроса является правильное выравнивание содержимого раскрывающегося списка с контейнером заголовка раскрывающегося списка, и мне нужно более общее решение, которое создает разные стили для разных элементов управления, потому что мне нужно сделать веб-сайт многоязычным и жестко запрограммировать каждое правильное выравнивание. вниз просто невозможно.
есть ли у вас макет конечного результата, которого вы хотите достичь, например, какой макет столбца вы хотите сделать. 2-х или 3-х колоночный макет или верхний заголовок с элементами выравнивания по правому краю, навигацией по левому краю и т. д. Потому что таким образом мы можем просто нажать и попробовать и не сможем дать подходящее решение.
Глядя на макеты, мы можем определить ограничения и возможности css. В текущем примере нет иерархии.
Можете ли вы показать здесь части соответствующего кода, а не просто связать его?