Question
Dynamic Page Content When Using Flex
Hi Guys,
I'm curious how you would implement dynamic page content using Flex. I found a sample that I thought was pretty interesting and wanted to try using it in my template but the sample doesn't use flex so I'm guessubg that it would have to be modified. This is the original HTML and CSS code. What aspects of it would have to be modified to work with Flex? Thanks In Advance.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS Tabs Revisited</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<main>
<h1>CSS Tabs Revisited</h1>
<input id="menuitemone" type="radio" name="menutabs" checked>
<input id="menuitemtwo" type="radio" name="menutabs">
<input id="menuitemthree" type="radio" name="menutabs">
<input id="menuitemfour" type="radio" name="menutabs">
<div id="menutabs">
<label id="menutabone" for="menuitemone">Home</label>
<label id="menutabtwo" for="menuitemtwo">Services</label>
<label id="menutabthree" for="menuitemthree">Locations</label>
<label id="menutabfour" for="menuitemfour">Profile</label>
</div>
<div id="content">
<section id="content1">
<h3>Based on this Dribbble</h3>
<p>
<a href="https://dribbble.com/shots/509024-Tabbed-Menu">
https://dribbble.com/shots/509024-Tabbed-Menu
</a>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis adipiscing risus, porttitor viverra urna condimentum et. Donec vestibulum lacus vel dolor dictum pellentesque. Aliquam sodales sem quis urna condimentum, sit amet elementum magna semper.</p>
</section>
<section id="content2">
<h3>Something Clever</h3>
<p>Aliquam condimentum hendrerit nisi, nec vestibulum mi feugiat ut. Donec lobortis nisi neque, in egestas eros venenatis eu. Vestibulum nulla nisi, venenatis at pretium id, fermentum quis risus. Quisque porta suscipit neque eu placerat. Etiam scelerisque, quam in sodales iaculis, velit velit mattis nunc, quis dapibus massa elit nec enim. Vivamus quis libero aliquam, volutpat nisl sed, consectetur ante.</p>
<p>Donec aliquam semper felis, in placerat leo blandit in. Integer interdum elit quis felis tempor venenatis. In faucibus ac mauris id commodo. Proin in sapien tincidunt, luctus mi id, bibendum dui. Nunc tincidunt libero ut purus vehicula, sit amet tincidunt mi sollicitudin. Donec varius erat magna, sed convallis purus adipiscing ut. Duis sagittis ut leo ut auctor. Ut convallis nisl nec purus sollicitudin, nec iaculis felis rutrum. </p>
</section>
<section id="content3">
<h3>Interesting Heading Text</h3>
<p>Fusce pulvinar porttitor dui, eget ultrices nulla tincidunt vel. Suspendisse faucibus lacinia tellus, et viverra ligula. Suspendisse eget ipsum auctor, congue metus vel, dictum erat. Aenean tristique euismod molestie. Nulla rutrum accumsan nisl, ac semper sapien tincidunt et. Praesent tortor risus, commodo et sagittis nec, aliquam quis augue. Aenean non elit elementum, tempor metus at, aliquam felis.</p>
</section>
<section id="content4">
<h3>Here Are Many Words</h3>
<p>Vivamus convallis lectus lobortis dapibus ultricies. Sed fringilla vitae velit id rutrum. Maecenas metus felis, congue ut ante vitae, porta cursus risus. Nulla facilisi. Praesent vel ligula et erat euismod luctus. Etiam scelerisque placerat dapibus. Vivamus a mauris gravida urna mattis accumsan.</p>
<p>Duis sagittis massa vel elit tincidunt, sed molestie lacus dictum. Mauris elementum, neque eu dapibus gravida, eros arcu euismod metus, vitae porttitor nibh elit at orci. Vestibulum laoreet id nulla sit amet mattis.</p>
</section>
</div>
<footer>
</footer>
</main>
<!-- partial -->
</body>
</html>@1552174 url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
background: #B1A7A0;
color: #FCF9F4;
font-family: "Open Sans", "Arial";
}
main {
max-width: device-width;
margin: 30px auto;
background: #3F3F3D;
padding: 30px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
input[name=menutabs] {
display: none;
}
a {
color: #3E6EB6;
}
#menutabs {
padding: 0 0 0 50px;
width: calc(100% + 50px);
margin-left: -50px;
background: #2B2A28;
height: 80px;
border-top: 5px solid #3E6EB6;
border-bottom: 5px solid #3E6EB6;
box-shadow: 0 3px 5px #00000033;
}
#menutabs::before {
content: "";
display: block;
position: absolute;
z-index: -100;
width: 100%;
left: 0;
margin-top: 16px;
height: 80px;
background: #2B2A28;
border-bottom: 5px solid #3E6EB6;
}
#menutabs::after {
content: "";
display: block;
position: absolute;
z-index: 0;
height: 80px;
width: 102px;
background: #3E6EB6;
transition: transform 400ms;
}
#menutabs label {
position: relative;
z-index: 100;
display: block;
float: left;
font-size: 11px;
text-transform: uppercase;
text-align: center;
width: 100px;
height: 100%;
border-right: 1px dotted #575654;
cursor: pointer;
}
#menutabs label:first-child {
border-left: 1px dotted #575654;
}
#menutabs label::before {
content: "";
display: block;
height: 30px;
width: 30px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: invert(40%);
margin: 10px auto;
}
#menutabone::before {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/paper-plane.png);
}
#menutabtwo::before {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/big-cloud.png);
}
#menutabthree::before {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/folding-brochure.png);
}
#menutabfour::before {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/mans-silhouette.png);
}
#menuitemone:checked ~ #menutabs #menutabone::before, #menuitemtwo:checked ~ #menutabs #menutabtwo::before, #menuitemthree:checked ~ #menutabs menutabthree::before, #menuitemfour:checked ~ #menutabs #menutabfour::before {
filter: invert(100%);
}
#menuitemone:checked ~ #menutabs::after {
transform: translateX(0);
}
#menuitemtwo:checked ~ #menutabs::after {
transform: translateX(101px);
}
#menuitemthree:checked ~ #menutabs::after {
transform: translateX(202px);
}
#menuitemfour:checked ~ #menutabs::after {
transform: translateX(303px);
}
#content {
position: relative;
height: 500px;
}
#content::before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
margin-left: -50px;
border-top: 8px solid #000;
border-right: 10px solid #000;
border-left: 10px solid transparent;
border-bottom: 8px solid transparent;
}
#content::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
margin-left: calc(100% + 30px);
border-top: 8px solid #000;
border-left: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 8px solid transparent;
}
#content section {
position: absolute;
transform: translateY(50px);
opacity: 0;
transition: transform 500ms, opacity 500ms;
}
#menuitemone:checked ~ #content #content1, #menuitemtwo:checked ~ #content #content2, #menuitemthree:checked ~ #content #content3, #menuitemfour:checked ~ #content #content4 {
transform: translateY(0);
opacity: 1;
}
footer {
position: fixed;
bottom: 0;
right: 0;
font-size: 13px;
background: #555;
padding: 5px 10px;
margin: 5px;
}
AdChoices