AngularJS+Bootstrap 3 다단 계 네 비게 이 션 메뉴 구현 코드

AngularJS 로 강력 한 웹 전단 시스템 을 구축 하 는 방법 을 소개 합 니 다.angularjs 는 Google 팀 이 개발 한 매우 우수한 웹 전단 프레임 워 크 입 니 다.현재 이렇게 많은 웹 프레임 워 크 에서 AngularJS 는 두각 을 나 타 낼 수 있 고 구조 디자인 에서 다른 사람 보다 한 수 위 를 차지 하 며 양 방향 데이터 바 인 딩,주입,명령,MVC,템 플 릿 에 의존 합 니 다.Angular.js 는 백 스테이지 기술 을 전단 개발 에 혁신 적 으로 융합 시 켜 jQuery 의 한때 빛 을 없 앴 다.angularjs 를 사용 하면 배경 코드 를 쓰 는 것 처럼 더욱 규범화 되 고 구조 화 되 며 제어 할 수 있 습 니 다.
본 고 는 다 중 네 비게 이 션 메뉴 를 어떻게 실현 하 는 지 소개 할 것 이다.
bootstrap3-navbar

목차
1.정적 다단 계 메뉴 구현
2.동적 다단 계 메뉴 구현
1.정적 다단 계 메뉴 구현
다단 계 메뉴 를 실현 하려 면 두 단계 로 나 누 어 가 야 합 니 다.첫 번 째 단 계 는 정적 메뉴 의 기능 을 실현 하고 순 정적 인 HTML 코드 를 통 해 완성 하 는 것 입 니 다.두 번 째 단 계 는 Angluarjs 를 통 해 동적 으로 이 루어 지고 마지막 으로 데이터 와 프로그램 을 분리 하여 Ajax 를 통 해 다단 계 메뉴 데 이 터 를 불 러 옵 니 다.
우 리 는 먼저 정적 다단 계 메뉴 부터 시작 합 니 다.6 급 네 비게 이 션 메뉴 는 어떤 모습 입 니까?
m-nav1

위의 그림 에서 보 듯 이 우 리 는 일부 기능 수 요 를 정의 한다.
1 급 메뉴 는 네 비게 이 션 바 에 있 는 텍스트 입 니 다.
1 급 메뉴 내 비게 이 션 이벤트 가 발생 하면 2 급 메뉴 내 비게 이 션 을 표시 하고 1 급 메뉴 의 바로 아래 에 표 시 됩 니 다.
2 급 메뉴 내 비게 이 션 이벤트 가 발생 하면 3 급 메뉴 내 비게 이 션 을 표시 하고 2 급 메뉴 오른쪽 에 표시 합 니 다.
3 급 메뉴 내 비게 이 션 이벤트 가 발생 하면 4 급 메뉴 내 비게 이 션 을 표시 하고 3 급 메뉴 오른쪽 에 표시 합 니 다.
이 를 통 해 다음 메뉴 의 아웃 사 이 드 문 제 를 고려 하지 않 는 다.
위 글 의 프로젝트 환경 을 계속 하고 새로운 HTML 파일 을 추가 합 니 다:page3.html


~ vi D:\workspace\javascript\angular-navbar\page3.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title>      </title>
 <meta name="description" content="      ">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="fragment" content="!" />
 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" href="/css/main.css" rel="external nofollow" rel="external nofollow" >
</head>
<body ng-app="page2">
<div class="container">
 <div class="row" ng-controller="NavbarCtrl">
  <nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
    <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >      </a>
   </div>
   <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
     <li class="dropdown">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Multi Level <b class="caret"></b></a>
      <ul class="dropdown-menu menu-top">
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 1</a></li>
       <li class="dropdown-submenu"> <a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More options</a>
        <ul class="dropdown-menu">
         <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
         </li>
         <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
          <ul class="dropdown-menu">
           <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 3</a>
           </li>
           <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 3</a>
           </li>
           <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
            <ul class="dropdown-menu">
             <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 4</a>
             </li>
             <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 4</a>
             </li>
             <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
              <ul class="dropdown-menu">
               <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 5</a>
               </li>
               <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 5</a>
               </li>
              </ul>
             </li>
            </ul>
           </li>
          </ul>
         </li>
         <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
         </li>
         <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
         </li>
        </ul>
       </li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 1</a></li>
      </ul>
     </li>
    </ul>
   </div>
  </nav>
 </div>
</div>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>

css 파일 새로 만 들 기:main.css


