I really do not want to lose the hover capability, I need a way without losing the hover capability.
In pure CSS (no JavaScript), how do I get the dropdown menu to close on clicks outside of the dropdown menu, without losing the hover capability?
Here is an example of someone who did a JavaScript dropdown menu with the feature of closing on outside clicks.
https://koen.kivits.com/articles/pure-css-menu/
Here is my dropdown menu CSS with hover and onClick:
.acn-menu {
text-align: center;
background-color: rgba(0, 0, 0, 0.9);
}
.label_openclose {
display: none;
}
.menu-tabs {
height: 100%;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
/* This CSS makes the Solutions dropdown menu push
down the other two items when in mobile view. */
#media (min-width: 320px) {
.menu-tabs {
position: absolute;
}
}
.menu-tabs .elem {
box-sizing: border-box;
padding: 0 20px;
float: left;
height: 100%;
line-height: 70px;
background-color: rgb(30, 30, 30);
color: white;
}
.menu-check {
display: none;
}
label {
margin-bottom: 0;
}
.label_openclose {
display: inline-block;
width: 60px;
min-height: 50px;
background-color: transparent;
cursor: pointer;
overflow:hidden;
display:block;
}
.menu-tabs .elem {
line-height: initial;
float: initial;
height: 0px;
cursor: pointer;
border-top: 0px solid #000;
overflow: hidden;
}
.menu-check:checked~.menu-tabs .elem {
height: 25px;
color: white;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}
.label_openclose:hover~.menu-tabs .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
.label_openclose~.menu-tabs:hover .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
Is it possible for me to get the close-on-click without using JS? Here is a fiddle: https://jsfiddle.net/Ld5L2tnf/
I reviewed your code and posted an example of what you want. This is a more simple way of achieving your goal. This is an example you will have to apply it to your code. This is a pure css and html solution using checkboxes and labels. Below is detailed information on how it works. Hope it helps. Enjoy.
<html>
<head>
<title></title>
<style>
.buttoncomtainer1{ /*A wrapper for your hover dropdown List*/
width:100px;
height:2em;
float:left;
position:absolute;
z-index:20;
}
.mycheckButton{ /*Your Label acts as a Button Triggering the checkbox*/
width:100px;
height:2em;
float:left;
display:block;
background-color:blue;
text-align:center;
color:#ffffff;
position:fixed;
z-index:20;
}
.mycheckDrop{ /*Your Dropdown*/
width:100px;
float:left;
display:none;
padding:1%;
background-color:green;
position:fixed;
z-index:20;
margin-top:2em;
}
.gone{ /*Make your checkbox disappear*/
border:0px;
outline:none;
line-height:0;
display:none;
margin:0px;
padding:0px;
width:0px;
height:0px;
}
.blackout{ /*This Div covers the page with the labelBlackout Label in it. nothing can be clicked unless The Label inside clicked first triggering the checkbox. */
width:100%;
height:100%;
float:left;
position:fixed;
z-index:15;
background-color:transparent; /* You can add a background color like this. background-color:black; opacity:0.7;*/
display:none;
}
.labelBlackout{ /*the Label inside the blackout div that covers the page*/
width:100%;
height:100%;
float:left;
}
.lnkCon{ /* Container that holds your dropdown links.*/
width:100%;
height:2em;
float:left;
margin-top:5px;
}
input[type=checkbox].gone:checked ~ div.blackout{display:block;}
input[type=checkbox].gone:checked ~ label.mycheckDrop{display:block;}
.buttoncomtainer1:hover > .mycheckDrop{display:block;}
</style>
</head>
<body>
<div class="buttoncomtainer1">
<input class="gone" id="myCheck" type="checkbox" >
<div class="blackout" ><label class="labelBlackout" for="myCheck"></label></div>
<label class="mycheckButton" for="myCheck">DropDown</label>
<label class="mycheckDrop" for="myCheck">
<span class="lnkCon">Button 1</span>
<span class="lnkCon">Button 2</span>
<span class="lnkCon">button 3</span>
</label></div>
</body>
</html>
Related
Firstly just want to acknowledge that my title is confusing, so sorry about that. What I'm trying to achieve is the following effect on hover:
My site is here https://wordpress-493302-3130963.cloudwaysapps.com/
I have managed to do half of what I want to achieve using css transform, but cant see to create a shadow copy of the button like in the image above. My css is as follows
.cta-button-menu:hover {
transform:rotateZ(45deg) !important;
background: #21B6CD !important;
color: white !important;
transition: 1s;
}
If this can be achieved using JS or something else that could also work but CSS would be the preference.
Didn't include html as its generated from a mega menu plugin but can do if required.
You can use ::before to apply this effect.
.wrapper{
height:300px;
background-color:gray;
}
.btn, .btn::before{
font-size:2rem;
color:white;
width:200px;
height:70px;
border:2px solid white;
transition:all 0.3s linear;
display:flex;
justify-content:center;
align-items:center;
}
.btn{
position:relative;
top:30%;
left:30%;
background-color:transparent;
}
.btn:hover {
background-color:#21b6cd;
transform: rotateZ(45deg);
border:none;
}
.btn::before {
content:"Book Now";
background-color:transparent;
position:absolute;
}
.btn:hover::before{
transform: rotateZ(-90deg);
background-color:#e72f54;
border:none;
}
<div class="wrapper">
<button class="btn">Book Now</button>
</div>
I'd recommend making 2 buttons/a tags:
body {
padding: 4em;
background-color: black;
}
.button {
position: relative;
}
.firstButton,
.secondButton {
position: absolute;
display: inline-block;
padding: 1em;
text-align: center;
color: white;
text-decoration: none;
border: 1px solid white;
}
.firstButton {
visibility: hidden;
}
.button:hover .firstButton {
transform: rotateZ(45deg);
background: #E83054;
visibility: visible;
}
.button:hover .secondButton {
transform: rotateZ(-45deg);
background: #21B6CD;
}
<div class="button">
<a class="firstButton" href="">Book Now</a>
<a class="secondButton" href="">Book Now</a>
</div>
#c_w {background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;}
#c_w:hover {display:block;}
.color_td {height:27px;
width:27px;
margin:2px;
border-radius:5px;}
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
<div id="c_w">White</div>
i wanna make #c_w box showing when i hover .color_td box.
why is it not work???
any help will be so appreciated.
Thank you
If you remove the a tag as .color_td's parent, then you access #c_w like this-
.color_td:hover + #c_w {
display:block
}
#c_w {
background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;
}
.color_td {
height:27px;
width:27px;
margin:2px;
border-radius:5px;
}
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
<div id="c_w">White</div>
Or if you want to keep the a tag as .color_td's parent, then you could achieve the desired effect with Javascript-
let color_td = document.querySelector('.color_td');
let c_w = document.querySelector('#c_w');
// listen for 'mouseenter' event
color_td.addEventListener('mouseenter',()=> {
c_w.style.display = "block"
});
// listern for 'mouseleave' event
color_td.addEventListener('mouseleave', ()=> {
c_w.style.display = "none"
});
#c_w {background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;}
.color_td {height:27px;
width:27px;
margin:2px;
border-radius:5px;}
<a href="#">
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
</a>
<div id="c_w">White</div>
your doing wrong here,
#c_w {background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;} /* <- */
#c_w:hover {display:block;} /* <- */
As, You cant hover on a hidden element
instead you wanna do something like this,
1. keeping ur html un-touched
#c_w {
background-color: rgba(0, 0, 0, 0.5);
width: 55px;
height: 25px;
color: white;
text-align: center;
padding-top: 3px;
position: absolute;
margin-top: 38px;
margin-left: -12px;
display: none;
}
a:hover + #c_w { /* ModifiedCss */
display: block;
}
.color_td {
height: 27px;
width: 27px;
margin: 2px;
border-radius: 5px;
}
<a href="#">
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
</a>
<div id="c_w">White</div>
2. move the #c_w under .color_td
#c_w {
background-color: rgba(0, 0, 0, 0.5);
width: 55px;
height: 25px;
color: white;
text-align: center;
padding-top: 3px;
position: absolute;
margin-top: 38px;
margin-left: -12px;
display: none;
}
.color_td:hover #c_w { /* ModifiedCss */
display: block;
}
.color_td {
height: 27px;
width: 27px;
margin: 2px;
border-radius: 5px;
}
<a href="#">
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2">
<div id="c_w">White</div> <!-- ModifiedHtml -->
</div>
</a>
Here, i thing is, you gotta, wrap the hidden element in something that visible (hoverable), and edit style properties of that targted hidden element by making it child or sibling or soemthing like that...
so i have this html code for radio buttons which works perfect on chrome but the css for radio buttons on firefox isnt working. What could be the problem?that is the code i have,is there anything im missing?
input[type='radio'] {
border-radius:50%;
outline:none;
}
input[type='radio']:before {
content:'';
display:block;
width:50%;
height:50%;
margin: 25% auto;
border-radius:50%;
}
input[type='radio']:checked:before {
background-color: #0496fd;
}
.bob-bound
{
padding-bottom:0.2px;
padding-right:10px;
margin:auto;
border: solid 0px blue;
height: 110px;
position:relative;
background-color: #f5f5f5;
}
.bob-bound-type-lable{
position: absolute;
margin-top:20px;
margin-left:30px;
border: solid 0px red;
width: 239px;
height: 18px;
font-family: HelveticaNeue-Light, Arial;
font-size: 16px;
color: #000000;
}
.bob-button {
width: 250px;
height: 46px;
vertical-align:right;
background-color: #ffffff ;
border: solid 1px #bfbfbf;
padding-left:5px;
font-family: ArialMT, Arial, sans-serif;
font-size: 15px;
margin-left:12px;
cursor:pointer;
}
.bob-button:hover {
background-color: #f3f8fd;
}
.bob-recommendation-button
{
position:absolute;
right:0px;
width: 292px;
top:49px;
border: solid 0px red;
}
.bob-Inbound{
position:absolute;
top:6px;
margin-left:8px;
width: 112px;
height: 17px;
font-family: ArialMT, Arial, sans-serif;
font-weight:bold;
font-size: 16px;
border: solid 0px red;
}
.bob-Outbound {
position:absolute;
top:6px;
margin-left:12px;
width: 239px;
height: 17px;
font-family: ArialMT, Arial, sans-serif;
font-weight:bold;
font-size: 16px;
border: solid 0px red;
margin-bottom:20px;
}
.bob-bound-type{
position: absolute;
width:437px;
margin-top:56px;
font-size: 14px;
margin-left:27px;
border: solid 0px red;
}
.bob-radio{
background:green;
width: 24px;
height: 24px;
background-color: #ffffff;
border: solid 1px #bbbbbb;
}
.bob-second-radio{
margin-left:120px;
}
<div class="bob-bound">
<div class="bob-bound-type-lable">
Contact Type
</div>
<div class="bob-bound-type">
<input type="radio" name="radiogroup" id="Inbound" class="bob-radio" value="Inbound" checked="checked"/>
<label for="Inbound" class="bob-Inbound">Inbound</label>
<input type="radio" name="radiogroup" id="Outbound" class="bob-radio bob-second-radio" value="Outbound"/>
<label for="Outbound" class="bob-Outbound">Outbound</label>
</div>
</div>
this is the way its supposed to display:
The general consensus is that styling radio buttons in Firefox with CSS is a fool's errand. But there are several workarounds that achieve the same effect. My personal favorite is to hide the actual radio button and instead use images to show if it is checked or unchecked.
There's a nice working example here:
Mozilla Firefox input radio button styling and default settings
Styling input elements (in particular radio buttons and checkboxes) can be unreliable across navigators. You're better off applying the styling to the label or a pseudo element.
this is a very basic task concerning css. I'm trying to place a search bar to the very right corner of the screen but, When ever I add/reduce padding to the div, the search bar remains in the same place but the screen size increases horizontally. Here is the code to better understand:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title>cats</title>
</head>
<body>
<form class="form_style">
<input type="text" class="search" placeholder="Search me..." required>
<input type="button" class="button" value="Search">
</form>
<div id="top_menu">
<ul>
<li>Suomeksi</li>
<li>Log in</li>
<li>Sign in</li>
</ul>
</div>
<style type="text/css" media="screen">
#top_menu {
height: 35px;
font-size: 18px;
text-align: center;
border-radius: 8px;
}
#top_menu li {
display: inline;
padding: 20px;
}
#top_menu a {
text-decoration: none;
color: #00F;
padding: 1px 1px 1px ;
}
.form_style {
width:500px;
margin:50px ;
position: absolute;
left: 80%;
top:-40px;
}
.search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
}
.button {
position:relative;
padding:6px 15px;
left:-5px;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
}
.button:hover {
background-color:#fafafa;
color:#207cca;
}
</style>
</body>
</html>
and here is the screen capture
try it
.form_style
{
position: absolute;
right: 0;
}
it should work
You can simply do this:
.form_style {
width:500px;
margin:50px ;
float:right;
top:-40px;
}
Try this......
.form_style {
position: relative;
margin-top:-18px;
float:right;
right:-18px;
top:0px;
}
Your CSS for the right-aligned element should contain right:0
Maybe you also need to remove the width and margin definitions
.form_style {
/* width: 500px;*/
/* margin: 50px; */
position: absolute;
right: 0;
}
First at all you need to remove the margin value for the form style, then position to the right not with the left value and align the content:
.form_style {
width:500px;
margin:50px ; //Make this 0;
position: absolute;
right:0; //Add Right and remove left
top:0; //Make this 0;
text-align:right; //Align the elements inside form to the right
}
Check this Demo Fiddle
I am trying to align a form text input and button horizontally on the same line while giving the button a minimum width for a responsive layout. For some reason the minimum width forces the button on to a new line
.search-container{
width:100%;
border: 1px solid #000;
display:block;
}
.search-text-container {
width:90%;
display:inline-block;
}
.search-text-container input {
width:100%;
height:30px;
}
.round-icon-container {
width:10%;
display:inline-block;
}
.round-icon-button {
min-width:30px;
display:block;
width:30px;
height:30px;
line-height:normal;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-weight:bold;
}
.round-icon-button:hover {
background: #262626;
}
<div class="search-container">
<span class="search-text-container">
<form action="">
<input type="text" name="fname" />
</form>
</span>
<span class="round-icon-container">
<button type="submit" class="round-icon-button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
I have a fiddle here of what I am working on http://jsfiddle.net/dnssmw83/19/ any help would be much appreciated
You could achieve it by using CSS #media queries like this:
JSFiddle - DEMO
* {
box-sizing:border-box;
}
#media(max-width:320px) {
.search-text-container {
width:70% !important;
}
.round-icon-container {
width:30% !important;
}
}
.search-container {
width:100%;
border: 1px solid #000;
display:block;
font-size: 0; /* to remove the space between inline-block elements */
}
.search-container > span {
font-size: 16px; /* add the font-size to child span elements */
vertical-align: middle;
}