CSS Responsive Navbar
 |
| CSS Responsive Navbar |
HTML PART
The header section contains a navbar that has a logo and links to various pages of the website, such as Home, About, Services, and Contact. It also has a button labeled "Get Started" that directs the user to take action and a toggle button that allows users to expand or collapse the navigation menu. The navigation menu is also present in the form of a dropdown menu, which contains the same links.
The section contains a welcome message with a heading that says "Welcome" and a paragraph that includes some placeholder text.
This HTML code provides a basic structure for a web page's header and section. It can be further customized with CSS and JavaScript to improve the appearance and functionality of the website.
<header>
<div class="navbar">
<div class="logo"><a href="#">Programming</a></div>
<ul class="link">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTECT</a></li>
</ul>
<a class="action-btn" href="#">Get Started</a>
<div class="toggle_btn">
<i class="fa-solid fa-bars"></i>
</div>
</div>
<div class="dropdown_menu">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTECT</a></li>
<li> <a href="#" class="action-btn">Get Started</a></li>
</div>
</header>
<section id="hero">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Consequuntur
rerum tenetur placeat asperiores,
reiciendis perferendis</p>
</section>
CSS PART
The first part, *, sets the margin, padding, box-sizing, and font-family properties for all elements on the page. This sets the default values for these properties for all elements.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
The next part, body, sets the background color, background image, and height of the body element. It also positions the background image in the center and scales it to cover the entire background.
body {
height: 100vh;
background-color: #000;
background-image: url('https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1517&q=80');
background-size: cover;
background-position: center;
}
The following parts target the li and a elements and set their styles. li elements are given list-style: none to remove the bullet points from any lists, while a elements are styled to have no text decoration and white text color.
li
{
list-style: none;
}
a
{
text-decoration: none;
color: #fff;
font-size: 1rem;
}
The a:hover selector changes the color of the links to orange when the user hovers over them.
The next part, header, targets the header element and sets its position and padding.
header
{
position: relative;
padding: 0 2rem;
}
The .navbar class styles the navigation bar by setting its width, height, maximum width, margin, display, and alignment properties.
.navbar
{
width: 100%;
height: 60px;
max-width: 1200px;
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-around;
}
The .navbar .logo a selector styles the logo in the navigation bar, while the .navbar .link selector styles the links.
.navbar .logo a
{
font-size: 1.5rem;
font-weight: bold;
}
.navbar .link
{
display: flex;
gap: 2rem;
}
The .navbar .toggle_btn selector styles the button that appears when the screen size is reduced, while the .action-btn selector styles a call-to-action button with an orange background color.
.navbar .toggle_btn
{
color: #fff;
font-size: 1.5rem;
cursor: pointer;
display: none;
}
.action-btn
{
background:orange;
color: #fff;
padding: 0.5rem 1rem;
border: none;
outline: none;
border-radius: 1.8rem;
font-size: 0.8rem;
font-weight: bold;
cursor: pointer;
}
.action-btn:hover
{
color: #fff;
scale: 1.05;
}
.action-btn:active
{
scale: 0.9s;
}
The .dropdown_menu class sets the style of a dropdown menu by positioning it absolutely and hiding it initially. The open class is added when the menu is opened, which sets the height of the menu to 240px.
.dropdown_menu
{
display: none;
position: absolute;
right: 2rem;
top: 60px;
width: 300px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 10px;
overflow: hidden;
height: 0;
transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dropdown_menu.open
{
height: 240px;
}
.dropdown_menu li
{
padding: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown_menu .action-btn
{
width: 100%;
display: flex;
justify-content:center;
}
The section#hero selector styles the hero section by setting its height, display, and alignment properties.
section#hero
{
height: calc(100vh - 60px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}
#hero h1
{
font-size: 3rem;
margin-bottom: 1rem;
}
The @media queries to adjust the styles of the elements based on the screen size. The first query hides the links and call-to-action button and shows the toggle button and dropdown menu on screens smaller than 992px. The second query adjusts the position and width of the dropdown menu on screens smaller than 576px.
@media (max-width: 992px)
{
.navbar .link,
.action-btn
{
display:none;
}
.navbar .toggle_btn
{
display: block;
}
.dropdown_menu
{
display: block;
}
}
@media (max-width: 576px)
{
.dropdown_menu
{
left: 2rem;
width: unset;
}
}
JS PART
The first line uses the document.querySelector() method to select the DOM element with the class .toggle_btn and assigns it to the variable toggleBtn.
The second line selects the icon element with the class .toggle_btn i and assigns it to the variable toggleBtnIcon.
The third line selects the dropdown menu element with the class .dropdown_menu and assigns it to the variable dropdownMenu.
The fourth line sets the onclick event handler for the toggleBtn element. When the button is clicked, the function defined in the following lines will be executed.
The function uses the classList.toggle() method to toggle the open class on the dropdownMenu element. This means that if the element does not have the open class, it will be added, and if it already has the class, it will be removed.
The isOpen variable is assigned the value of the contains() method that checks whether the open class is present in the dropdownMenu element's class list.
The next line sets the class of the toggleBtnIcon element based on the isOpen variable's value. If the isOpen is true, the fa-solid fa-xmark class will be set, which will display a close icon. If it's false, the fa-solid fa-bars class will be set, which will display a menu icon.
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'
}
.png)
.png)
0 Comments