How to create mega menu on Angular material 7
I have used the below code to create the toolbar and menu using angular material 7. I have a requirement to create a mega menu in angular material.
<mat-toolbar color="primary" class="example-toolbar">
<mat-toolbar-row style="height: 28px !important;">
<div class="div-center">
<button mat-flat-button color="primary" [matMenuTriggerFor]="menu">
<mat-icon>directions_car</mat-icon>
Cars
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</div>
</mat-toolbar-row>
</mat-toolbar>
I am looking for a mega menu createing like this https://mdbootstrap.com/docs/jquery/navigation/mega-menu/
Can anyone know how can I create the mega menu like above.
angular angular-material mdbootstrap
edited Nov 12 '18 at 2:40
Gustavo Lopes
696417
asked Nov 12 '18 at 2:24
San JaisySan Jaisy
2,538103573
add a comment |
I have used the below code to create the toolbar and menu using angular material 7. I have a requirement to create a mega menu in angular material.
<mat-toolbar color="primary" class="example-toolbar">
<mat-toolbar-row style="height: 28px !important;">
<div class="div-center">
<button mat-flat-button color="primary" [matMenuTriggerFor]="menu">
<mat-icon>directions_car</mat-icon>
Cars
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</div>
</mat-toolbar-row>
</mat-toolbar>
I am looking for a mega menu createing like this https://mdbootstrap.com/docs/jquery/navigation/mega-menu/
Can anyone know how can I create the mega menu like above.
angular angular-material mdbootstrap
edited Nov 12 '18 at 2:40
Gustavo Lopes
696417
asked Nov 12 '18 at 2:24
San JaisySan Jaisy
2,538103573
add a comment |
I have used the below code to create the toolbar and menu using angular material 7. I have a requirement to create a mega menu in angular material.
<mat-toolbar color="primary" class="example-toolbar">
<mat-toolbar-row style="height: 28px !important;">
<div class="div-center">
<button mat-flat-button color="primary" [matMenuTriggerFor]="menu">
<mat-icon>directions_car</mat-icon>
Cars
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</div>
</mat-toolbar-row>
</mat-toolbar>
I am looking for a mega menu createing like this https://mdbootstrap.com/docs/jquery/navigation/mega-menu/
Can anyone know how can I create the mega menu like above.
angular angular-material mdbootstrap
edited Nov 12 '18 at 2:40
Gustavo Lopes
696417
asked Nov 12 '18 at 2:24
San JaisySan Jaisy
2,538103573
I have used the below code to create the toolbar and menu using angular material 7. I have a requirement to create a mega menu in angular material.
<mat-toolbar color="primary" class="example-toolbar">
<mat-toolbar-row style="height: 28px !important;">
<div class="div-center">
<button mat-flat-button color="primary" [matMenuTriggerFor]="menu">
<mat-icon>directions_car</mat-icon>
Cars
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</div>
</mat-toolbar-row>
</mat-toolbar>
I am looking for a mega menu createing like this https://mdbootstrap.com/docs/jquery/navigation/mega-menu/
Can anyone know how can I create the mega menu like above.
angular angular-material mdbootstrap
angular angular-material mdbootstrap
edited Nov 12 '18 at 2:40
Gustavo Lopes
696417
asked Nov 12 '18 at 2:24
San JaisySan Jaisy
2,538103573
edited Nov 12 '18 at 2:40
Gustavo Lopes
696417
asked Nov 12 '18 at 2:24
San JaisySan Jaisy
2,538103573
edited Nov 12 '18 at 2:40
Gustavo Lopes
696417
edited Nov 12 '18 at 2:40
Gustavo Lopes
696417
edited Nov 12 '18 at 2:40
Gustavo Lopes
696417
696417
asked Nov 12 '18 at 2:24
San JaisySan Jaisy
2,538103573
asked Nov 12 '18 at 2:24
San JaisySan Jaisy
2,538103573
asked Nov 12 '18 at 2:24
San JaisySan Jaisy
2,538103573
2,538103573
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You need to tweak the mat-menu component a bit and build your own component to make a mega menu component.
Otherwise there is no direct way to configure with the material.
SIMPLE DEMO
answered Nov 12 '18 at 2:29
SajeetharanSajeetharan
122k30170230
Can you show me example
– San Jaisy
Nov 12 '18 at 2:33
stackblitz.com/edit/dynamic-nested-topnav-menu-1mwddt?file=app/…
– Sajeetharan
Nov 12 '18 at 2:34
This one I know.
– San Jaisy
Nov 12 '18 at 2:39
add a comment |
Angular 2 Material Customize md-menu
.mat-menu-panel .custom
background-color: darkgrey;
border-radius: 0px;
https://github.com/angular/material2/issues/10322
answered Nov 12 '18 at 4:16
San JaisySan Jaisy
2,538103573
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53255263%2fhow-to-create-mega-menu-on-angular-material-7%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to tweak the mat-menu component a bit and build your own component to make a mega menu component.
Otherwise there is no direct way to configure with the material.
SIMPLE DEMO
answered Nov 12 '18 at 2:29
SajeetharanSajeetharan
122k30170230
Can you show me example
– San Jaisy
Nov 12 '18 at 2:33
stackblitz.com/edit/dynamic-nested-topnav-menu-1mwddt?file=app/…
– Sajeetharan
Nov 12 '18 at 2:34
This one I know.
– San Jaisy
Nov 12 '18 at 2:39
add a comment |
You need to tweak the mat-menu component a bit and build your own component to make a mega menu component.
Otherwise there is no direct way to configure with the material.
SIMPLE DEMO
answered Nov 12 '18 at 2:29
SajeetharanSajeetharan
122k30170230
Can you show me example
– San Jaisy
Nov 12 '18 at 2:33
stackblitz.com/edit/dynamic-nested-topnav-menu-1mwddt?file=app/…
– Sajeetharan
Nov 12 '18 at 2:34
This one I know.
– San Jaisy
Nov 12 '18 at 2:39
add a comment |
You need to tweak the mat-menu component a bit and build your own component to make a mega menu component.
Otherwise there is no direct way to configure with the material.
SIMPLE DEMO
answered Nov 12 '18 at 2:29
SajeetharanSajeetharan
122k30170230
You need to tweak the mat-menu component a bit and build your own component to make a mega menu component.
Otherwise there is no direct way to configure with the material.
SIMPLE DEMO
answered Nov 12 '18 at 2:29
SajeetharanSajeetharan
122k30170230
edited Nov 12 '18 at 2:34
answered Nov 12 '18 at 2:29
SajeetharanSajeetharan
122k30170230
answered Nov 12 '18 at 2:29
SajeetharanSajeetharan
122k30170230
answered Nov 12 '18 at 2:29
SajeetharanSajeetharan
122k30170230
122k30170230
Can you show me example
– San Jaisy
Nov 12 '18 at 2:33
stackblitz.com/edit/dynamic-nested-topnav-menu-1mwddt?file=app/…
– Sajeetharan
Nov 12 '18 at 2:34
This one I know.
– San Jaisy
Nov 12 '18 at 2:39
add a comment |
Can you show me example
– San Jaisy
Nov 12 '18 at 2:33
stackblitz.com/edit/dynamic-nested-topnav-menu-1mwddt?file=app/…
– Sajeetharan
Nov 12 '18 at 2:34
This one I know.
– San Jaisy
Nov 12 '18 at 2:39
Can you show me example
– San Jaisy
Nov 12 '18 at 2:33
Can you show me example
– San Jaisy
Nov 12 '18 at 2:33
stackblitz.com/edit/dynamic-nested-topnav-menu-1mwddt?file=app/…
– Sajeetharan
Nov 12 '18 at 2:34
stackblitz.com/edit/dynamic-nested-topnav-menu-1mwddt?file=app/…
– Sajeetharan
Nov 12 '18 at 2:34
This one I know.
– San Jaisy
Nov 12 '18 at 2:39
This one I know.
– San Jaisy
Nov 12 '18 at 2:39
add a comment |
Angular 2 Material Customize md-menu
.mat-menu-panel .custom
background-color: darkgrey;
border-radius: 0px;
https://github.com/angular/material2/issues/10322
answered Nov 12 '18 at 4:16
San JaisySan Jaisy
2,538103573
add a comment |
Angular 2 Material Customize md-menu
.mat-menu-panel .custom
background-color: darkgrey;
border-radius: 0px;
https://github.com/angular/material2/issues/10322
answered Nov 12 '18 at 4:16
San JaisySan Jaisy
2,538103573
add a comment |
Angular 2 Material Customize md-menu
.mat-menu-panel .custom
background-color: darkgrey;
border-radius: 0px;
https://github.com/angular/material2/issues/10322
answered Nov 12 '18 at 4:16
San JaisySan Jaisy
2,538103573
Angular 2 Material Customize md-menu
.mat-menu-panel .custom
background-color: darkgrey;
border-radius: 0px;
https://github.com/angular/material2/issues/10322
answered Nov 12 '18 at 4:16
San JaisySan Jaisy
2,538103573
answered Nov 12 '18 at 4:16
San JaisySan Jaisy
2,538103573
answered Nov 12 '18 at 4:16
San JaisySan Jaisy
2,538103573
answered Nov 12 '18 at 4:16
San JaisySan Jaisy
2,538103573
2,538103573
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53255263%2fhow-to-create-mega-menu-on-angular-material-7%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown