iCode
コード一覧
ログイン
新規登録
SP用メニュー
Created by
123 (#1)
メニュー
<div class="container"> <div class="status-bar"></div> <div class="skeleton"> <div class="skeleton__image"></div> <div class="skeleton__text-container"> <div class="skeleton__title"></div> <div class="skeleton__text"></div> </div> </div> <div class="skeleton"> <div class="skeleton__image"></div> <div class="skeleton__text-container"> <div class="skeleton__title"></div> <div class="skeleton__text"></div> </div> </div> <div class="skeleton"> <div class="skeleton__image"></div> <div class="skeleton__text-container"> <div class="skeleton__title"></div> <div class="skeleton__text"></div> </div> </div> <div class="skeleton"> <div class="skeleton__image"></div> <div class="skeleton__text-container"> <div class="skeleton__title"></div> <div class="skeleton__text"></div> </div> </div> <input type="checkbox" id="actionMenuButton"/> <div class="actions-menu"> <button class="btn btn--share"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#ffffff" d="M21,11L14,4V8C7,9 4,14 3,19C5.5,15.5 9,13.9 14,13.9V18L21,11Z" /> </svg> </button> <button class="btn btn--star"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#ffffff" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /> </svg> </button> <button class="btn btn--comment"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#ffffff" d="M19,3A2,2 0 0,1 21,5V19C21,20.11 20.1,21 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M16.7,9.35C16.92,9.14 16.92,8.79 16.7,8.58L15.42,7.3C15.21,7.08 14.86,7.08 14.65,7.3L13.65,8.3L15.7,10.35L16.7,9.35M7,14.94V17H9.06L15.12,10.94L13.06,8.88L7,14.94Z" /> </svg> </button> <label for="actionMenuButton" class="btn btn--large btn--menu"/> </div> </div>
body { background: #eee; } input[type="checkbox"] { display: none; } .container { position: relative; background: #fff; width: 320px; height: 328px; margin: 50px auto; } .status-bar { background: #ddd; height: 20px; width: 100%; } .skeleton { position: relative; display: flex; flex-flow: row wrap; width: calc(100% - 20px); height: 80px; margin: 15px auto; } .skeleton__image { background: #eee; width: 60px; height: 60px; } .skeleton__text-container { width: 75%; margin-left: 10px; } .skeleton__title { background: #eee; width: 40%; height: 15px; } .skeleton__text { background: #eee; width: 100%; height: 35px; margin-top: 10px; } .btn { background: #e74c3c; border: none; border-radius: 50%; width: 45px; height: 45px; } .btn svg { position: relative; top: 1px; right: -10px; } .btn--large { width: 60px; height: 60px; } .btn--menu:after,.btn--menu:before { content: ""; display: block; width: 25px; height: 3px; background: #fff; position: absolute; top: 29px; left: 18px; transition: transform 100ms; } .btn--menu:after { transform: translateY(-5px); } .btn--menu:before { transform: translateY(5px); } .btn--share { background: #f39c12; } .btn--star { background: #2ecc71; } .btn--comment { background: #16a085; } .actions-menu { position: absolute; width: 60px; height: 60px; right: 15px; bottom: 15px; } .actions-menu .btn { position: absolute; top: 8px; left: 8px; opacity: 0; transition: top 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), left 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 200ms; } .actions-menu .btn--menu { position: absolute; opacity: 1; top: 0; left: 0; z-index: 0; } .btn--menu, #actionMenuButton:checked + .actions-menu > .btn { opacity: 1; box-shadow: 0 5px 20px rgba(0,0,0,0.2); } #actionMenuButton:checked + .actions-menu > .btn--menu:after { transform: rotate(45deg); } #actionMenuButton:checked + .actions-menu > .btn--menu:before { transform: rotate(-45deg); } #actionMenuButton:checked + .actions-menu > .btn--share { top: -70px; } #actionMenuButton:checked + .actions-menu > .btn--star { top: -50px; left: -50px; } #actionMenuButton:checked + .actions-menu > .btn--comment { left: -70px; }
Copy
Copied