https://alvarotrigo.com/blog/html-css-tabs/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <style> * { box-sizing: border-box; } body { font-family: "Open Sans"; background: #2c3e50; color: #ecf0f1; line-height: 1.618em; } .wrapper { max-width: 50rem; width: 100%; margin: 0 auto; } .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; } </style> </head> <body> <div class="wrapper"> <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> </div> </body> </html> |