Как сделать меню с окантовкой активного пункта только с 3-х сторон?
Мое меню имеет 2 границы: основную вертикальную границу справа от всего меню и границу (сверху, снизу, слева) активного элемента. Правая граница активного элемента должна быть пустой. Основная граница должна прерываться в том же месте, где была прервана правая граница активного элемента. Обратите внимание, что любой из элементов может быть активным, поэтому прерывание основной границы не может быть жестко запрограммировано.
.container {
border-right: 1px solid;
width: 200px;
padding-top: 20px;
padding-bottom: 20px;
}
.item {
padding: 10px;
}
.active {
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
}<div class = "container">
<div class = "item active">
Test1
</div>
<div class = "item">
Test2
</div>
<div class = "item">
Test3
</div>
</div>
Ответы 5
Чтобы получить ожидаемый результат, перепишите приведенные выше стили:
.container {
width: 200px;
padding-top: 20px;
padding-bottom: 20px;
border-right:1px solid black
}
.item {
width: 179px;
padding: 10px;
}
.item:first-child {
border-right: 1px solid white;
}
.active {
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
}<div class = "container">
<div class = "item active">
Test1
</div>
<div class = "item">
Test2
</div>
<div class = "item">
Test3
</div>
</div>Я думал об этом, но мне это не подходит, потому что мне нужна правая граница меню на всю высоту меню jsfiddle.net/z5tk40ru
@Kvasimodo Пожалуйста, проверьте, будет ли это работать #CSS #HTML
Как сейчас написано, ваш ответ неясен. Пожалуйста, отредактируйте , чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Более подробную информацию о том, как писать хорошие ответы, вы можете найти в справочном центре.
Вы не можете «прервать» границу контейнера для конкретного дочернего элемента.
Единственный вариант — «скрыть» этот участок границы с помощью цветной рамки на дочернем элементе над этим участком границы.
Я бы предложил позиционированный псевдоэлемент с тем же фоном, что и фон контейнера.
.container {
border-right: 1px solid;
width: 200px;
padding-top: 20px;
padding-bottom: 20px;
}
.item {
padding: 10px;
}
.item.active {
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
position: relative;
}
.item.active::after {
content: "";
height: 100%;
width: 1px;
position: absolute;
top: 0;
right: -1px;
background: white;
}<div class = "container">
<div class = "item active">
Test1
</div>
<div class = "item">
Test2
</div>
<div class = "item">
Test3
</div>
</div>Честно говоря, мне больше нравится ваш результат, так как мне не хватает 2 пикселей при использовании box-shadow.
Чтобы добиться такого поведения, установите для фона активного элемента непрозрачный цвет и установите для width активного элемента значение:
containerWidth - padding * 2
Где containerWidth — ширина родительского элемента-контейнера, а padding — размер заполнения активного элемента. В данном случае это 180px:
.container {
border-right: 1px solid;
width: 200px;
padding-top: 20px;
padding-bottom: 20px;
}
.item {
padding: 10px;
}
.active {
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
width: 180px;
background-color: #fff;
}<div class = "container">
<div class = "item active">
Test1
</div>
<div class = "item">
Test2
</div>
<div class = "item">
Test3
</div>
</div>Вы можете добавить box-shadow в правую часть, чтобы скрыть границу.
.container {
border-right: 1px solid;
width: 200px;
padding-top: 20px;
padding-bottom: 20px;
}
.item {
padding: 10px;
}
.active {
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
box-shadow: 1px 0px 0px 0px white;
}<div class = "container">
<div class = "item active">
Test1
</div>
<div class = "item">
Test2
</div>
<div class = "item">
Test3
</div>
</div>Вы можете добавить margin-right: -1px; и background: white; в CSS класса .active.
const items = document.querySelectorAll('.item');
function RemoveActive() {
for (let i = 0; i < items.length; i++) {
if (items[i].classList.contains('active')) {
items[i].classList.remove('active');
}
}
}
for (let i = 0; i < items.length; i++) {
items[i].addEventListener('click', function() {
RemoveActive();
items[i].classList.add('active');
})
}.container {
width: 200px;
padding-top: 20px;
padding-bottom: 20px;
position: relative;
border-right: 1px solid;
}
.item {
padding: 10px;
position: relative;
}
.active {
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
margin-right: -1px;
background: white;
}<div class = "container">
<div class = "item active">
Test1
</div>
<div class = "item">
Test2
</div>
<div class = "item">
Test3
</div>
</div>Обратите внимание, что вместо создания целой функции removeActive вы можете просто выбрать элемент .active и удалить его класс, пример: document.getElementsByClassName("active")[0].classList.remove("active");
В лучшем случае вы можете переключить правую границу на пункты меню - codepen.io/Paulie-D/pen/QWRdWRB Ваша правая граница находится на контейнере, и вы не можете скрыть ее для дочернего элемента...