Slide-Down Top Nav Using Only CSS

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Creating a Slide-down Menu, Making the Logo & Menu Button Slide Down with the Page Content

Exercise Preview

Exercise Overview

In a previous exercise we built an off-screen navigation that slid in from the side, overlaying the page content. In this exercise, you'll refine the HTML and CSS of that implementation to create a more sophisticated navigation pattern—one that slides down from the top of the screen and elegantly pushes the page content down rather than covering it.

This slide-down approach offers several UX advantages: it maintains content visibility, feels less intrusive than overlay patterns, and creates a more natural flow that users expect from modern mobile interfaces. You'll master CSS transitions, positioning techniques, and the nuanced use of max-height for smooth animations that perform well across devices.

Getting Started

1. This exercise builds directly on concepts covered in exercise 5A (Off-Screen Side Nav Using Only CSS). Complete that exercise before proceeding—the foundational CSS and HTML structure established there is essential for this implementation.
2. In a browser, open index.html from the Slide-Down Top Nav folder found in Class Files > yourname-Mobile and Responsive Class > Slide-Down Top Nav.
3. Resize the browser window to simulate a mobile viewport, ensuring the MENU button appears at the top right of the interface.
4. Click the MENU button to observe the current behavior—the navigation slides in from the side. The toggle functionality works correctly, but we're going to transform this into a more refined interaction pattern.
5. Keep the browser open at mobile width throughout the exercise for continuous testing and iteration.
6. Open the Slide-Down Top Nav folder in your code editor (modern editors like VS Code, Sublime Text, or Atom handle folder-based workflows efficiently).
7. In your code editor, open main.css from the css folder to begin our CSS modifications.

Changing the Navigation's Appearance

Now we'll transform the side-sliding navigation into a top-down pattern by adjusting positioning and layout properties. This requires precise CSS modifications to maintain functionality while changing the visual behavior.

1. In the max-width: 700px media query, locate the nav rule (approximately line 85).
2. Remove the width and left properties—these were controlling the side-slide behavior we're replacing.

3. Change the position to relative to establish a new positioning context. Your rule should now look like this:

   nav {
      position: relative;
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      z-index: 100;
      transition: all.2s ease;
   }

   Technical Note: The relative positioning ensures our z-index property functions correctly, keeping the navigation above the invisible overlay that enables click-outside-to-close functionality.

4. Save the file and test your changes.
5. Reload your browser. You'll notice the nav now appears at the top instead of sliding from the side—progress! However, it should be hidden by default. Let's implement that behavior.

6. Return to main.css in your code editor.

   To hide the navigation in its default state, we'll leverage a clever CSS technique using max-height instead of height. This approach is necessary because CSS transitions cannot animate smoothly from height 0 to auto—but they can animate between specific max-height values.

7. In the nav rule, change height to max-height and set it to 0:

   nav {
      position: relative;
      max-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      z-index: 100;
      transition: all.2s ease;
   }

8. Now that we've collapsed the max-height, we need to hide any content that exceeds this boundary. Modify the overflow-y property:

   nav {
      position: relative;
      max-height: 0;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      z-index: 100;
      transition: all.2s ease;
   }

9. Since the navigation will now scroll with the page content rather than independently, we can remove the -webkit-overflow-scrolling property:

   nav {
      position: relative;
      max-height: 0;
      overflow-y: hidden;
      z-index: 100;
      transition: all.2s ease;
   }

10. Save the file and test the current state.
11. Reload your browser. Excellent—the navigation is properly hidden again.
12. Click the MENU button and notice nothing happens. This is expected because we need to update the :checked pseudo-class rule to work with our new max-height approach.
13. Switch back to main.css to implement the show state.

14. Locate the #nav-checkbox:checked ~ nav rule (around line 92) and replace the left property with our new max-height approach:

    #nav-checkbox:checked ~ nav {
       max-height: 30em;
    }

    Technical Note: For smooth CSS transitions, we must specify a concrete value rather than auto. The 30em value provides sufficient space for most navigation content while ensuring smooth animation performance. This value can be adjusted based on your specific content requirements.

15. Save the file and test the functionality.
16. Reload the browser and test the navigation.

