crho-navigation v0.0.29

CrhoNavigation

This project was generated with Angular CLI version 11.0.2.

About CRHO-Navigation

CRHO-Navigation aims to be a lightweight and fast MegaMenu Navigation

Demo Examples

-> click here for a standalone demo example <-

-> click here for a demo example on Stackblitz <-

-> click here to open the Stackblitz Editor <-

Installation

Make sure you installed angular material as CRHO-Navigation uses the ripple effect from AngularMaterial

ng add @angular/material

When you have installed AngularMaterial then type the following to install CRHO-Navigation

npm install crho-navigation

after the installation you have to include it to your Modules:

@NgModule({
  imports: [
    . . .
    CRHONavigationModule, // <---
    RouterModule.forRoot([], { useHash: false, anchorScrolling: "enabled" }) // <---
  ]
})

Also make sure you have imported the RouterModule and ran forRoot or forChild

Once Set you can place the Component in your typescript code as shown below:

import { Component, HostListener, ViewChild } from '@angular/core';
import { CRHONavigationComponent, CRHONavigationService, ICRHONavigation, ICRHONavigationEntry, ICRHONavigationIcon, CRHONavigationComponent } from 'crho-navigation';

@Component({
  selector: 'app-example',
  templateUrl: './example1.component.html',
  styleUrls: ['./example1.component.scss']
})
export class ExampleComponent {
  
  constructor(
    private navService : CRHONavigationService
  ){}

  @ViewChild("nav", { static : true}) private nav !: CRHONavigationComponent;
  public get Nav() : CRHONavigationComponent {
    return this.nav;
  }
  private navigationButtons : ICRHONavigationEntry[] = [
    {
      label : 'One',
      menu : {
        categories : [
          {
            label : 'The first Category',
            children : [
              { label : 'Page 1', routerLink : 'page-1', anchor : '1'},
              { label : 'Page 2', routerLink : 'page-1', anchor : '2'},
              { label : 'Page 3', routerLink : 'page-1', anchor : '3'},
              { label : 'This is an Action', action : () => { alert('Hi!'); }},
            ]
          },
        ]
      }
    },
    {
      label : 'Two',
      menu:{
        categories : [
          {
            label : 'The 2nd Category',
            children : [
              { label : 'Page 2 - 1', routerLink : 'page-2', anchor : '1'},
              { label : 'Page 2 - 2', routerLink : 'page-2', anchor : '2'},
              { label : 'Page 2 - 3', routerLink : 'page-2', anchor : '3'},
            ]
          },        
          {
            label : 'The 3th Category',
            children : [
              { label : 'Page 3 - 1', routerLink : 'page-3', anchor : '1'},
              { label : 'Page 3 - 2', routerLink : 'page-3', anchor : '2'},
              { label : 'Page 3 - 3', routerLink : 'page-3', anchor : '3'},
            ]
          },       
          {
            label : 'The 4th Category',
            children : [
              { label : 'Page 4 - 1', routerLink : 'page-4', anchor : '1'},
              { label : 'Page 4 - 2', routerLink : 'page-4', anchor : '2'},
              { label : 'Page 4 - 3', routerLink : 'page-4', anchor : '3'},
            ]
          },        
          {
            label : 'The 5th Category',
            children : [
              { label : 'Page 5 - 1', routerLink : 'page-5', anchor : '1'},
              { label : 'Page 5 - 2', routerLink : 'page-5', anchor : '2'},
              { label : 'Page 5 - 3', routerLink : 'page-5', anchor : '3'},
            ]
          }
        ]
      }
    },
    {
      label : 'Three',
      menu : {
        categories : [
          {
            label : 'The 6th Category',
            children : [
              { label : 'Page 6 - 1', routerLink : 'page-6', anchor : '1'},
              { label : 'Page 6 - 2', routerLink : 'page-6', anchor : '2'},
              { label : 'Page 6 - 3', routerLink : 'page-6', anchor : '3'},
            ]
          }, 
          {
            label : 'The 7th Category',
            children : [
              { label : 'Page 7 - 1', routerLink : 'page-7', anchor : '1'},
              { label : 'Page 7 - 2', routerLink : 'page-7', anchor : '2'},
              { label : 'Page 7 - 3', routerLink : 'page-7', anchor : '3'},
            ]
          }, 
        ]
      }
    },
    {
      label : 'Four',
      menu : {
        categories : [        
          {
            label : 'The 8th Category',
          children : [
            { label : 'Page 8 - 1', routerLink : 'page-8', anchor : '1'},
            { label : 'Page 8 - 2', routerLink : 'page-8', anchor : '2'},
            { label : 'Page 8 - 3', routerLink : 'page-8', anchor : '3'},
          ]
        }
      ]
      }
    }
  ];
  private socialMediaIcons : ICRHONavigationIcon[] = [
    {
      url:'',
      iconUrl : 'https://www.creative-house.org/privat/social-media-icons/white/instagram_32x32.png',
      iconHoverUrl : 'https://www.creative-house.org/privat/social-media-icons/black/instagram_32x32.png'
    },
    {
      url:'',
      iconUrl : 'https://www.creative-house.org/privat/social-media-icons/white/twitter_32x32.png',
      iconHoverUrl : 'https://www.creative-house.org/privat/social-media-icons/black/twitter_32x32.png'
    },
    {
      url:'',
      iconUrl : 'https://www.creative-house.org/privat/social-media-icons/white/facebook_32x32.png',
      iconHoverUrl : 'https://www.creative-house.org/privat/social-media-icons/black/facebook_32x32.png'
    },
    {
      url:'',
      iconUrl : 'https://www.creative-house.org/privat/social-media-icons/white/snapchat_32x32.png',
      iconHoverUrl : 'https://www.creative-house.org/privat/social-media-icons/black/snapchat_32x32.png'
    },
    {
      url:'',
      iconUrl : 'https://www.creative-house.org/privat/social-media-icons/white/pinterest_32x32.png',
      iconHoverUrl : 'https://www.creative-house.org/privat/social-media-icons/black/pinterest_32x32.png'
    },
    {
      url:'',
      iconUrl : 'https://www.creative-house.org/privat/social-media-icons/white/youtube_32x32.png',
      iconHoverUrl : 'https://www.creative-house.org/privat/social-media-icons/black/youtube_32x32.png'
    }
  ];
  private navBarConfig : ICRHONavigation = {
    backgroundColor : 'rgb(150, 150, 150)',
    icons : this.socialMediaIcons,
    children : this.navigationButtons
  }

