Scribd
Upload
22 views4 pages

HTML & CSS Navigation Bar Guide

The document provides a detailed guide on creating an HTML and CSS navigation bar, including code snippets and explanations for each section. It covers the structure from the DOCTYPE declaration to the styling of the top bar, navigation bar, and dropdown menus. Key elements include responsive design, metadata, and hover effects for dropdowns and submenus.

Uploaded by

ADNAN VP
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views4 pages

HTML & CSS Navigation Bar Guide

The document provides a detailed guide on creating an HTML and CSS navigation bar, including code snippets and explanations for each section. It covers the structure from the DOCTYPE declaration to the styling of the top bar, navigation bar, and dropdown menus. Key elements include responsive design, metadata, and hover effects for dropdowns and submenus.

Uploaded by

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

HTML & CSS Navigation Bar – Section-by-Section Code and Explanation

DOCTYPE and HTML Start

Code:

<!DOCTYPE html>
<html lang="en">

Explanation:

Specifies HTML5 as the document type. The root <html> tag declares English as the page
language.

Head Section

Code:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bharathamatha College</title>
<link rel="stylesheet" href="[Link]">
</head>

Explanation:

Contains metadata and links to CSS. Ensures responsive design and sets the page title.

Top Bar Section

Code:

<div class="top-bar">
<span>📞 04923272318</span>
<span>📧 bharathamathacollege@[Link]</span>
<div class="top-bar-links">
<a href="#">STAFF LOGIN</a>
...
</div>
</div>

Explanation:
Displays a top information bar with contact details and quick navigation links.

Dropdown Menu

Code:

<div class="dropdown">
<a href="#">IQAC ▾</a>
<ul class="dropdown-menu">
<li><a href="#">Action Reports</a></li>
...
</ul>
</div>

Explanation:

Creates a dropdown with additional navigation links appearing on hover.

Main Header and Logo

Code:

<header class="main-header">
<div class="logo-section">
<img src="[Link]" class="logo">
<div class="college-name">
<h1>BHARATHAMATHA</h1>
<p>COLLEGE OF ARTS & SCIENCE</p>
</div>
</div>
</header>

Explanation:

Displays the institution name and logo at the top of the page.

Navigation Bar

Code:

<nav class="navbar">
<a href="#">HOME</a>
<div class="dropdown">
<a href="#">ABOUT US ▾</a>
<ul class="dropdown-menu">
<li><a href="#">History</a></li>
</ul>
</div>
</nav>

Explanation:

Contains the main navigation with links and hover-based dropdown submenus.

CSS: Top Bar Styling

Code:

.top-bar {
display: flex;
background-color: #f5f5f5;
color: #004a8f;
}

Explanation:

Styles the top bar with a soft background and horizontal layout.

CSS: Navbar Styling

Code:

.navbar {
display: flex;
background-color: #0068bc;
}
.navbar a {
color: white;
padding: 12px 15px;
}

Explanation:

Creates a horizontal menu with white links on a blue background.

CSS: Dropdown Styling

Code:

.dropdown-menu {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-menu {
display: block;
}

Explanation:

Hides dropdowns by default and shows them when hovering.

CSS: Submenu Styling

Code:

.dropdown-submenu {
display: none;
position: absolute;
left: 100%;
}
.submenu:hover .dropdown-submenu {
display: block;
}

Explanation:

Allows nested submenus to appear to the right on hover.

You might also like