AllaN Posts - Answer Overflow

AllaN

•Created by AllaN on 10/10/2024 in #front-end

Is it possible to have click based menu dropdown in bootstrap via CSS?

I am looking for a solution where we have default bootstrap based dropdown that open upon hovering, can we have it opened based on click via CSS and not JS?

22 replies

KPCKevin Powell - Community

•Created by AllaN on 9/25/2024 in #front-end

How do I manipulate tr > td background with only selective rows.

80 replies

KPCKevin Powell - Community

•Created by AllaN on 2/28/2023 in #front-end

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.

20 replies

Gaming

Programming