Без кейворда
Font Awesome, the iconic font and CSS framework……
browser: 65 11
スライドメニュー[4選] アイコンのホバーでメニューがスライドで表示 .cp_sidebarmenu < position: absolute; z-index: 1000; top: 0; bottom: 0; left: 0; overflow: hidden; width: 3.5em; height: 100%; -webkit-transition: width 0.6s ease; transition: width 0.6s ease; -webkit-transform: translateZ(0) scale(1,1); border-right: 1px solid #e5e5e5; background: #37474F; >.cp_sidebarmenu:hover < overflow: visible; width: 17em; >.cp_sidebarmenu ul < margin: 7px 0; padding: 0; outline: 0; >.cp_sidebarmenu li < position: relative; display: block; width: 17em; margin: 0; padding: 0; outline: 0; >.cp_sidebarmenu li a < position: relative; display: table; border-spacing: 0; border-collapse: collapse; text-decoration: none; color: #ffffff; >.cp_sidebarmenu li:before < content:""; position: absolute; top: 0px; left: -17em; height: 100%; width: 17em; background : rgba(240,98,146 ,0.5); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; >.cp_sidebarmenu li:hover:before < left:0; >.cp_sidebarmenu span < position: relative; display: table-cell; width: 14em; vertical-align: middle; >.cp_sidebarmenu > ul.control < position: absolute; bottom: 0; left: 0; >.cp_sidebarmenu ul li i アイコンのホバーでメニューがスライドで表示2 メニュー名遅延/コンテンツ透過 html, body < overflow-x: hidden; height: 100%; margin: 0; padding: 0; >.cp_sidebarmenu < position: fixed; z-index: 1; bottom: 0; width: 3.5em; height: 100%; -webkit-transition: width 0.4s; transition: width 0.4s; background: rgba(255,112,67 ,1); >.cp_sidebarmenu:hover < width: 17em; >.cp_sidebarmenu:hover + .contents < max-width: 100%; -webkit-transform: translateX(17em); transform: translateX(17em); opacity: 0.4; >.cp_sidebarmenu:hover .cp_sidenav li:nth-of-type(1) span < -webkit-transition-delay: 0.1s; transition-delay: 0.1s; >.cp_sidebarmenu:hover .cp_sidenav li:nth-of-type(2) span < -webkit-transition-delay: 0.2s; transition-delay: 0.2s; >.cp_sidebarmenu:hover .cp_sidenav li:nth-of-type(3) span < -webkit-transition-delay: 0.3s; transition-delay: 0.3s; >.cp_sidebarmenu:hover .cp_sidenav li:nth-of-type(4) span < -webkit-transition-delay: 0.4s; transition-delay: 0.4s; >.cp_sidebarmenu:hover .cp_sidenav span < text-indent: 0; >.cp_sidebarmenu ul li i < font-size: 1.5em; display: inline-block; padding: 0.5em; vertical-align: middle; >.cp_sidenav li:hover < background-color: rgba(38,50,56 ,1); >.cp_sidenav li:hover:before < background-color: rgba(38,50,56 ,1); >.cp_sidenav li:hover a < color: rgba(255,112,67 ,1); >.cp_sidenav li:before < position: absolute; z-index: 1; top: 0; left: -0.925rem; width: 0.925rem; height: 100%; content: ''; -webkit-transition: background 0.4s; transition: background 0.4s; background: rgba(255,112,67 ,1); >.cp_sidenav ul < margin-top: 1.85rem; margin-right: 0; margin-bottom: 0; margin-left: 0; padding: 0; list-style: none; >.cp_sidenav li < position: relative; clear: both; width: 100%; padding: 0; -webkit-transition: background 0.4s; transition: background 0.4s; >.cp_sidenav li a < display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 0.5em; padding-bottom: 0.5em; >.cp_sidenav a < width: 100%; -webkit-transition: color 0.4s; transition: color 0.4s; text-decoration: none; color: #fefefe; -webkit-box-align: center; -ms-flex-align: center; align-items: center; >.cp_sidenav a span < font-family: Roboto; position: relative; z-index: 0; display: block; -webkit-transition: text-indent 0.4s ease-in-out; transition: text-indent 0.4s ease-in-out; white-space: nowrap; text-indent: -20em; >.contents < height: 100%; min-height: 100vh; margin-top: 0; padding-left: 140px; -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, -webkit-transform 0.4s; transition: transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s, -webkit-transform 0.4s; background-image: url(https://picsum.photos/1001/665/?random); background-position: center center; background-size: cover; > 親メニューのホバーで子メニューをスライドで表示 .cp_sidebar a < -webkit-transition: all 0.6s ease; transition: all 0.6s ease; text-decoration: none; >.cp_sidebar a:hover < -webkit-transition: all 0.6s ease; transition: all 0.6s ease; >.cp_sidebar * < -webkit-box-sizing: border-box; box-sizing: border-box; >.cp_sidebar < position: absolute; top: 0; visibility: visible; overflow: hidden; width: 270px; height: 100%; -webkit-transform: translateZ(0); transform: translateZ(0); background-color: #37474F; >.cp_sidebar header < display: block; width: 100%; padding: 0.75em 1em; background-color: #00BCD4; >.cp_sidebar_nav < font-size: 1.2em; position: fixed; z-index: 9; overflow: hidden; /* overflow: auto; メニューをスクロールさせる場合*/ height: 100%; padding-bottom: 6em; background-color: #263238; -webkit-overflow-scrolling: touch; >.cp_sidebar_nav ul < display: block; margin: 0; padding: 0; list-style: none; width: 270px; >.cp_sidebar_nav ul li < display: inline-block; width: 100%; margin-left: 0; padding-left: 0; >.cp_sidebar_nav ul li.control < background-color: #006064; >.cp_sidebar_nav ul li a < font-size: 0.75em; position: relative; display: block; padding: 1.05em 1em; color: rgba(255, 255, 255, 0.9); >.cp_sidebar_nav ul li a:hover < -webkit-transition: all 0.6s ease; transition: all 0.6s ease; background-color: rgba(0,172,193 ,0.9); >.cp_sidebar_nav ul li i < font-size: 1.5em; display: inline-block; padding-right: 0.5em; vertical-align: middle; >.cp_sidebar_nav ul li > ul li a < font-size: 0.6em; >.cp_sidebar_nav > ul > li > a:after < font-family: FontAwesome; font-size: 1.5em; position: absolute; top: 50%; right: 0.5em; width: auto; content: '\f0a9'; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #ffffff; >.cp_sidebar_nav .cp_sidebar_2ndnav < position: absolute; z-index: 9; top: 0; left: 2.2em; height: 100vh; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-transform: translateX(100%); transform: translateX(100%); background-color: #455a64; >.cp_sidebar_nav .cp_sidebar_2ndnav a:hover < background-color: rgba(0,172,193 ,0.7); >.cp_sidebar_nav ul > li:hover .cp_sidebar_2ndnav 親メニューのホバーで子メニューをスライドで表示2 個別のメニューがスライド .cp_sidebarmenu < font-size: 0; position: absolute; z-index: 10; top: 0; left: 0; height: 100%; padding: 0.4em 0; text-align: center; color: white; background: #37474f; >.cp_sidebarmenu li < line-height: 100%; position: relative; display: inline-block; list-style: none; -webkit-transform: translateZ(0); transform: translateZ(0); vertical-align: middle; pointer-events: none; >.cp_sidebarmenu a < font-size: 16px; line-height: 100%; position: relative; display: block; min-width: 5em; margin-bottom: 0.4em; padding: 0.4em; -webkit-transition: background 0.3s; transition: background 0.3s; text-decoration: none; pointer-events: auto; color: #ffffff; >.cp_sidebarmenu a:active, .cp_sidebarmenu a:focus < background: #0097a7; >.cp_sidebarmenu i < font-size: 2em; display: block; margin-bottom: 0.2em; >.cp_sidebarmenu span < font-size: 0.625em; >.cp_sidebarmenu li:hover ul < -webkit-transform: translateX(0); transform: translateX(0); background: #0097a7; >.cp_sidebarmenu > li < display: block; >.cp_sidebarmenu > li > a < background: #37474f; >.cp_sidebarmenu > li:hover < z-index: 100; >.cp_sidebarmenu > li:hover a < background: #0097a7; >.cp_sidebarmenu > li a:hover < background: #00acc1; >.cp_sidebarmenu > li:hover a:after < opacity: 1; >.cp_sidebarmenu > li ulcopypet.jp
こんな記事はいかがですか？ category Link スポンサー 免責事項© 2026 コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。 All Rights Reserved.