17. Click the MENU button to see your slide-down navigation in action! We still have two refinements to make:

    • The NYC logo currently disappears, but it should slide down gracefully with the page content.
    • The animation timing could be more polished—it opens slightly too quickly for an elegant user experience.
18. Let's optimize the transition timing first. Return to main.css.

19. In the nav rule (around line 85), adjust the transition duration for a more refined feel:

    nav {
       position: relative;
       max-height: 0;
       overflow-y: hidden;
       z-index: 100;
       transition: all.5s ease;
    }

20. Save the file and test the improved timing.
21. Reload the browser and test the MENU button. The animation should now feel more polished and intentional.

Floating the Logo

With the navigation mechanics working smoothly, we now need to address the logo positioning. Currently, it disappears when the navigation opens, but proper UX design calls for it to flow naturally with the page content.

1. The key to fixing the NYC logo positioning lies in the HTML structure and CSS flow. Open index.html in your code editor.
2. On line 15, observe that the logo currently appears before the navigation in the HTML structure. For our slide-down layout, we want it positioned with the main page content, below the navigation.
3. Select the entire logo element and cut it from its current position.

4. Paste it immediately below the closing nav tag, positioning it with the content that should move:

   </nav>
   <img src="img/nyc-logo.svg" class="nyc-logo" ALT="NYC Logo">
   
   <h1>New York City</h1>

5. Save the file and test the structural change.
6. Reload your browser and activate the MENU button. The logo is still hidden, which indicates we need to adjust its CSS positioning strategy.
7. Switch back to main.css to examine the current logo styles.
8. Locate the .nyc-logo rule in the general styles section (around line 48).
9. Notice the absolute positioning—the logo is currently fixed 15px from the top of the viewport. For our new layout, we need it to participate in the normal document flow while maintaining its left alignment.

10. Replace the absolute positioning with a float-based approach that will align with the MENU button:

    .nyc-logo {
       width: 75px;
       float: left;
       margin-top: 15px;
       margin-left: 20px;
    }

11. Save the file and test the mobile layout.
12. Reload your browser and test the mobile navigation—it should now work beautifully.
13. Resize the window to desktop width to view the horizontal navigation bar. You'll notice the logo positioning is now incorrect for the desktop layout.
14. This is expected behavior—we modified the general rule, which affects all screen sizes. We need to restore absolute positioning specifically for desktop viewports.
15. Return to main.css to add desktop-specific positioning.

16. In the min-width: 701px media query, add a new rule after the nav ul li rule (around line 129):

    .nyc-logo {
       position: absolute;
       top: 15px;
       left: 20px;
       margin: 0;
    }

17. Save the file and verify both responsive states work correctly.
18. Reload your browser and confirm the NYC logo appears correctly in the desktop layout.
19. Resize to mobile width and test your polished slide-down navigation!

20. After activating the MENU button, you'll notice the button itself disappears. This is acceptable UX since users have multiple ways to close the navigation (the close button and clicking anywhere on the page). However, if your design requires the MENU button to remain visible, proceed to the optional bonus section below.

Bonus: Making the MENU Button Slide with the Page

This optional enhancement maintains the MENU button visibility throughout the navigation interaction, which some design systems prefer for consistent user control.

1. The technique for repositioning the MENU button mirrors our logo solution. Open index.html in your code editor.
2. Locate line 13 and select the entire menu-button label element.
3. Cut the element from its current position.

4. Paste it below the nyc-logo img element, grouping the interface elements that should move together:

   <img src="img/nyc-logo.svg" class="nyc-logo" ALT="NYC Logo">
   <label for="nav-checkbox" class="menu-button">MENU</label>

5. Save the HTML file and prepare to adjust the CSS positioning.
6. Return to main.css to modify the button positioning.
7. Find the .menu-button rule around line 95.

8. Update the positioning to use float layout instead of absolute positioning:

   .menu-button {
      float: right;
      margin-top: 10px;
      margin-right: 10px;
      color: #fff;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
   }

9. Save the file and test the complete implementation.
10. Reload your browser and activate the MENU button to verify it now slides down with the page content.

11. The MENU button now remains visible throughout the interaction, providing users with consistent access to the navigation toggle. Your slide-down navigation is now complete with professional-grade UX polish!