Kevin Powell - Community•2y ago

Dropdown menu on click using only CSS without any JS or other scripts.

Hello Kevin and all the lovely member, I am facing a challenge to create a menu clickable and not hover using only CSS. This is 1st time asking a query I dont know if its the right channel to post if its not please guide me where to post. My code:

<td class="jsgrid-cell" style="width: 100px;">
    <span>
    <div class="dropdown">
        <a style="color: rgb(255, 255, 255); position: relative; left: 10%;">Actions</a>
        <i class="fas fa-angle-down" style="color: rgb(255, 255, 255); position: relative; left: 15%;"></i>
            <div class="dropdown-content">
            <a onclick="buttonClick(event, 'Assign')"><i class="far fa-user-plus"></i>&nbsp;&nbsp;Assign to</a>
            <a onclick="buttonClick(event, 'ActionsOpen')"><i class="far fa-edit"></i>&nbsp;&nbsp;Edit</a>
            <a onclick="buttonClick(event, 'ActionsView')"><i class="far fa-eye"></i>&nbsp;&nbsp;View</a>
            <a onclick="buttonClick(event, 'ActionsSoftDelete')"><i class="far fa-trash"></i>&nbsp;&nbsp;Delete</a>
            </div>
    </div>
    </span>
</td>

<td class="jsgrid-cell" style="width: 100px;">
    <span>
    <div class="dropdown">
        <a style="color: rgb(255, 255, 255); position: relative; left: 10%;">Actions</a>
        <i class="fas fa-angle-down" style="color: rgb(255, 255, 255); position: relative; left: 15%;"></i>
            <div class="dropdown-content">
            <a onclick="buttonClick(event, 'Assign')"><i class="far fa-user-plus"></i>&nbsp;&nbsp;Assign to</a>
            <a onclick="buttonClick(event, 'ActionsOpen')"><i class="far fa-edit"></i>&nbsp;&nbsp;Edit</a>
            <a onclick="buttonClick(event, 'ActionsView')"><i class="far fa-eye"></i>&nbsp;&nbsp;View</a>
            <a onclick="buttonClick(event, 'ActionsSoftDelete')"><i class="far fa-trash"></i>&nbsp;&nbsp;Delete</a>
            </div>
    </div>
    </span>
</td>

So its a part of a viewgrid where a table cell carries a dropdown, hover works fine but I want to be able to click and then the menu should open. Can anyone help me with CSS code depending upon the above classes and Id's used it will highly helpful and greatly appreciated. Thanks.

15 Replies

Mannix•2y ago

if you don't want to use js you could do the checkbox trick https://codepen.io/MannixMD/pen/mdGRmVV

Mannix

CodePen

mdGRmVV

...

AllaN•2y ago

Sorry for late response and Thank you very much I will try to replicate this idea. I cannot get this to work may be I am doing something wrong so we are using a LC/NC platform(Unqork) to build an application This is the structure of my current code

('<div class="dropdown">',
 '<a style="color: #ffffff; position: relative; left: 10%;">Actions</a>',
 '<i class="fas fa-angle-down" style="color: #ffffff; position: relative; left: 15%;"></i>',
 '<div class="dropdown-content">',
 '<a onclick="buttonClick(event, ', "'", 'ActionsOpen', _id , "'", ')"><i class="far fa-edit"></i>&nbsp;&nbsp;Edit</a>',
 '<a onclick="buttonClick(event, ', "'", 'ActionsReadOnly', _id , "'", ')"><i class="far fa-tag"></i>&nbsp;&nbsp;View Key Fields Info</a>',
 '<a onclick="buttonClick(event, ', "'", 'ActionsView', spItemId, "'", ')"><i class="far fa-eye"></i>&nbsp;&nbsp;View</a>',
 '<a onclick="buttonClick(event, ', "'", 'ActionsCancel', _id, "'", ')"><i class="fal fa-file-times"></i>&nbsp;&nbsp;Cancel</a>',
 '<a onclick="buttonClick(event, ', "'", 'ActionsExpire', _id, "'", ')"><i class="fal fa-stopwatch"></i>&nbsp;&nbsp;Expire</a>',
 '</div>',
 '</div>'),

('<div class="dropdown">',
 '<a style="color: #ffffff; position: relative; left: 10%;">Actions</a>',
 '<i class="fas fa-angle-down" style="color: #ffffff; position: relative; left: 15%;"></i>',
 '<div class="dropdown-content">',
 '<a onclick="buttonClick(event, ', "'", 'ActionsOpen', _id , "'", ')"><i class="far fa-edit"></i>&nbsp;&nbsp;Edit</a>',
 '<a onclick="buttonClick(event, ', "'", 'ActionsReadOnly', _id , "'", ')"><i class="far fa-tag"></i>&nbsp;&nbsp;View Key Fields Info</a>',
 '<a onclick="buttonClick(event, ', "'", 'ActionsView', spItemId, "'", ')"><i class="far fa-eye"></i>&nbsp;&nbsp;View</a>',
 '<a onclick="buttonClick(event, ', "'", 'ActionsCancel', _id, "'", ')"><i class="fal fa-file-times"></i>&nbsp;&nbsp;Cancel</a>',
 '<a onclick="buttonClick(event, ', "'", 'ActionsExpire', _id, "'", ')"><i class="fal fa-stopwatch"></i>&nbsp;&nbsp;Expire</a>',
 '</div>',
 '</div>'),

These are styles applied to the classes

