일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 홈페이지
- #홈페이지제작
- #웹솔루션
- happycgi
- #happycgi
- 사이트제작
- jquery
- #홈페이지
- #솔루션
- CGIMALL
- #cgimall
- #쇼핑몰
- #동영상
- javascript
- 게시판
- 솔루션
- #이미지
- 홈페이지제작
- #CSS
- 해피CGI
- 쇼핑몰
- 웹솔루션
- #해피CGI
- php
- CSS
- #image
- 해피씨지아이
- #jQuery
- #업종별
- #뉴스
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] 부트스트랩을 이용한 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>
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
Comments