Create a collapsible menu using only CSS that expands when the down arrow is clicked, specifically designed for

I am currently working on creating a mobile-friendly version of a menu. I have a list of items, and I want only the item with the class nav-current to be displayed initially. Using pseudo :after, I added an arrow after the link of that specific li element. My goal is to make all the list items visible when the arrow is clicked.

This is my HTML code:

<ul class="top-nav">
  <li>
    <a href=#>Textbla</a>
  </li>
  <li class="nav-current">
    <a href=#>Textlpops</a>
  </li>
  <li>
    <a href=#>Google Res</a>
  </li>
</ul>

And here is my Sassy CSS:

$depends:none;

.top-nav { 
  float: none; 
  margin: 10px;
  li,li.user-tools {

  display:$depends;

  float:none!important;
  border-bottom: 1px solid #666;
  &:last-child {
   border-bottom:0 none;
  }
  &.nav-current {
   display:block;
   border-bottom:0 none;
   a:after {
     content:'arrow';
     color:#1a1a1a;
     position:absolute;
     top:10px;
     right:20px;
     height:12px;
     background: transparent url(../images/custom/arrow_down.png) no-repeat left top;
    }

   a:target:after {
     $depends:block;
   }

   }
 }   
}

I am trying to achieve this without using any JavaScript, so I am looking for a solution solely in SASS or utilizing CSS3 tricks. Is there a way to accomplish this in SASS or are there any CSS3 features that could help me achieve this effect?

csssass

Answer №1

The selection of the target in CSS may not function as expected. It seems that achieving what you are describing is not feasible with pure CSS.

Fresh Insight

After revisiting your query, it appears that mobile browsers might not fully support the pointer-events property either. The provided new solution doesn't heavily rely on pointer-events, although it serves as an enhancement. Some additional markup is required for implementation. I have successfully tested this solution on Firefox, Chrome, and IE8/9. However, adjustments in opacity levels may be necessary based on browser compatibility, especially for mobile usage.

HTML Structure

<div class="hidden-nav">  
    <div class="nav-expander"></div>
    <div class="hover-shield"></div>  
    <ul class="top-nav">
      <li>
        <a href=#>Textlinks Adv</a>
      </li>
      <li class="nav-current">
        <a href=#>Textlinks Publ</a>
      </li>
      <li>
        <a href=#>Google Shopping</a>
      </li>
    </ul>
</div>

CSS Styles

.hidden-nav {
    position: relative; 
    display: inline-block;
}

.nav-expander { /* container for arrow activation */
    width: 16px;
    height: 8px;
    position: absolute;
    top: 5px;
    right: 2px;
    z-index: 4;
}

.nav-expander:before { /* the activation arrow design */
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid blue;
    position: absolute;
    top: 0;
    left: 0;
}

.hover-shield { /* restricts activation to the arrow only */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: white; /* needed for hover functionality */
    filter: alpha(opacity=0); /* no opacity required */
    -moz-opacity: 0;
    opacity: 0;
}

.nav-expander:hover + .hover-shield {
    z-index: 0;
}
... (CSS continues)

Prior Solution Summary

In a previous attempt, a pure CSS solution using hover on the arrow was crafted. While effective on Firefox and Chrome, it had limitations on IE8/9 due to the lack of support for the pointer-events attribute on the "nav-current" element. Additional styling and markup were required, and some trade-offs existed depending on browser compatibility, particularly evident in older versions of Internet Explorer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on integrating an HTML and CSS register form in Django

I have successfully created a responsive register and login using HTML and CSS. Instead of utilizing the standard register form and login provided by Django upon configuration, I want to apply my own custom template. To summarize, while I am familiar with ...

javascriptpythonhtmlcssdjango

Creating a blur effect on an image tag when hovering using CSS and HTML

I am currently developing a Portal website for one of my classes, and the template provided by my professor utilizes the <picture> tag to adjust images depending on the browser's size. My goal is to add a blur effect and darken the image while d ...

htmlcss

Incorporating shadow effects along the right border of alternating table cells: a step-by-step guide

How can I set a proper shadow border for alternating td elements in a table? I've been experimenting with the code below. While the shadow effects work, they are getting cut off at each td junction. Can anyone provide assistance? Here is my table: ...

htmlstylesshadowcss

Issue with spacing in CSS sticky header on mobile devices

When implementing CSS position sticky for a floating header, I have noticed that on some mobile devices there is a small gap of around 1px between "element_b" and "element_c" while scrolling. #element_a{ width: 100%; position: -webkit-sticky !impo ...

