ul 탭메뉴
본문
<!-- TAB CONTROLLERS -->
<input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios">
<input id="panel-3-ctrl" class="panel-radios" type="radio" name="tab-radios">
<!-- TABS LIST -->
<ul id="tabs-list">
<!-- MENU TOGGLE -->
<li id="li-for-panel-1">
<label class="panel-label" for="panel-1-ctrl">Tab1</label>
</li>
<li id="li-for-panel-2">
<label class="panel-label" for="panel-2-ctrl">Tab2</label>
</li>
<li id="li-for-panel-3">
<label class="panel-label" for="panel-3-ctrl">Tab3</label>
</li>
</ul>
<!-- THE PANELS -->
<article id="panels">
<div class="container">
<section id="panel-1">
<main>
<p>Content1</p>
</main>
</section>
<section id="panel-2">
<main>
<p>Content2</p>
</main>
</section>
<section id="panel-3">
<main>
<p>Content3</p>
</main>
</section>
</div>
</article>
-------------------------------css-----------------------------
label.panel-label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
width: 100%;
color: #bdc3c7;
cursor: pointer;
background-color: #ecf0f1;
-webkit-transition-property: background-color, color;
transition-property: background-color, color;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
label.panel-label:hover {
color: #003399;
}
#panels {
background-color: white;
}
#panels .container {
margin: 0 auto;
width: 90%;
}
#panels section header label.panel-label {
padding: 12px 24px;
box-sizing: border-box;
}
#panels section main {
box-sizing: border-box;
max-height: 0;
opacity: 0;
-webkit-transition: opacity 600ms;
transition: opacity 600ms;
overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
#panel-2-ctrl:checked ~ #panels #panel-2 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
#panel-3-ctrl:checked ~ #panels #panel-3 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last {
border-right: 1px solid transparent;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
border-left: 1px solid #dfdfdf;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
background-color: white;
color: #003399;
padding-top: 24px;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after {
height: 6px;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last {
border-right: 1px solid transparent;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
border-left: 1px solid #dfdfdf;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
background-color: white;
color: #003399;
padding-top: 24px;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after {
height: 6px;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last {
border-right: 1px solid transparent;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {
border-left: 1px solid #dfdfdf;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
background-color: white;
color: #003399;
padding-top: 24px;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after {
height: 6px;
}
ul#tabs-list {
display: flex;
justify-content: center;
list-style: none;
text-align: center;
border-bottom: 1px solid #dfdfdf;
margin: 0;
padding: 0;
text-align: center;
border-bottom: 1px solid #dfdfdf;
}
ul#tabs-list li {
display: flex;
text-align: center;
font-size: 0.875em;
width: 18%;
box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
border-right: 1px solid #dfdfdf;
position: relative;
}
ul#tabs-list li:hover {
-webkit-transition: none;
transition: none;
border-right: none;
}
ul#tabs-list li:hover.last {
border-right: 1px solid transparent;
}
ul#tabs-list li:hover + li {
border-left: 1px solid #dfdfdf;
}
ul#tabs-list li label.panel-label {
position: relative;
padding: 24px 0;
font-size: 0.875em;
}
ul#tabs-list li label.panel-label::after {
content: "";
position: absolute;
width: 100%;
left: 0;
bottom: 100%;
background-color: #f16b6f;
height: 0;
-webkit-transition-property: height;
transition-property: height;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
ul#tabs-list li label.panel-label:hover {
padding-top: 24px;
}
ul#tabs-list li label.panel-label:hover::after {
height: 6px;
}
main {
width: 70%;
margin: 0 auto;
}
.panel-radios {
display: none;
}
body {
background: #f16b6f;
color: #444;
}
main p {
line-height: 1.8;
}
크롬에서는 잘작동한느데
익스에서는 내용 위치가 각각 변해서 나옵니다 ㅜㅠㅜ
뭐가 문제일가요
답변 1
#panels section main {
box-sizing: border-box;
max-height: 0;
opacity: 0;
-webkit-transition: opacity 600ms;
transition: opacity 600ms;
overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
#panel-2-ctrl:checked ~ #panels #panel-2 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
#panel-3-ctrl:checked ~ #panels #panel-3 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}
opacity로 처리하셔서 보이진 않지만 내용이 남아있어서 익스에서 이상하게 보이는 듯 합니다.
각각 display:none과 display:block으로 처리하시면 익스에서도 의도하신대로 잘 나올 꺼 같습니다.
아니면 opacity를 그대로 냅두고 position:absolute를 이용해서 내용이 같은 위치에 오게 하면 될 듯 합니다.