.dropdown {
        position: relative;
        display: inline-block;
        background-color: #00a8c8;
        border-radius: 5px;
        width: 65px;
        height: 26px;
        cursor:pointer;
        padding: 4px 0 0 0;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        right: 0;
        background-color: #ffffff;
        min-width: 160px;
        border-radius: 5px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
        z-index: 999;
    }

**The Part that I want to replace from hover to click**
 .dropdown:hover .dropdown-content { 
        display: block;
    }

.dropdown {
        position: relative;
        display: inline-block;
        background-color: #00a8c8;
        border-radius: 5px;
        width: 65px;
        height: 26px;
        cursor:pointer;
        padding: 4px 0 0 0;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        right: 0;
        background-color: #ffffff;
        min-width: 160px;
        border-radius: 5px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
        z-index: 999;
    }

**The Part that I want to replace from hover to click**
 .dropdown:hover .dropdown-content { 
        display: block;
    }

I tried multiple times to get the checkbox trick to replace hover using CSS but failed every time. I tried vanilla JS onclick too but i think the code doesnt accept that.

AllaN•2y ago

AllaN•2y ago

currently its on hover I want this to be click based

Myndi•2y ago

You have two approaches: 1. You use JS 2. You use the label/input trick, where the input "acts" as a fake JS, so the system can recognize you have clicked on it, because there's currently not a "on click" state for CSS (the closest could be :active, but this refers to "being clicked" - not just one tap/click).

AllaN•2y ago

Thank you for the response do we have a code pen for this based on the code structure that we have parent being dropdown div where on hovering the menu opens carrying dropdown-content class. I tried :active earlier but its a click based as long as mouse key pressed the menu stays open once unlicked the menu disappears. PS: This is not my code we have just taken over on this project from another team. Any help will be highly appreciated

Myndi•2y ago

I highly encourage you for the input + label alternative. It uses 0 JS, and it's simple to implement.

Myndi•2y ago

https://www.youtube.com/watch?v=OhCzEjXvY9A

Web Dev Simplified

YouTube

How To Limit Lines Of Text With CSS Only

Doing vertical text overflow in CSS is incredibly difficult and many people think it is impossible, but that is not true. In this video I will show you 2 different ways to limit the number of lines of text in a box. I will also show you how to expand/collapse those lines of text using only CSS with no JavaScript. 📚 Materials/References: Kevin...

Myndi•2y ago

This shows the technique quite well.

AllaN•2y ago

Bro I am really looking forward to you the thing is its not about the table so forget tr's and td's I have posted how the code is right now probably consider this only

<div class="dropdown">
        <a style="color: rgb(255, 255, 255); position: relative; left: 10%;">Actions</a>
        <i class="fas fa-angle-down" style="color: rgb(255, 255, 255); position: relative; left: 15%;"></i>
            <div class="dropdown-content">
            <a onclick="buttonClick(event, 'Assign')"><i class="far fa-user-plus"></i>&nbsp;&nbsp;Assign to</a>
            <a onclick="buttonClick(event, 'ActionsOpen')"><i class="far fa-edit"></i>&nbsp;&nbsp;Edit</a>
            <a onclick="buttonClick(event, 'ActionsView')"><i class="far fa-eye"></i>&nbsp;&nbsp;View</a>
            <a onclick="buttonClick(event, 'ActionsSoftDelete')"><i class="far fa-trash"></i>&nbsp;&nbsp;Delete</a>
            </div>
    </div>

<div class="dropdown">
        <a style="color: rgb(255, 255, 255); position: relative; left: 10%;">Actions</a>
        <i class="fas fa-angle-down" style="color: rgb(255, 255, 255); position: relative; left: 15%;"></i>
            <div class="dropdown-content">
            <a onclick="buttonClick(event, 'Assign')"><i class="far fa-user-plus"></i>&nbsp;&nbsp;Assign to</a>
            <a onclick="buttonClick(event, 'ActionsOpen')"><i class="far fa-edit"></i>&nbsp;&nbsp;Edit</a>
            <a onclick="buttonClick(event, 'ActionsView')"><i class="far fa-eye"></i>&nbsp;&nbsp;View</a>
            <a onclick="buttonClick(event, 'ActionsSoftDelete')"><i class="far fa-trash"></i>&nbsp;&nbsp;Delete</a>
            </div>
    </div>

the code is here

Jochem•2y ago

I don't think anyone here is going to have any experience with a particular low code no code solution tbh. Myndi suggested the label / checkbox trick, that's probably your best bet. I can't easily help fix something if I can't see the code running somewhere I can manipulate it, and that's going to be hard using a lc/NC thing. If you can get it to work in a codepen that might help

WebMechanic•2y ago

@allan_1002 I believe the <details> <summary> combo does exactly what you're after and it's also keyboard accessible. It needs some extra styling (list-type) but you can eventually change the layout of both items however you want and make them look like proper dropdown menus.

Jochem•2y ago

You shouldn't use detail and summary for menus, it's an accessibility nightmare

WebMechanic•2y ago

@jochemm you have a source that explains the issues? I'd be interested to learn why and what exactly's causing harm. AT users I spoke to say "it's ok" and while "unusual" easier to use (presuming proper semantic markup inside) but definitely not worse than most (JS driven) menus they run into in the wild. Thanks.

Jochem•2y ago

not at hand right now, I'll try to look for where I read that in a bit

Gaming

Programming

Dropdown menu on click using only CSS without any JS or other scripts.