회원 전용 메뉴 구현 > 코딩 스토리

<?php if($member[mb_level]  >= 2) { ?> 원하는html코드 <?php } ?>형태로 사용할 수 있다, 여기서 2는 회원의 기본 레벨이며, 비회원의 레벨은 1이므로 보이지 않게 된다, (레벨이 숫자와 같거나 큰 사람에게만 보인다는 말)

<?php if($member[mb_level]  >= 2) { ?>

    <button type="button" id="MmenuButton">

        <i class="fa fa-arrow-down" aria-hidden="true"></i><span class="sound_only">글쓰기</span>

    </button>

    <div id="Mmenu">

        <button onclick="navigateTo('링크')">Clip URL | URL 단축기</button>

        <button onclick="navigateTo('링크2')">Clip code | html 페이지 생성</button>

        <button onclick="navigateTo('링크3')">Quick Graph | 그래프 생성기</button>

        <button onclick="navigateTo('링크4')">1:1 채팅</button>

        <button onclick="navigateTo('링크5')">IT</button>

        <button onclick="navigateTo('링크6')">블로그</button>

    </div>

<?php } ?>

    <script>

        var menuVisible = false;

        document.getElementById('MmenuButton').addEventListener('click', function () {

            var menu = document.getElementById('Mmenu');

            if (menuVisible) {

                menu.style.display = 'none';

            } else {

                menu.style.display = 'block';

            }

            menuVisible = !menuVisible;

        });

        function navigateTo(url) {

            window.location.href = url;

        }

    </script>

<style>

        #MmenuButton {

            position: fixed;

            bottom: 50px;

            right: 15px;

            width: 50px;

            height: 50px;

            line-height: 50px;

            border: none;

            border-radius: 50%;

            background: rgba(23, 23, 23);

            color: #ffffff;

            text-align: center;

            font-size: 15px;

            z-index: 99;

            margin-right: 10px;

            cursor: pointer;

        }

        #Mmenu {

            position: fixed;

            bottom: 190px;

            right: 15px;

            display: none;

            z-index: 100;

            background-color: rgba(63, 63, 63);

            border: 1px solid rgba(53, 53, 53, 0.5);

            border-radius: 5px;

            padding: 10px;

        }

        #Mmenu button {

            display: block;

            width: 100%;

            background: none;

            border: none;

            padding: 5px 0;

            color: #ffffff;

            text-align: left;

            cursor: pointer;

            border-bottom:1px solid #5a5a5a

        }

        #Mmenu button:hover {

            background-color: rgba(100, 100, 100, 0.5);

        }

    </style>