You need to sign in to do that
Don't have an account?
Doondi
drop down direction, up or down based on the space available?
Hi, below is my CSS code (pure) for drop down menu:
.onclick-menu
{
position: relative;
display: inline-block;
}
.onclick-menu:before
{
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f0d7";
padding: 5px;
border: 1px solid rgb(221, 219, 218);
background-color: rgb(255, 255, 255);
color: rgb(112, 110, 107);
border-radius: .25rem;
}
.onclick-menu-content li a
{
text-decoration: none;
display: block;
padding: .5rem .75rem;
color: rgba(27, 82, 151, 1.0);
}
.onclick-menu-content li a:hover
{
background-color: rgb(236, 235, 234);
text-decoration: none;
color: rgba(27, 82, 151, 1.0);
}
.onclick-menu:focus
{
pointer-events: none;
outline: none;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.onclick-menu-content
{
position: absolute;
z-index: 1;
background: rgb(255, 255, 255);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
border: 1px solid rgb(221, 219, 218);
border-radius: .25rem;
left: -40px;
/* use opacity to fake immediate toggle */
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
By default it's direction is down.....
Can we make it auto (up or down) based on space available?
.onclick-menu
{
position: relative;
display: inline-block;
}
.onclick-menu:before
{
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f0d7";
padding: 5px;
border: 1px solid rgb(221, 219, 218);
background-color: rgb(255, 255, 255);
color: rgb(112, 110, 107);
border-radius: .25rem;
}
.onclick-menu-content li a
{
text-decoration: none;
display: block;
padding: .5rem .75rem;
color: rgba(27, 82, 151, 1.0);
}
.onclick-menu-content li a:hover
{
background-color: rgb(236, 235, 234);
text-decoration: none;
color: rgba(27, 82, 151, 1.0);
}
.onclick-menu:focus
{
pointer-events: none;
outline: none;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.onclick-menu-content
{
position: absolute;
z-index: 1;
background: rgb(255, 255, 255);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
border: 1px solid rgb(221, 219, 218);
border-radius: .25rem;
left: -40px;
/* use opacity to fake immediate toggle */
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
By default it's direction is down.....
Can we make it auto (up or down) based on space available?