[CSS] HTML & CSS Tabs example, tab menu 탭메뉴 만들기

■ CSS HTML & CSS Tabs example, tab menu 탭메뉴 만들기

HTML & CSS Tabs example

---

■ HTML

<div class='tabs'>
  <div class='tab'>
    <input type='radio' name='css-tabs' id='tab-1' checked class='tab-switch'>
    <label for='tab-1' class='tab-label'>Tab One</label>
    <div class='tab-content'>My father had a small estate in Nottinghamshire: I was the third of five sons. He sent me to Emanuel College in Cambridge at fourteen years old, where I resided three years, and applied myself close to my studies; but the charge of maintaining me, although I had a very scanty allowance, being too great for a narrow fortune, I was bound apprentice to Mr. James Bates, an eminent surgeon in London, with whom I continued four years. </div>
  </div>
  <div class='tab'>
    <input type='radio' name='css-tabs' id='tab-2' class='tab-switch'>
    <label for='tab-2' class='tab-label'>Tab Two</label>
    <div class='tab-content'>My father now and then sending me small sums of money, I laid them out in learning navigation, and other parts of the mathematics, useful to those who intend to travel, as I always believed it would be, some time or other, my fortune to do. </div>
  </div>
  <div class='tab'>
    <input type='radio' name='css-tabs' id='tab-3' class='tab-switch'>
    <label for='tab-3' class='tab-label'>Tab Three</label>
    <div class='tab-content'>When I left Mr. Bates, I went down to my father: where, by the assistance of him and my uncle John, and some other relations, I got forty pounds, and a promise of thirty pounds a year to maintain me at Leyden: there I studied physic two years and seven months, knowing it would be useful in long voyages.</div>
  </div>
</div>
<p>Example line outside of tab box</p>

■ CSS

* {
    box-sizing: border-box;
}
body {
    font-family: "Open Sans";
    background: #2c3e50;
    color: #ecf0f1;
    line-height: 1.618em;
}
.tabs {
    position: relative;
    margin: 3rem 0;
    background: #1abc9c;
    height: 14.75rem;
}
.tabs::before,
.tabs::after {
    content: "";
    display: table;
}
.tabs::after {
    clear: both;
}
.tab {
    float: left;
}
.tab-switch {
    display: none;
}
.tab-label {
    position: relative;
    display: block;
    line-height: 2.75em;
    height: 3em;
    padding: 0 1.618em;
    background: #1abc9c;
    border-right: 0.125rem solid #16a085;
    color: #fff;
    cursor: pointer;
    top: 0;
    transition: all 0.25s;
}
.tab-label:hover {
    top: -0.25rem;
    transition: top 0.25s;
}
.tab-content {
    height: 12rem;
    position: absolute;
    z-index: 1;
    top: 2.75em;
    left: 0;
    padding: 1.618rem;
    background: #fff;
    color: #2c3e50;
    border-bottom: 0.25rem solid #bdc3c7;
    opacity: 0;
    transition: all 0.35s;
}
.tab-switch:checked + .tab-label {
    background: #fff;
    color: #2c3e50;
    border-bottom: 0;
    border-right: 0.125rem solid #fff;
    transition: all 0.35s;
    z-index: 1;
    top: -0.0625rem;
}
.tab-switch:checked + label + .tab-content {
    z-index: 2;
    opacity: 1;
    transition: all 0.35s;
}