부트스트랩을 이용한 4단계 드랍메뉴 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 메뉴 관련 > 부트스트랩을 이용한 4단계 드랍메뉴 상세정보

클라우드태그

javascript

PHP

css

asp

HTML

jquery

MYSQL

API

image

Mobile

slide

게시판

메뉴

현재접속자 159명

부트스트랩을 이용한 4단계 드랍메뉴

해피팀

네티즌

소스분류

메뉴 관련

다운로드 횟수

120 회

간단설명

부트스트랩을 이용한 4단계 네이게이션 드랍메뉴 입니다.

평가하기

jQuery 와 Bootstrap 을 이용한 드랍다운 메뉴 입니다.

사용법

1.head 에 css 를 정의 하세요.

<head>
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootnavbar.css">
</head>

2.body 에 메뉴 구조를 만들거나 기존 코드를 활용하여 변경하세요.

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="bootnavbar">
  ...
  ...
</nav>

3.body 최하단에 스크립트를 호출하세요.

<body>
	  ...
	  ...
	
	  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootnavbar.js" ></script>
    <script>
        $(function () {
            $('#bootnavbar').bootnavbar();
        })
    </script>
<body>