From 1eb7b48118d5f113c227d1468c75e085878ef15b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Mon, 9 Sep 2024 09:48:49 +0900 Subject: [PATCH] =?UTF-8?q?canvas=20menu,=20header=20menu=20hover=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/inputwrap/page.jsx | 5 +- src/app/main/page.jsx | 6 ++ src/components/canvas/MenuDepth01.jsx | 31 +++++++--- src/components/header/Header.jsx | 66 ++++++++++++++-------- src/components/publishpage/PublishPage.jsx | 2 +- src/styles/_contents.scss | 4 ++ src/styles/_inputcommon.scss | 6 ++ src/styles/_layout.scss | 4 ++ src/styles/_reset.scss | 23 ++++++-- src/styles/publishpage.scss | 4 +- 10 files changed, 108 insertions(+), 43 deletions(-) create mode 100644 src/app/main/page.jsx diff --git a/src/app/inputwrap/page.jsx b/src/app/inputwrap/page.jsx index b0b7b57..a9102f7 100644 --- a/src/app/inputwrap/page.jsx +++ b/src/app/inputwrap/page.jsx @@ -5,6 +5,9 @@ import Qselect from "@/components/common/select/Qselect"; import '@/styles/_inputcommon.scss' export default function InputWrapPage (){ + const SelectOption = [ + {name: 'オンライン保証シ',}, {name: 'ステム'} + ] return(
@@ -18,7 +21,7 @@ export default function InputWrapPage (){

Select WRAP

- +
diff --git a/src/app/main/page.jsx b/src/app/main/page.jsx new file mode 100644 index 0000000..f489890 --- /dev/null +++ b/src/app/main/page.jsx @@ -0,0 +1,6 @@ +export default function MainPage(){ + return( + <> + + ) +} \ No newline at end of file diff --git a/src/components/canvas/MenuDepth01.jsx b/src/components/canvas/MenuDepth01.jsx index e98bc79..763f60d 100644 --- a/src/components/canvas/MenuDepth01.jsx +++ b/src/components/canvas/MenuDepth01.jsx @@ -1,5 +1,9 @@ +'use client' + +import { ToggleonMouse } from "../header/Header" + export default function MenuDepth01(){ - return( + return(
    • @@ -10,17 +14,26 @@ export default function MenuDepth01(){
-
-
+
    +
  • ToggleonMouse(e, 'add', 'ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')} + > -
-
+ +
  • ToggleonMouse(e, 'add', 'ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')} + > -
    • -
    + +
  • ToggleonMouse(e, 'add', 'ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')} + > -
    • -
    + +
    ) } \ No newline at end of file diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index 1b55fea..a5e2342 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -2,24 +2,25 @@ import Link from "next/link"; import Qselect from "../common/select/Qselect"; +export const ToggleonMouse = (e, act, target) => { + const listWrap = e.target.closest(target); + const ListItem = Array.from(listWrap.childNodes) + ListItem.forEach(el => { + if(act === 'add'){ + el.classList.add('mouse'); + }else{ + el.classList.remove('mouse'); + } + }) + if(act === 'add'){ + e.target.parentElement.classList.remove('mouse') + } +} + export default function Header() { const SelectOption = [ {name: 'オンライン保証シ',}, {name: 'ステム'} ] - const ToggleonMouse = (e, act) => { - const listWrap = e.target.parentElement.parentElement; - const ListItem = Array.from(listWrap.childNodes) - ListItem.forEach(el => { - if(act === 'add'){ - el.classList.add('mouse'); - }else{ - el.classList.remove('mouse'); - } - }) - if(act === 'add'){ - e.target.parentElement.classList.remove('mouse') - } - } return(
    @@ -31,32 +32,47 @@ export default function Header() {
    • ToggleonMouse(e, 'add')} - onMouseLeave={(e) => ToggleonMouse(e, 'remove')} + onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')} > ホームへ
    • ToggleonMouse(e, 'add')} - onMouseLeave={(e) => ToggleonMouse(e, 'remove')} + onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')} >
        -
      • 新規物件登録
        • -
      • モノ/図面管理
        • +
      • ToggleonMouse(e, 'add', 'li > ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} + >新規物件登録
        • +
      • ToggleonMouse(e, 'add', 'li > ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} + >モノ/図面管理
    • ToggleonMouse(e, 'add')} - onMouseLeave={(e) => ToggleonMouse(e, 'remove')} + onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')} >
        -
      • お知らせ
        • -
      • FAQ
        • -
      • 素材のダウンロード
        • +
      • ToggleonMouse(e, 'add', 'li > ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} + >お知らせ
        • +
      • ToggleonMouse(e, 'add', 'li > ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} + >FAQ
        • +
      • ToggleonMouse(e, 'add', 'li > ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} + >素材のダウンロード
    diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx index 4a075ad..c0a675c 100644 --- a/src/components/publishpage/PublishPage.jsx +++ b/src/components/publishpage/PublishPage.jsx @@ -81,7 +81,7 @@ export default function PublishPage() { CanvasPage - 2024-09-05 + 2024-09-06 diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 95cf827..5d6b0ba 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -199,6 +199,7 @@ align-items: center; margin-right: 34px; height: 100%; + transition: all .17s ease-in-out; button{ position: relative; font-size: 12px; @@ -220,6 +221,9 @@ &:last-child{ margin-right: 0; } + &.mouse{ + opacity: 0.55; + } } } } diff --git a/src/styles/_inputcommon.scss b/src/styles/_inputcommon.scss index 55cceb4..f382dfe 100644 --- a/src/styles/_inputcommon.scss +++ b/src/styles/_inputcommon.scss @@ -11,6 +11,12 @@ margin-right: 10px; } } + .form-select{ + width: 168px; + > div{ + width: 100%; + } + } .form-datepicker{ div{ margin-bottom: 10px; diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index 2e0ff4d..e33d75e 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -96,6 +96,7 @@ header{ transition: all .17s ease-in-out; .nav-depth2-item{ margin-bottom: 10px; + transition: all .17s ease-in-out; a{ font-size: 13px; font-weight: normal; @@ -104,6 +105,9 @@ header{ &:last-child{ margin-bottom: 0; } + &.mouse{ + opacity: 0.55; + } } &::before{ content: ''; diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index de83d19..286fa38 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -171,30 +171,43 @@ button{ height: 30px; line-height: 30px; padding: 0 10px; - font-size: 13px; background-color: #373737; border: 1px solid #3F3F3F; border-radius: 2px; border-top-left-radius: 2px; color: #fff; cursor: pointer; + p{ + font-size: 13px; + color: #fff; + height: 100%; + } .select-item-wrap{ position: absolute; top: 100%; left: -1px; clip-path:inset(0 0 100% 0); width: calc(100% + 2px); - padding: 12px 20px; + padding: 8px 0; background-color: #373737; border: 1px solid #3F3F3F; border-radius: 2px; transition: all 0.17s ease-in-out; visibility: hidden; .select-item{ - font-size: 12px; - color: #fff; + display: flex; + align-items: center; + padding: 8px 20px; line-height: 1.4; - padding: 8px 0; + transition: all .17s ease-in-out; + button{ + font-size: 12px; + color: #fff; + line-height: 1.4; + } + &:hover{ + background-color: #2C2C2C; + } } } &::after{ diff --git a/src/styles/publishpage.scss b/src/styles/publishpage.scss index 32d5998..0b69f65 100644 --- a/src/styles/publishpage.scss +++ b/src/styles/publishpage.scss @@ -12,7 +12,7 @@ table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; } .contents h3{font-size: 16px; margin: 10px 0;} .red { color: #ff0000;} .blues { color: #001aff;} -.guide_table tbody td a{color: #001aff; text-decoration: underline;} +.guide_table tbody td a{color: #001aff; text-decoration: underline; font-size: 12px;} .design_summary_web, .design_summary_tab, .design_summary_mob { display: inline-block; color: rosybrown; font-weight: bold; font-size: 12px; margin-right: 30px; } @@ -33,7 +33,7 @@ table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; } .tab_li > li { float: left; width: 90px; height: 30px; line-height: 30px; text-align: center; background: #424242; color: #fff; margin-right: 5px; margin-bottom: 5px; } .tab_li > li > a { color: #fff; text-decoration: none; display: block; } .tab_li > li.on { font-weight: bold; text-decoration: underline; font-size: 16px; } -td strong {font-size:14px;font-weight:600; color: rgb(0, 0, 0); } +td strong {font-size:12px;font-weight:600; color: rgb(0, 0, 0); } td strong.title { color: #000; } .auto-style1 { height: 20px; } .auto-style2 { background: #ddffca; height: 20px; }