Scribd
Upload
27 views2 pages

Not Included

The document contains HTML and CSS code for a navigation bar with a toggle button. The HTML defines a toggle button with icon, and a dropdown menu with navigation links. The JavaScript toggles the open class on the menu and changes the icon when clicked. The CSS styles the toggle button, positions the dropdown menu absolutely to the right, and handles responsive behavior by hiding elements on smaller screens and displaying the toggle button. It sets properties like background, border radius, and transition for dropdown opening/closing animation.

Uploaded by

Myo Myint
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
27 views2 pages

Not Included

The document contains HTML and CSS code for a navigation bar with a toggle button. The HTML defines a toggle button with icon, and a dropdown menu with navigation links. The JavaScript toggles the open class on the menu and changes the icon when clicked. The CSS styles the toggle button, positions the dropdown menu absolutely to the right, and handles responsive behavior by hiding elements on smaller screens and displaying the toggle button. It sets properties like background, border radius, and transition for dropdown opening/closing animation.

Uploaded by

Myo Myint
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

NavBar Html

line 25
<div class="toggle_btn">
<i class="fa-solid fa-bars"></i>
</div>
line 27
<div class="dropdown_menu open">
<li><a href="hero">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="services">Services</a></li>
<li><a href="contact">Contact</a></li>
<li><a href="#" class="action_btn">Get Started</a></li>
</div>
line 44
<script>
const toggleBtn = document.querySelector('.toggle_btn')
const toggleBtnIcon = document.querySelector('.toggle_btn i')
const dropDownMenu = document.querySelector('.dropdown_menu')
toggleBtn.onclick = function(){
dropDownMenu.classList.toggle('open')
const isOpen = dropDownMenu.classList.contains('open')
toggleBtnIcon.classList = isOpen
? 'fa-solid fa-xmark'
: 'fa-solid fa-bars'
}
</script>
NavBar Css
line 46
.navbar .toggle_btn{
color:#fff;
font-size: 1.5rem;
cursor: pointer;
display: none;
}
line 66
@media(max-width:992px){
.navbar .links,
.navbar .action_btn{
display: none;
}
.navbar .toggle_btn{
display: block;
}
.dropdown_menu{
display: block;
}
}
line 78
.dropdown_menu{
display: none;
position: absolute;
right: 2rem;
top: 60px;
height:0;
width:300px;
background: rgba(225,225,225,0.1);
backdrop-filter:blur(15px);
border-radius:10px;
overflow: hidden;
transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
line 79
.dropdown_menu .open{
height:240px;
}
.dropdown_menu li{
padding: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown_menu .action_btn{
width: 100px;
display: flex;
justify-content: center;
}
line 92
@media(max-width:576px){
.dropdown_menu{
left:2rem;
width:unset;
}
}
line 118
.navbar .toggle_btn{
display: block;
}

You might also like