Angular Responsive Navigation Menu Using HTML & CSS Only

 Add this in your index.html file for Icons

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

OR

Install Font-Awesome by click below

font-awesome 

Put This Navigation Code Below In Your HTML File

<nav>
    <div class="logo">
        Brand Name
    </div>
    <input type="checkbox" id="click">
    <label for="click" class="menu-button">
        <i class="fas fa-bars"></i>
    </label>
    <ul>
        <li *ngFor="let menu of navMenu" for="click">
           <a routerLink="{{menu.link}}" 
              [ngClass]="{'active-menu': activeMenu === menu.title}" 
              (click)="selectMenu(menu.title)">{{menu.title}}</a>
         </li>
    </ul>
</nav>
<!-- Dummy Div To Show Active Menu
     You can add your pages name -->
<div style="font-size: 30px; text-align: center; margin-top: 20%;">
    Selected item is: {{activeMenu}}
</div>
 

Css Code:

/* You can add global styles to this file, and also import other style files */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
* {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    height: 80px;
    background-color: #800080;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 50px 0px 50px;
}

nav .menu-button {
    color: white;
    font-size: 23px;
    cursor: pointer;
    display: none;
}

nav .logo {
    font-size: 35px;
    color: #fff;
    font-weight: 600;
    transition: all 0.5s ease-in;
}

nav .logo:hover {
    font-size: 37px;
    letter-spacing: 2px;
    transition: all 0.5s ease-out;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin: 0;
    padding: 10px;
}

nav ul li a {
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 1px;
    color: #fff;
    transition: all 0.5s ease-in;
}

nav ul li a:hover,
nav ul li a.active-menu {
    border-radius: 5px;
    background-color: lightgray;
    padding: 8px 10px;
    color: #000;
    transition: all 0.5s ease-out;
}

#click {
    display: none;
}

@media (max-width:940px) {
    nav .menu-button {
        display: block;
    }
    #click:checked~.menu-button i:before {
        content: "\f00d";
    }
    nav ul {
        position: fixed;
        top: 10%;
        left: -100%;
        height: 100%;
        width: 100%;
        background-color: #800080;
        display: block;
        text-align: center;
        transition: all 0.3s ease;
    }
    #click:checked~ul {
        left: 0%;
    }
    nav ui li {
        margin: 40px 0px;
    }
    nav ui li a {
        font-size: 20px;
        display: block;
    }
    nav ul li a:hover,
    nav ul li a.active-menu {
        border-radius: 5px;
        background-color: lightgray;
        padding: 8px 10px;
        color: #000;
        transition: all 0.5s ease-out;
    }
}

Small TS Code For Active Menu

// Your Component Name
export class YourComponent implements OnInit {
  activeMenu = "Home"
  navMenu:any = [{title:"Home",link:"/"},{title:"Gallery",link:"/"}, {title:'Services',link:"/"},{title:"About US",link:"/"},{title:"Contact US",link:"/abc"}]
  constructor() { }

  ngOnInit(): void {
  }

  selectMenu(title:any){
    this.activeMenu = title
  }
}

Comments

Post a Comment