csspositionsticky

Focusing in on a PARTICULAR SECTION of the picture

My website has a unique concept - comparing two articles side by side. One of the articles is mine, while the other is displayed alongside it. To capture entire pages for comparison, I utilize Google's GoFullPage feature to take screenshots. The goa ...

javascripthtmlcss

Issue with margin spacing not desired on Internet Explorer 7

Encountering an unusual issue in Internet Explorer 7 where the heading appears with excessive space from the top. This issue is exclusive to IE 7 and not present in other browsers or newer IE versions. Any suggestions on how to resolve this? Chrome Versi ...

cssinternet-explorerinternet-explorer-7

The CSS form appears to be too large for the page

On every single one of my pages, the content fits perfectly within the body: However, when I have forms on the page, they extend beyond the footer and the body doesn't resize accordingly: Where could the issue be coming from? ...

asp.net-mvc-3htmlcss

Selecting the next element in the DOM using Javascript

Here is the structure of my current setup: <div class="wrapper"> <div class="first"> <a class="button" href="">click</a> </div> <div class="second"> <div class="third"> S ...

javascripthtmlcsscoffeescriptanimated

The issue of the v-list-item-title text color remaining static in v-navigation-drawer when active has been noted

I'm currently working on developing an application using the Vuetify framework. I've encountered an issue while trying to modify the CSS properties of v-list-item. The main problem arises when an item is active, as everything seems to work fine ...

cssvue.jscss-selectorsvuetify.jsvue-router

Unused content in the stylesheet

I am currently referencing my CSS stylesheet in the following way: <link rel="stylesheet" type="text/css" href='@routes.Assets.versioned("stylesheets/main.css")' media="screen" /> The location of the stylesheet is found at /public/stylesh ...

htmlcssplayframeworkplayframework-2.0

Utilize LESS Bootstrap as a guide for incorporating content

I have been struggling to properly integrate Bootstrap into my LESS file. Currently, I am adding Bootstrap to my project using NPM. If I simply use the following import statement in my LESS file: @import (reference) 'node_modules/bootstrap/less/boot ...

csstwitter-bootstrapless

The hover selector in Material UI and React is not functioning as expected

My code is experiencing an issue where the hover selector does not appear to be working. Although all other styling aspects function correctly, the hover effect is not visible. import React from "react"; import Paper from '@material-ui/core/Paper&apo ...

cssreactjshovermaterial-ui

What is the best way to create a mirrored effect for either a card or text using CSS

Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered? The HTML code is included belo ...

javascripthtmlcss

Hide overflow for images with unique shapes

Here are the two image layers: https://i.sstatic.net/lUUQC.jpg One shows a hand holding a phone, and the other is a black hole. This is how you can achieve it using HTML markup: <div class="wrapper"> <img class="wrapper__image" src="path/to/ ...

csscss-animations

Creating a Smooth Curve with CSS

Recently, I've decided to create a unique clock design inspired by the one showcased here. However, instead of using images like they did, I would like to implement ARC. Is it possible to create an arc using only CSS? For instance, if I wanted to make ...

htmlcss

Toggling in JS does not alter the DIV element

I attempted to utilize Bootstrap toggle to modify the div HTML content similar to the example shown at with a slight modification, but unfortunately, it did not function as expected due to a discrepancy in my current JavaScript code. I am unsure of what I ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a dynamic table with columns of fixed width in Angular on the fly

I am struggling to create a data table with fixed column widths (20% each). I have incorporated div elements in my table structure to enable dynamic row creation using Angular, but this has caused some design issues. My goal is for all rows to occupy 100% ...

cssangularhtml-table

Issue with margin-top on <p> and <a> elements not displaying correctly?

I've been attempting to incorporate margin-top for a link button, but unfortunately it's not working as expected. I've even experimented with inline styles for both the 'p' and 'a' tags. There are three list elements, I ...

htmlcssmargin

What is causing my two divs to fail in expanding to the full height of the parent div?

HTML: <div id="main" class="rounded-corners"> <div id="benefits"> <img src="/benefits-heading.png" style="padding: 30px;" /> <div id="corporateside"> ...

css

What's the best way to make sure the footer stays at the bottom of every page using CSS?

Here's the code I've been working on: #footer { font-size: 10px; position:absolute; bottom:0; background:#ffffff; } I'm facing an issue with this code - can anyone offer some assistance? UPDATE: To clarify the issue further: T ...

htmlcssfootersticky-footer