~ vi D:\workspace\javascript\angular-navbar\css\main.css
.dropdown:hover .menu-top {
 display: block;
}
.dropdown-submenu{
 position:relative;
}
.dropdown-submenu > .dropdown-menu{
 top:0;
 left:100%;
 margin-top:-6px;
 margin-left:-1px;
 -webkit-border-radius:0 6px 6px 6px;
 -moz-border-radius:0 6px 6px 6px;
 border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu{
 display:block;
}
.dropdown-submenu > a:after{
 display:block;
 content:" ";
 float:right;
 width:0;
 height:0;
 border-color:transparent;
 border-style:solid;
 border-width:5px 0 5px 5px;
 border-left-color:#cccccc;
 margin-top:5px;
 margin-right:-10px;
}
.dropdown-submenu:hover > a:after{
 border-left-color:#ffffff;
}
.dropdown-submenu .pull-left{
 float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu{
 left:-100%;
 margin-left:10px;
 -webkit-border-radius:6px 0 6px 6px;
 -moz-border-radius:6px 0 6px 6px;
 border-radius:6px 0 6px 6px;
}

웹 페이지 를 새로 고침 하면 우 리 는 위의 캡 처 효 과 를 볼 수 있 습 니 다.코드 참조:http://firdaus.grandexa.com/2013/09/twitter-bootstrap-3-multilevel-dropdown-menu/
HTML 과 CSS 를 통 해 다단 계 메뉴 의 정적 디 스 플레이 효 과 를 실현 합 니 다.네 비게 이 션 메뉴 가 자주 바 뀌 지 않 는 다 면 정적 인 방식 으로 코드 를 죽 이면 됩 니 다.그러나 일부 장면 에서 메뉴 는 동적 생 성 이 필요 합 니 다.예 를 들 어 권한 을 통 해 링크 에 접근 하 는 것 을 제어 하고 모든 사용자 의 권한 이 다 르 면 볼 수 있 는 메뉴 옵션 도 다 릅 니 다.이 럴 때 는 동적 으로 만들어 서 프로그램 으로 메뉴 의 로드 와 전 시 를 제어 해 야 합 니 다.
2.동적 다단 계 메뉴 구현
정적 다단 계 네 비게 이 션 메뉴 의 HTML 코드 구 조 를 가지 고 동적 으로 바 꾸 었 지만 복잡 하지 않 습 니 다.
우 리 는 두 가지 일 을 해 야 한다.
네 비게 이 션 메뉴 의 데 이 터 를 구조 적 으로 저장 합 니 다.예 를 들 어 파일 nav.json 에 저장 합 니 다.
Angularjs 의 API 로 nav.json 데 이 터 를 불 러 와 보 여 줍 니 다.
네 비게 이 션 메뉴 의 데이터 형식 을 JSON 형식 으로 정의 합 니 다.메뉴 항목 마다 3 개의 속성 필드 가 있 습 니 다.
label:네 비게 이 션 메뉴 항목 에 표 시 된 이름 입 니 다.
링크:네 비게 이 션 메뉴 항목 의 점프 링크 를 정의 하지 않 아 도 됩 니 다.
children:네 비게 이 션 메뉴 항목 의 하위 메뉴,순환 대상 저장.


{
 "label": "levelA",
 "link": "#",
 "children": [
  {
   "label": "levelB",
   "link": "#",
   "children": []
  }
 ]
}

다음은 제 금융 시스템 을 예 로 들 어 실제 데이터 로 네 비게 이 션 메뉴 를 정의 합 니 다.
m-nav3

새 JSON 데이터 파일:nav.json.


~ vi D:\workspace\javascript\angular-navbar\js
av.json
[
 {
  "label": "  ",
  "children": [
   {
    "label": "   ",
    "children": [
     {"label": "        ","link":"#"},
     {"label": "   NS  ","link":"#"},
     {"label": "       ","link":"#"},
     {"label": "         ","link":"#"}
    ]
   },
   {
    "label": "   ",
    "children": [
     {"label": "       ","link":"#"}
    ]
   },
   {
    "label": "   ","link":"#",
    "children": []
   },
   {
    "label": "    ",
    "children": [
     {"label": "        ","link":"#"},
     {"label": "          ","link":"#"},
     {"label": "IRR        ","link":"#"},
     {"label": "IRR    ","link":"#"}
    ]
   }
  ]
 },
 {
  "label": "  ",
  "children": [
   {
    "label": "     ",
    "children": [
     {"label": "           ","link":"#"}
    ]
   },
   {
    "label": "      ",
    "children": []
   }
  ]
 },
 {
  "label": "  ",
  "children": [
   {
    "label": "    ",
    "children": [
     {"label": "      ","link":"#"}
    ]
   },
   {
    "label": "      ",
    "children": []
   },
   {
    "label": "           ",
    "children": []
   }
  ]
 }
]

우 리 는 이 네 비게 이 션 메뉴 의 데 이 터 를 보 았 습 니 다.'채권 C>환 채 가능 C>환 채 가능 원인 분석'이 있 습 니 다.그러면 우 리 는 3 급 메뉴 에 대한 프로 그래 밍 을 직접 실현 합 니 다.HTML 파일 페이지 4.html 를 만 듭 니 다.


~ vi D:\workspace\javascript\angular-navbar\page4.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title>        </title>
 <meta name="description" content="        ">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="fragment" content="!" />
 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" href="/css/main.css" rel="external nofollow" rel="external nofollow" >
</head>
<body ng-app="page4">
<div class="container">
 <div class="row" ng-controller="NavbarCtrl">
  <nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
    <a class="navbar-brand" href="/" rel="external nofollow" >      </a>
   </div>
   <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
     <li ng-repeat="a1 in navbar" class="dropdown">
      <a href="?{{ a1.label }}" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">{{ a1.label }} <b class="caret"></b></a>
      <ul class="dropdown-menu menu-top">
       <li ng-repeat="a2 in a1.children" class="dropdown-submenu">
        <a tabindex="-1" href="?{{ a2.label }}" rel="external nofollow" >{{ a2.label }}</a>
        <ul ng-show="a2.children.length>0" class="dropdown-menu">
         <li ng-repeat="a3 in a2.children">
          <a href="?{{ a3.label }}" rel="external nofollow" ng-click="go(a3.link)">{{ a3.label }}</a>
         </li>
        </ul>
       </li>
      </ul>
     </li>
    </ul>
   </div>
  </nav>
 </div>
</div>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>

Angularjs 컨트롤 러 파일 app.js 파일 에 page 4 의 정 의 를 추가 합 니 다.


var page4 = angular.module('page4', ['ui.bootstrap', 'ngRoute']);
page4.config(['$routeProvider', '$locationProvider', '$sceProvider', function ($routeProvider, $locationProvider, $sceProvider) {
 $routeProvider
  .when('/', {controller: 'DemoCtrl'})
  .otherwise({redirectTo: '/'});
 $locationProvider.html5Mode(true);
}]);
page4.controller('NavbarCtrl', function ($scope,$http,$location) {
 $http.get("/js/nav.json").success(function(json){
  $scope.navbar = json;
 });
});
page4.controller('DemoCtrl', function () {
 // nothing
});

위의 캡 처 와 유사 한 디 스 플레이 효 과 를 보 세 요.
m-nav4

글 은 여기까지 끝 났 고 이미 나의 기능 적 수 요 를 실현 했다.그러나 이 화 제 는 무한 한 네 비게 이 션 메뉴,메뉴 의 전시 스타일 교체,전시 구간 제어,마우스 동작 이벤트,Angularjs 로 봉 인 된 플러그 인 오픈 소스 프로젝트 등 최적화 할 수 있 는 부분 이 많다.관심 이 있 는 학생 들 은 제 절 차 를 바탕 으로 계속 노력 하여 우수한 개원 프로젝트 를 만 들 수 있 습 니 다.
코드 는 github:https://github.com/bsspirit/angular-navbar에 업로드 되 었 습 니 다.학생 들 은 필요 에 따라 스스로 다운로드 할 수도 있 고 명령 을 통 해 코드 를 직접 다운로드 할 수도 있 습 니 다.


git clone https://github.com/bsspirit/angular-navbar.git
cd angular-navbar
bower install
anywhere

총결산
위 에서 말 한 것 은 소 편 이 소개 한 AngularJS+Bootstrap 3 다단 계 네 비게 이 션 메뉴 의 실현 코드 입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

SpringMvc+Angularjs 멀티 파일 대량 업로드

SpringMvc 코드 jar 가방 commons-fileupload commons-io spring-mvc.xml 구성 Controller 로컬 저장 AngularJs 코드 Form 양식 커밋 위에서 말한 것은 여...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

AngularJS+Bootstrap 3 다단 계 네 비게 이 션 메뉴 구현 코드

좋은 웹페이지 즐겨찾기