Also Like

0

Module 9 : Interactive Components

Module 9 : Interactive Components

Interactive Components with CSS

Build navigation bars, dropdown menus, and image galleries with modern CSS techniques

Learning Outcomes

  • Create horizontal and vertical navigation bars with hover effects
  • Implement dropdown menus that appear on hover or click
  • Build responsive image galleries using CSS Grid and Flexbox
  • Add interactive elements and transitions to enhance user experience
  • Apply accessibility best practices to interactive components

Navigation Bars

Navigation bars are fundamental components for website navigation. CSS allows us to create both horizontal and vertical navigation structures.

Horizontal Navigation Bar

A horizontal nav bar displays links side by side, typically at the top of a page.

<div class="nav-horizontal">
    <ul>
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#"><i class="fa fa-info-circle"></i> About</a></li>
        <!-- More items -->
    </ul>
</div>

<style>
.nav-horizontal {
    background-color: var(--burgundy-main);
    display: flex;
    justify-content: space-between;
}

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

.nav-horizontal a {
    color: white;
    padding: 15px 20px;
    transition: background-color 0.3s;
}

.nav-horizontal a:hover {
    background-color: var(--burgundy-dark);
}
</style>

Vertical Navigation Bar

A vertical nav bar stacks links vertically, often used in sidebars.

<div class="nav-vertical">
    <ul>
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <!-- More items -->
    </ul>
</div>

<style>
.nav-vertical {
    width: 200px;
    background-color: var(--burgundy-main);
}

.nav-vertical a {
    color: white;
    padding: 15px 20px;
    border-bottom: 1px solid var(--burgundy-light);
    transition: background-color 0.3s;
}

.nav-vertical a:hover {
    background-color: var(--burgundy-dark);
}
</style>

Dropdown Menus

Dropdown menus reveal additional navigation options when users hover or click on a parent item.

Hover Dropdown
Profile Settings Logout
Mega Menu

Development

JavaScript Backend 
<div class="dropdown">
    <button class="dropdown-btn">Menu <i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
        <a href="#"><i class="fa fa-icon"></i> Item 1</a>
        <a href="#"><i class="fa fa-icon"></i> Item 2</a>
    </div>
</div>

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    display: block;
    transition: background-color 0.3s;
}

.dropdown-content a:hover {
    background-color: var(--burgundy-lighter);
}
</style>

Image Galleries

Modern CSS provides powerful tools like Flexbox and Grid to create responsive image galleries.

Flexbox Gallery

A flexible gallery that adjusts to different screen sizes using Flexbox.

Nature
Architecture
Technology
Travel 
<div class="gallery-flex">
    <div class="gallery-item">
        <img src="image1.jpg" alt="Description">
    </div>
    <!-- More items -->
</div>

<style>
.gallery-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.gallery-flex .gallery-item {
    flex: 1 1 200px;
    overflow: hidden;
}

.gallery-flex img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-flex .gallery-item:hover img {
    transform: scale(1.05);
}
</style>

CSS Grid Gallery

A more structured gallery with consistent rows and columns using CSS Grid.

Nature
Nature
Architecture
Architecture
Technology
Technology
Travel
Travel
Food
Food
Art
Art
<div class="gallery-grid">
    <div class="gallery-item">
        <img src="image1.jpg" alt="Description">
        <div class="gallery-caption">Caption</div>
    </div>
    <!-- More items -->
</div>

<style>
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.gallery-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    transform: translateY(100%);
    transition: transform 0.3s;
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}
</style>

Knowledge Check

1. Which CSS property is essential for creating a horizontal navigation bar?

2. How do you make a dropdown menu appear on hover?

3. Which CSS feature is best for creating a responsive image gallery with consistent row heights?

4. What CSS property creates space between gallery items in both Flexbox and Grid layouts?

5. Which technique helps make navigation accessible for keyboard users?

© 2023 Interactive Components Mastery | Designed for Web Developers

You may like these posts