@tigerbui/ng-megamenu
v1.3.2
Published
Directive megamenu simple
Downloads
112
Maintainers
tigerbuiReadme
@tigerbui/ng-megamenu
ng-megamenu là directive dành cho [email protected] với tính năng cơ bản của một dropdown menu.
Cài đặt (installation)
$ npm install @tigerbui/ng-megamenuBạn có thể xem Demo Megamenu
Hoặc (or)
Cài đặt trên project của bạn theo các bước sau:
1> Bước 1 (step 1)
<script src="./node_module/@tigerbui/ng-megamenu/immenu.directive.min.js"></script>
Hoặc (or)
<script src="https://io.inet.vn/assets/js/immenu/immenu.directive.min.js"></script>
2> Bước 2 (step 2)
Khai báo App directive immenuDirectiveApp vào app module của bạn
<script>
angular.module('yourApp', ['immenuDirectiveApp']);
</script>
3> Bước 3 (step 3)
Thêm mega-menu-drt trong cấu trúc HTML, ví dụ như dưới đây:
<!DOCTYPE html>
<html ng-app="yourApp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World!</title>
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/@tigerbui/ng-megamenu/immenu.directive.js"></script>
</head>
<body ng-controller="yourController">
<div class="container">
<nav class="navbar-wrap">
<ul mega-menu-drt i-mm-config="{screen: 'df'}" i-mm-grid="grid-mosaic">
<li ng-repeat="mn in mmDtmock" ng-class="{'i-mm-dropdown': mn.dropdown}">
<a href="#">
{{mn.title}}
</a>
<div class="i-submm-dropdown" style="display: none">
<div class="i-mm-col-item i-border-bt" ng-repeat="smn in [0,1,2,3,4,5,6, 7, 8, 9]">
<div class="i-mm-group">
<p class="i-mm-gr-title">Group {{smn}}</p>
<ul class="i-mm-gr-list">
<li class="i-mm-gr-item">
<a class="i-mm-link" ng-href="/{{$index}}">
Sản phẩm {{smn}}
</a>
<p class="i-mm-des">Mô tả sản phẩm {{smn}}</p>
</li>
<li class="i-mm-gr-item" ng-if="$index%2 == 0">
<a class="i-mm-link" href="#">Sản phẩm {{smn}}</a>
<p class="i-mm-des">Mô tả sản phẩm {{smn}}</p>
</li>
<li class="i-mm-gr-item">
<a class="i-mm-link" href="#">Sản phẩm {{smn}}</a>
<p class="i-mm-des">Mô tả sản phẩm {{smn}}</p>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
<script>
var app = angular.module('yourApp', ['immenuDirectiveApp']);
app.controller("yourController", yourController);
yourController.$inject = ['$scope'];
function yourController($scope) {
$scope.mmDtmock = [
{
title: "Menu item"
}
];
for(var i=0; i < 6; i++) {
$scope.mmDtmock.push({title: 'Menu item ' + i, dropdown: false});
}
$scope.mmDtmock.forEach(function (item, id, nArr) {
if(id%2 == 0) {
item.dropdown = true;
}
})
}
</script>
</body>
</html>Tùy biến ng-megamenu (Option)
- Thay đổi
font-family
<div mega-menu-drt i-mm-font="Arial, 'sans-serif'"></div>Mặc định (Default) font-family: 'Open Sans', sans-serif;
- Thay đổi hiển thị dropdown menu
<div mega-menu-drt i-mm-config="{screen: 'full'}"></div>i-mm-confighiện tại chỉ có tùy chọn với{screen: ''}=> sau sẽ mở rộng thêm.{screen: ''}có 2 giá trịfullvàdf
CSS
<link rel="stylesheet" type="text/css" href="https://io.inet.vn/assets/js/immenu/style.css"/>
Hoặc (or)
<link rel="stylesheet" type="text/css" href="./node_modules/@tigerbui/ng-megamenu/style.css"/>Responsive
| Kích thước màn hình (@media screen) | Số cột hiển thị (column view) |
|------------------------------------|----------------------------------|
| >= 1200px | 4 cột (4 col) |
| 769px < 1200px | 3 cột (3 col) |
| <=768px | 1 cột (1 col) |
Công nghệ (Tech)
@tigerbui/ng-megamenu sử dụng công nghệ
License
This project is MIT licensed.