How to Make Responsive Header In Angular || Angular || Angular Tutorial || Angular Course || Header

In this video I have shown how to make Responsive Header in Angular.
Angular Responsive Header. Angular responsive Menu. Responsive Menu in Angular. How to make Responsive Menu in Angular. Angular. Angular Tutorial. Angular Course.

THANKS FOR WATCHING
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Follow me on:-

#angular #angulartutorial #angularcourse

[diabigasoro]

code css


header{

padding:12px 0;
background-color: #222;


}
.menu{
margin-top: 10px;
}
.menu ul{
padding: 0;
margin:0;

}

.menu ul li{
list-style-type: none;

display: inline-block;

margin-left: 24px;

text-transform: uppercase;

}
.menu ul li a{
list-style: none;
text-decoration: none;
color:
}
.menu ul li a:hover{
color: #e9c62c;
cursor: pointer;
transition: 0.4s ease-in-out;
}
@media(max-width: 999px){
.menu{
position: fixed;
right: -280px;
top:64;
width: 280px;
height: 100%;
background: #222;
transition: 0.4s ease-in-out;

}
.menu ul li {
display: block;
text-align: left;
margin: 0;
padding: 10px 0 10px 26px;
border-bottom: 1px solid #312f2f;

}
.menu_icon{
display: inline-block;
position: relative;
right: 0;
top: 20 px;

}


.menu_icon span {
width: 32px;
height: 3px;
background:
display: block;
transition: 0.2s ease-in-out;

}
.menu_icon span:nth-child(2) {
margin: 4px 0;

}
.menu_iconClass span:nth-child(2){

display: none;
}

.menu_iconClass span:nth-child(1){

transform: rotate(40deg);
}


.menu_iconClass span:nth-child(3){

transform: rotate(-40deg);
margin-top: -3px;
}

.menuClasse{

right: 0;
transition: 0.4s ease-in-out;

}
}



html code
<header>
<div class="container">

<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<div class="logo">
<img src="" alt="logo">
</div>

</div>


<div class="col-md-9 col-sm-9 col-9 text-end">


<div class="menu_icon" (click)="openMenu()">
<span></span>
<span></span>
<span></span>
</div>


<div class="menu"
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Mon compte</a></li>
</ul>
</div>

</div>

</div>

</div>
</header>

ts code


constructor() { }
menu_icon_variable: boolean = false;
menuVariable: boolean = false;
ngOnInit(): void {
}
openMenu() {
this.menuVariable =! this.menuVariable;
this.menu_icon_variable =! this.menu_icon_variable;
}

[akilaj]

Thanks for the explanation! Resolved bunch of problems I had

[xxspiros]

i loved the trick with the rotate for exit icon!

[linymolsalim]

How can we close the menu clicking anywhere in the page? Or navigating the page?