From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- build/menu-toggle-css/index.html | 107 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 build/menu-toggle-css/index.html (limited to 'build/menu-toggle-css') diff --git a/build/menu-toggle-css/index.html b/build/menu-toggle-css/index.html new file mode 100644 index 0000000..fb941a8 --- /dev/null +++ b/build/menu-toggle-css/index.html @@ -0,0 +1,107 @@ + + + + + + + Menu Toggle with Pure CSS + + + + + + +
+

Menu Toggle with Pure CSS

+

2020-10-19

+

When thinking through navigation designs for mobile devices sometimes the best option is to store away the content behind a toggle button. This button would then display the menu items upon interaction. Let me show you how to create such an element with only CSS - no need for JavaScript today!

+

Before we begin

+

I would like to point out that the concept of "toggling" the main menu (even for mobile) is not always the best solution. If you're interested, you can take a look at a previous article I wrote explaining why: Using Hamburger Menus? Try Sausage Links

+

Now that we have mentioned possible pitfalls of relying so heavily on toggle menus, let's build one!

+

Our Final Product

+

Menu toggle made from pure CSS

+

Live CodePen Example

+

The HTML

+

To implement this design you really don't need much in terms of HTML:

+ +
<!-- The checkbox input & label partner -->
+<input type="checkbox" id="menu-toggle">
+<label for="menu-toggle">Menu</label>
+
+<!-- The navigation we wish to toggle -->
+<nav>
+    <ul>
+        <li><a href="">Home</a></li>
+        <li><a href="">About</a></li>
+        <li><a href="">Articles</a></li>
+        <li><a href="">Colophon</a></li>
+        <li><a href="">Contact</a></li>
+    </ul>
+</nav>
+
+

That's it!

+

The CSS

+

The first thing we need to do is "hide" the checkbox input element. It's important to avoid using display: none or visibility: hidden in order to achieve this. Those CSS properties can negatively impact accessibility (specifically screen readers). So we will be relying on the position, z-index and opacity properties to help us out.

+
/* Set the input position to absolute, send it off screen with zero opacity */
+input[type="checkbox"] {
+    left: -9999px;
+    opacity: 0;
+    position: absolute;
+}
+
+

Then we give our corresponding label a minor face-lift to make it appear more button-like:

+
/* Minor visual styling to make the label more button-y */
+label {
+    border: 1px solid currentColor;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 10px;
+}
+
+

For our main nav element, we want to set it's position to absolute in order to avoid any janky page rendering issues that might occur when toggling the menu:

+

` +

+
/* Set nav to absolute (avoids odd page rendering space pop-in) */
+nav {
+    opacity: 0;
+    position: absolute;
+    z-index: -2;
+}
+
+

The last step is to actually show the menu if the user toggles the checkbox:

+
/* Show nav when checkbox is checked */
+input[type="checkbox"]:checked ~ nav {
+    opacity: 1;
+    z-index: 1;
+}
+
+

It might not look like much, but you now have a fully functional menu toggle - made with pure CSS!

+

With Great Power...

+

Although this design is very simple to implement, please remember to use these types of menus wisely. Just because you can do something, doesn't always mean you should.

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf