CSS CLICK DROPDOWN

Saturday, 1 October 2016

CSS CLICK DROPDOWN

--------------------------------------------------------------------------------------------------------------
CODE 1:
http://koen.kivits.com/articles/pure-css-menu/
--------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<head>

<title>A pure CSS onclick menu - Hi, I'm Koen Kivits

</title>

<style>

.onclick-menu {

position: relative;

display: inline-block;

}

.onclick-menu:before {

content: "Click me!";

}

.onclick-menu:focus {

pointer-events: none;

}

.onclick-menu:focus .onclick-menu-content {

opacity: 1;

visibility: visible;

}

.onclick-menu-content {

pointer-events: auto;

position: absolute;

z-index: 1;

opacity: 0;

visibility: hidden;

transition: visibility 0.5s;

-moz-transition: visibility 0.5s;

-webkit-transition: visibility 0.5s;

-o-transition: visibility 0.5s;

}

.onclick-menu.no-pointer-events {

pointer-events: auto !important;

}

.onclick-menu.no-visibility .onclick-menu-content {

visibility: visible !important;

display: none;

}

.onclick-menu.no-visibility:focus .onclick-menu-content {

display: block;

}

.onclick-menu.no-opacity .onclick-menu-content {

opacity: 1 !important;

}

.onclick-menu {

padding: 0;

margin: 0 0 1em 0;

outline: 0;

}

.onclick-menu:before {

padding: 5px 10px;

background-color: #94a4a5;

}

.onclick-menu-content {

background-color: #364656;

width: auto;

margin-top: 19px;

margin-left: 0;

padding: 10px;

}

.onclick-menu-content:before {

content: "";

width: 0;

height: 0;

border-bottom: 10px solid #364656;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

position: absolute;

top: -10px;

}

.onclick-menu-content li {

color: #f2f5e9;

list-style-type: none;

white-space: nowrap;

}

.onclick-menu-content button {

background: transparent;

border: none;

color: inherit;

cursor: inherit;

outline: 0;

cursor: pointer;

}

.onclick-menu-content button:hover {

color: #ff8c31;

}

</style>

<body>

<li><button onclick="alert('click 2')">no JavaScript!</button></li>

<li><button onclick="alert('click 3')">Pretty nice, right?</button></li>

</ul>

</div>

</body>

</html>

--------------------------------------------------------------------------------------------------------------
CODE 2:
http://www.outofscope.com/css-only-menu-toggle-no-javascript-required/
http://codepen.io/anon/pen/jfAoa
--------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<head>

<title>A pure CSS onclick menu - Hi, I'm Koen Kivits

</title>

<style>

label {

cursor: pointer;

}

#menu-toggle {

display: none;

}

#menu {

display: none;

}

#menu-toggle:checked + #menu {

display: block;

}

</style>

<body>

<label for="menu-toggle">Click me to toggle menu</label>

<li><a href="#">First link</a></li>

<li><a href="#">Second link</a></li>

<li><a href="#">Third link</a></li>

</ul>

</body>

</html>

--------------------------------------------------------------------------------------------------------------
CODE 2:

https://tympanus.net/Tutorials/CustomDropDownListStyling/index.html

--------------------------------------------------------------------------------------------------------------

<!-- https://tympanus.net/Tutorials/CustomDropDownListStyling/index.html -->
<style>
.selectWrapper{
border-radius:36px;
display:inline-block;
overflow:hidden;
background:#cccccc;
border:1px solid #cccccc;
}
.selectBox{
width:140px;
height:40px;
border:0px;
outline:none;
width: 150px;
height: 50px;
border-radius: 50%;
background:url(https://www.w3schools.com/tags/smiley.gif) center right no-repeat;
font-weight:bold;
font-size:25px;
text-align: right;
}
option{
background-color:Green;
color:Red;
}
</style>
<div class="selectWrapper">
<select class="selectBox">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>