Skip to main content
Hello

I am relatively new to css hence struggling to find a solution.

My requirement is to have a dropdown which can hide and show (toggle) similar to quick access menu of salesforce.

I have written a css for dropwdown but I am unable to toggle it.

Request the members to please help me out.

 

<apex:page >

<style>

.dropbtn {

background-color: ⌗4CAF51;

color: blue;

padding: 16px;

font-size: 10px;

border: none;

cursor: pointer;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

right: 0;

background-color: ⌗f9f9f0;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown-content a:hover {background-color: ⌗f1f1f1}

.dropdown:hover .dropdown-content

{

display: block;

}

.dropdown:hover .dropbtn

{

background-color: ⌗3e8e41;

}

</style>

<div class="dropdown" style="float:right;">

<button class="dropbtn">Quick Access Menu</button>

<div class="dropdown-content">

<a href="⌗">Link 1</a>

<a href="⌗">Link 2</a>

<a href="⌗">Link 3</a>

</div>

</div>

</apex:page>

Thanks

Pooja B
9 件の回答
  1. 2016年11月8日 4:06
    Hi Naveen

    The site given by u was gr8.

    The only thing I am looking for is when user clicks on dropdown it will show the items, again when he clicks on dropdown it will hide.

    so any link or articles regd this?

    Thanks

    Pooja B

     
0/9000