테스트 사이트 - 개발 중인 베타 버전입니다
SIR

객체로 간단한 부트스트랩 매뉴 제작 함수

식물집사
프로필 보기이 회원 글보기
 · 2년 전 · 683

아직 초보여서 오류가 있으면 알려주세요^^

 

 

 

<!-- index.php -->

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Menu demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <?php
    $MENUS = [
        [
            "name" => "home",
            "href" => "/"
        ],
        [
            "name" => "dropdown test",
            "dropdown" => [
                [
                    "name" => "test",
                    "href" => "/test"
                ],
                [
                    "name" => "dropdown test",
                    "dropdown" => [
                        [
                            "name" => "test1",
                            "href" => "/test1"
                        ]
                    ]
                ]
            ]
        ]
    ];
    
    function dropdownMenu($active, $menus) {
        $html = '';
        $isActive = false;
    
        foreach ($menus as $element) {
            if (!isset($element['dropdown'])) {
                $menuHref = strtolower(trim($element['href'], '/'));
                $activeHref = strtolower(trim($active, '/'));
    
                $activeMenu = $menuHref === $activeHref;
                if ($activeMenu) $isActive = true;
    
                $html .= '<li><a class="dropdown-item' . ($activeMenu ? " active" : "") . '" href="' . $element['href'] . '">' . $element['name'] . '</a></li>';
            } else {
                $menuData =Menu($active, $element['dropdown']);
                if ($menuData[1]) $isActive = true;
    
                $html .= '<li class="dropdown dropend"><a class="dropdown-item dropdown-toggle' . ($menuData[1] ? " active" : "") . '" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">' . $element['name'] . '</a><ul class="dropdown-menu">' . $menuData[0] . '</ul></li>';
            }
        }
    
        return [
            $html,
           $isActive
        ];
    }
    
    function menu($active, $menus) {
        $html = '';
        $isActive = false;
    
        foreach ($menus as $element) {
            if (!isset($element['dropdown'])) {
                $menuHref = strtolower(trim($element['href'], '/'));
                $activeHref = strtolower(trim($active, '/'));
    
                $activeMenu = $menuHref === $activeHref;
                if ($activeMenu) $isActive = true;
    
                $html .= '<li class="nav-item"><a class="nav-link' . ($activeMenu ? " active" : "") . '" aria-current="page" href="' . $element['href'] . '">' . $element['name'] . '</a></li>';
            } else {
                $menuData = dropdownMenu($active, $element['dropdown']);
                if ($menuData[1]) $isActive = true;
    
                $html .= '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle' . ($menuData[1] ? " active" : "") . '" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">' . $element['name'] . '</a><ul class="dropdown-menu">' . $menuData[0] . '</ul></li>';
            }
        }
    
        return [
            $html,
            $isActive
        ];
    }
    ?>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <? echo menu($_SERVER['REQUEST_URI'], $MENUS)[0] ?>
          </ul>
        </div>
      </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

 

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
17523
Laravel 오유 "failed to open stream: Permission denied" 퇴치방법 1
17516
php 몇분전, 몇시간전, 몇일전 함수 6
17515
내 계정 파일, DB 백업 스크립트
17514
PHP PHP 배열순설정 1
17498
PHP PHP로 PDF파일 다루기 4
17493
PHP PHP를 사용하여 FTP를 이용하는 방법 1
17490
PHP PHP와 MSSQL의 연동 코드 실례 1
17487
PHP 객체로 간단한 부트스트랩 매뉴 제작 함수 현재글
17485
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기 7 - JSONP 5
17481
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기 6- CORS 1
17478
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기5- 파일업로드 1
17477
PHP include와 DB해킹. 그러나 Fopen의 r 옵션만? 트릭으로 쓴다면? 1
17474
기타 자동방지문자가 안보이는 경우 - 유블럭
17473
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기4 - JSON
17472
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기3 - URL Encoding 3
17470
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기2 - POST
17469
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기1 - GET 2
17463
JavaScript express로 간단한 부트스트랩 내비게이션 메뉴 생성기(아주 쉬움)
17462
기타 C#에서 WWW-Authenticate를 통과하는 방법
17461
PHP PHP로 채트서버 만들기
17460
JavaScript ThreeJS로 3디 지구 만들기
17458
PHP PHP에서 파일다운로드기능 구현하기
17457
PHP PHP 랜덤생성하기
17454
기타 cmd, powershell 명령 몇가지
17453
MySQL DB백업코드 5
17448
JavaScript 숫자에 천단위로 콤마(,) 찍기 11
17447
PHP PHP CURL로 사이트 로그인 하고 그 정보 유지하기 1
17446
MySQL utf8mb4_unicode_ci와 utf8mb4_general_ci의 차이점 3
17445
node.js 운영중인 서비스가 알지못할 에러(uncaughtException)발생으로 중지되지 않게 하기
17444
node.js nodejs 에서 CSV파일 파싱하여 배열로 변환하기
이전 다음
전체 목록