  public get NavBarConfig() : ICRHONavigation { return this.navBarConfig; }

  OnToggle(isOpen : boolean){ this.Nav.OnHamburgerClick.emit(isOpen); }

  @HostListener('click', ['$event']) onClick(ev : MouseEvent) { this.nav.CloseAllEvent.emit(); }

}

And your HTML in the same component goes as follows, note you can customize the Hamburger Button's background-color:

<crho-hamburger-button [Open]="Nav.IsOpen" (OnHamburgerChanged)="OnToggle($event)"></crho-hamburger-button>
<crho-navigation #nav [NavBarConfig]="NavBarConfig"></crho-navigation>

Place this example style in to your app.component.scss (or wherever you have the crho-navigation component in use).

crho-hamburger-button{
  display: none;
}
@media only screen and (max-width: 800px) {
  crho-hamburger-button {
    display: block;
  }
}

Customizing Fonts and Colors

You can customize the colors with at the following Interface usages:

export interface ICRHONavigation {
  . . .
  backgroundColor ?: string;
  . . .
}
export interface ICRHONavigationEntry{
  . . .
  color ?: string;
  font ?: string;
  fontSize ?: string;
  defaultBackgroundColor ?: string;
  activeBackgroundColor ?: string;
  . . .
}
export interface ICRHONavigationMenu{
  . . .
  backgroundColor ?: string;
  . . .
}
export interface ICRHONavigationCategory{
  . . .
  categoryFont ?: string;
  categoryFontSize ?: string;
  categoryColor ?: string;
  seperatorColor ?:string;
  linkFont ?: string;
  linkFontSize ?: string;
  linkColor ?: string;
  linkHoverColor ?: string;
  . . .
}

Things to know about CRHO-Navigation

To toggle the menu in Mobile Mode you have to emit to the OnHamburgerClick Event inside the CRHONavigationComponent.

The width behaviour of the Menu which opens on desktop (or large width screens) can be customized with the ECRHONavigationMenuStretchWidth Enum in the CRHONavigationComponent.

Mobile Mediaqueries toggle at 800px width by default.

Future Informations

This Package will get frequently updated. If there is Information missing or if you wish to contribute, please feel free to contact us over at https://www.creative-house.org/.

Thank you for participating! ❤️