20250107 - 모바일 디자인 참고

1. 하단 Dock 독 메뉴

Navigation Menu - List Template : Top Navigation Tabs

네비게이션 메뉴 숨기기

Appearance - Page Template : Minimal (No Navigation)

2. 상단 GNB

HTML

<div class="c-Alert c-Alert--page c-flex-space" id="c_Alert_Success">

    <div class="t-Alert-wrap col-6">

        <div class="col col-12 apex-col-auto col-start col-end">

            <button class="t-Button t-Button--noLabel t-Button--icon t-Button--large t-Button--noUI lto22518622360929923_0" onclick="OnClickBack()" type="button" id="B22518622360929923Left" title="New" aria-label="New">

                <span class="t-Icon fa fa-arrow-left" aria-hidden="true"></span>

            </button>

        </div>

    </div>

    <div class="t-Alert-wrap col-6 c-flex-end">

        <div class="col col-12 apex-col-auto col-start col-end">

            <button class="t-Button t-Button--noLabel t-Button--icon t-Button--large t-Button--noUI lto22518622360929923_0" onclick="OnClickHome()" type="button" id="B22518622360929923Home" title="New" aria-label="New">

                <span class="t-Icon fa fa-home" aria-hidden="true"></span>

            </button>

            <button class="t-Button t-Button--noLabel t-Button--icon t-Button--large t-Button--noUI lto22518622360929923_0" onclick="OnClickCart()" type="button" id="B22518622360929923Cart" title="New" aria-label="New">

                <span class="t-Icon fa fa-shopping-cart" aria-hidden="true"></span>

            </button>

        </div>

    </div>

</div>

JS :

let selectedMODIDs;

function OnClickBack() {

  window.history.back();

}

function OnClickHome() {

  apex.navigation.redirect ("f?p=&APP_ID.:Home:&APP_SESSION.::NO:RP::");

}

function OnClickCart() {

  apex.navigation.redirect ("f?p=&APP_ID.:ViewCart:&APP_SESSION.::NO:RP::");

}

CSS :

.t-Header-branding {

    display: none;

    visibility: hidden;

}

.t-Form-fieldContainer--floatingLabel {

  --ut-field-fl-label-offset: 0;

}

.c-flex-space {

    display: flex;

    justify-content: space-between;

}

.c-flex-end {

    display: flex;

    justify-content: flex-end;

}

.fa-arrow-left {

    color: white;

}

.fa-home {

    color: white;

}

.fa-shopping-cart {

    color: white;

}

.t-Alert--page {

    transition: none;

    transition-duration: none;

    transition-timing-function: none;

    transition-delay: none;

    transition-property: none;

    left: 0;

    right: 0;

    top: 0;

    padding: 0;

    background-color: transparent;

}

.t-Alert {

    border-style: none;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    box-shadow: none;

}

3. 하단 Sticky 버튼

Appearance - Template : Buttons Container

Appearance - Template Options : Stick to Bottom for Mobile

4. 다음 기능

참고