小要素に合わせて、開閉の大きさ(高さ)を変更したいと考えています。
今は三つ分の小要素で設定されているようで、要素を減らしても三つ分の高さしか出てきません。
また、要素を増やしても、増やした小要素が表示されないと行った具合です。
単純に
<li>
<a href='#'>Quotes</a>
</li>
と追加すれば良いのかと思っていたのですが。。。
ご教授いただけると幸いです。
/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Oswald);
/* Variables */
/* Styles */
body {
background: #919c91;
/* font-family: "Oswald", sans-serif; */
}
body .title {
width: 500px;
margin: 0 auto;
text-align: center;
}
body .title h1, body .title h2 {
color: white;
font-weight: normal;
margin: 0;
text-shadow: 0px 2px rgba(0, 0, 0, 0.18);
}
body .title h1 {
font-size: 30px;
margin-top: 40px;
}
body .title h2 {
font-size: 15px;
margin-bottom: 30px;
}
body .wrapper {
width: 400px;
margin: 0 auto;
background: white;
border-radius: 4px;
position: relative;
box-shadow: 0px 2px rgba(0, 0, 0, 0.12);
}
body .wrapper label {
display: block;
position: relative;
color: #adadad;
overflow: hidden;
cursor: pointer;
height: 56px;
-webkit-transition: text-indent 0.2s;
text-indent: 20px;
padding-top: 1px;
}
body .wrapper ul {
margin: 0;
padding: 0;
}
body .wrapper li {
color: white;
list-style-type: none;
}
body .wrapper li a {
display: block;
width: 100%;
padding: 15px 0px;
text-decoration: none;
color: white;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body .wrapper li a:hover {
background-color: rgba(0, 0, 0, 0.06);
}
body .wrapper label:hover {
background: rgba(219, 222, 219, 0.6) !important;
color: #646765;
text-indent: 30px;
-webkit-transition: text-indent 0.2s;
transition: text-indent 0.2s;
}
body .wrapper input[type="checkbox"] {
display: none;
}
body .wrapper span {
height: 3px;
position: absolute;
width: 0px;
display: block;
top: 58px;
background: #585a5a;
}
body .wrapper .content {
height: 0;
background: rgba(153, 158, 153, 0.72);
height: 300px;
position: relative;
border-top: 2px solid rgba(0, 0, 0, 0.12);
top: 4px;
}
body .wrapper .lil_arrow {
width: 5px;
height: 5px;
-webkit-transition: transform 0.8s;
-webkit-transition: -webkit-transform 0.8s;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-top: 2px solid rgba(0, 0, 0, 0.33);
border-right: 2px solid rgba(0, 0, 0, 0.33);
float: right;
position: relative;
top: -30px;
right: 27px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
body .wrapper input[type="checkbox"]:checked + label > .content {
display: block;
}
body .wrapper input[type="checkbox"]:checked + label > span {
display: none;
}
body .wrapper input[type="checkbox"]:checked + label > .lil_arrow {
-webkit-transition: transform 0.8s;
-webkit-transition: -webkit-transform 0.8s;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
body .wrapper input[type="checkbox"]:checked + label {
display: block;
background: rgba(131, 136, 131, 0.6) !important;
color: #ffffff;
text-indent: 30px;
height: 225px;
-webkit-transition: height 0.8s;
transition: height 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
body .wrapper label:hover > span {
width: 100%;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: width 0.4s;
transition: width 0.4s;
}
body .wrapper input[type='checkbox']:not(:checked) + label {
display: block;
-webkit-transition: height 0.8s;
transition: height 0.8s;
height: 60px;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
::-webkit-scrollbar {
display: none;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class='title'>
</div>
<div class='wrapper'>
<input id='pictures' type='checkbox'>
<label for='pictures'>
<p>Documentation & more</p>
<div class='lil_arrow'></div>
<div class='content'>
<ul>
<li>
<a href='#'>Design briefs</a>
</li>
<li>
<a href='#'>Quotes</a>
</li>
<li>
<a href='#'>Quotes</a>
</li>
<li>
<a href='#'>Quotes</a>
</li>
</ul>
</div>
<span></span>
</label>
<input id='jobs' type='checkbox'>
<label for='jobs'>
<p>Upcoming Jobs</p>
<div class='lil_arrow'></div>
<div class='content'>
<ul>
<li>
<a href='#'>Weekly Forecast</a>
</li>
<li>
<a href='#'>Timescales</a>
</li>
<li>
<a href='#'>Quotes</a>
</li>
</ul>
</div>
<span></span>
</label>
<input id='events' type='checkbox'>
<label for='events'>
<p>Events & Task Management</p>
<div class='lil_arrow'></div>
<div class='content'>
<ul>
<li>
<a href='#'>Calendar</a>
</li>
<li>
<a href='#'>Important Dates</a>
</li>
<li>
<a href='#'>Someting Event related</a>
</li>
</ul>
</div>
<span></span>
</label>
<input id='financial' type='checkbox'>
<label for='financial'>
<p>Invoicing & financial</p>
<div class='lil_arrow'></div>
<div class='content'>
<ul>
<li>
<a href='#'>Invoicing Templates</a>
</li>
<li>
<a href='#'>Invoice Archives</a>
</li>
<li>
<a href='#'>Send Invoice</a>
</li>
</ul>
</div>
<span></span>
</label>
<input id='settings' type='checkbox'>
<label for='settings'>
<p>System Settings</p>
<div class='lil_arrow'></div>
<div class='content'>
<ul>
<li>
<a href='#'>User Settings</a>
</li>
<li>
<a href='#'>Edit Profile</a>
</li>
<li>
<a href='#'>Do something cool</a>
</li>
</ul>
</div>
<span></span>
</label>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
label
,input
要素の組み合わせでインタラクティブな動作を実現している点から、「JavaScript の使用を避けているのかもしれない」と感じたのですが、 JavaScript を用いた解決策でも構わないでしょうか? – supa 20年7月21日 8:31