Saturday 1 October 2016
CSS CLICK DROPDOWN
--------------------------------------------------------------------------------------------------------------
CODE 1:
http://koen.kivits.com/articles/pure-css-menu/
--------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<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>
<div tabindex="0" class="onclick-menu">
<ul class="onclick-menu-content">
<li><button onclick="alert('click 1')">Look, mom</button></li>
<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>
<html lang="en">
<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>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
<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:
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>
--------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment