ソートメニューを常時展開するUserCSS
https://gyazo.com/0b0fab181a171ea870f14d1c10ef9038
https://gyazo.com/e3403b5a8dbff91b7abd28b0b395831b
リファクタリングして余計な装飾を削除nomadoor.icon
infoboxと相性が良さそうだったので関連ページの方も常時展開するように変更 code:style.css
@media(width > 768px) {
/* ホーム画面 */
.quick-launch .right-box {
gap: 1em;
}
.page-sort-menu {
width: 100%;
.tool-btn {
display: none;
}
.dropdown-menu {
z-index: 0;
position: relative;
width: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
background: transparent;
box-shadow: none;
border: none;
column-gap: 1.4em;
margin: 0;
li > a {
padding: 0;
}
}
.dropdown-header {
display: none;
}
}
/* 関連ページ */
.toolbar {
.page-sort-menu {
.dropdown-menu {
padding: 0;
}
}
}
}
before:2024/3/14
https://gyazo.com/4f614f961f748d47d5843d6cc04d650a
code:before:2024/3/14.css
@media(min-width: 768px){
.quick-launch .flex-box .flex-item{width: 100%;}
.quick-launch .page-sort-menu{width: 100%;}
.quick-launch .page-sort-menu .tool-btn{visibility: hidden;}
width: 100%;
top: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background: transparent;
box-shadow: none;
border: none;
column-gap: 1.4em;
z-index: 1;
}
display: flex;
align-items: center;
padding: 0;
}
}
装飾
code:before:2024/3/14.css
border-radius: 40px;
}
@media(max-width: 1050px){
.quick-launch{margin-bottom: 50px;}
}
@media(max-width: 768px){
.quick-launch{margin-bottom: 15px;}
}
UserCSS.icon