<h1>Transitional Interfaces</h1>
<div class="example-row">
<div class="example example-one">
<h2>List Item Adding <span>Dumb Computer</span></h2>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<button>Add</button>
</div><!-- end example 1 -->
<div class="example example-four">
<h2>Details View <span>Dumb Computer<span></h2>
<div class="hider">
<div class="slider-wrap" id="example-four-slider-wrap">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li id="ex-four-button" role="button">List Summary →</li>
<li>...</li>
<li>...</li>
</ul>
<div class="summary">
<h3>List Summary</h3>
<p>Blah blah blah</p>
<button id="example-four-close">close</button>
</div>
</div>
</div>
</div><!-- end example 4 -->
</div><!-- end row -->
<div class="example-row">
<div class="example example-two">
<h2>List Item Adding <span>Brain Clue #1</span></h2>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<button>Add</button>
</div><!-- end example 2 -->
<div class="example example-five">
<h2>Details View <span>Brain Clue #1</span></h2>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li id="ex-five-button">
<span class="title">List Summary</span>
<div class="details">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</li>
<li>...</li>
<li>...</li>
</ul>
</div><!-- end example 5 -->
</div><!-- end row -->
<div class="example-row">
<div class="example example-three">
<h2>List Item Adding <span>Brain Clue #2</span></h2>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<button>Add</button>
</div><!-- end example 3 -->
<div class="example example-six">
<h2>Details View <span>Brain Clue #2</span></h2>
<ul id="example-six-list">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li id="ex-six-button">
<span class="title">List Summary</span>
<div class="details">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<a href="#0" class="close-button" role="button" title="close">×</a>
</li>
<li>...</li>
</ul>
</div><!-- end example 6 -->
</div><!-- end row -->* {
box-sizing: border-box;
}
body {
font: 12px/1.4 "Lucida Grande", Sans-Serif;
}
.example-row {
overflow: hidden;
margin-bottom: 50px;
}
.example {
width: 50%;
float: left;
padding: 0 30px;
}
ul {
list-style: none;
}
li {
background: #e6e6e6;
padding: 0 10px;
overflow: hidden;
margin-bottom: 2px;
line-height: 2.5;
}
h1, h2, h3 {
font: bold 36px Sans-Serif;
}
h1 {
padding: 30px;
}
h2 {
font-size: 24px;
margin: 0 0 5px 0;
letter-spacing: -1px;
}
h2 span {
display: block;
font-size: 16px;
color: black !important;
}
h3 {
font-size: 16px;
margin: 0 0 5px 0;
}
.example-one h2, .example-two h2, .example-three h2 {
color: #21c677;
}
.example-four h2, .example-five h2, .example-six h2 {
color: #9e21fe;
}
.example-one .new-item {
background: #aeec88;
}
.example-two .new-item {
background: #aeec88;
max-height: 0;
opacity: 0;
transform: scale(0);
animation: growHeight 0.2s ease forwards;
}
@keyframes growHeight {
to {
max-height: 50px;
opacity: 1;
transform: scale(1);
}
}
.example-three ul {
overflow: hidden;
}
.example-three .new-item {
background: #dbc0f7;
max-height: 0;
opacity: 0;
transform: translateX(-300px);
animation:
openSpace 0.2s ease forwards,
moveIn 0.3s 0.2s ease forwards;
}
@keyframes openSpace {
to {
max-height: 50px;
}
}
@keyframes moveIn {
to {
opacity: 1;
transform: translateX(0);
}
}
.example-four {
overflow: hidden;
}
#ex-four-button:hover {
background: #ccc;
}
.hider {
overflow: hidden;
}
.slider-wrap {
width: 200%;
position: relative;
transition: transform 0.5s linear;
}
.slider-wrap.open {
transform: translateX(-50.1%);
}
.example-four ul {
width: 50%;
}
.example-four .summary {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
padding: 20px;
}
.example-five .details {
display: none;
line-height: 1.4;
padding-bottom: 10px;
}
#ex-five-button {
transition: background 0.2s ease;
}
#ex-five-button.open {
background: #a8ffd5;
}
#ex-five-button.open .title {
font-weight: bold;
}
.example-six .details {
display: none;
line-height: 1.4;
padding-bottom: 10px;
}
#ex-six-button {
position: relative;
transition: transform 0.2s ease;
}
#ex-six-button.open {
background: #a8ffd5;
padding: 20px;
transform:
translateY(-60px)
scale(2.8);
}
#example-six-list {
transition: transform 0.2s ease;
}
#example-six-list.open {
transform:
translateY(-40px)
scale(0.4);
}
#example-six-list.open .title {
font-weight: bold;
font-size: 120%;
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
font-weight: bold;
color: black;
text-decoration: none;
font-size: 25px;
line-height: 1;
display: none;
}
#ex-six-button.open .close-button {
display: block;
}$("button").on("click", function() {
var insertPoint = $(this).parent().find("li:nth-child(3)");
$("<li />", {
'text': "New Item",
'class': "new-item"
}).insertAfter(insertPoint);
});
$("#ex-four-button, #example-four-close").on("click", function() {
$("#example-four-slider-wrap").toggleClass("open");
});
$("#ex-five-button").on("click", function() {
$(this)
.toggleClass("open")
.find(".details")
.slideToggle();
});
$("#ex-six-button").on("click", function() {
$("#example-six-list").toggleClass("open");
$(this)
.toggleClass("open")
.find(".details")
.slideToggle();
});
External CSS
This Pen doesn't use any external CSS resources.