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>
--------------------------------------------------------------------------------------------------------------
Related movie you might like to see :

GENERIC BLOGGER TEMPLATE PARTS

INLINE HTML PAGE LAYOUT

PRESTASHOP THUMBNAIL WITH HOVER EFF...

CHANGE MENU CSS COLOR IN PRESTASHOP

RENAME CONTROLLERS FOLDER IN PRESTA...

BUTTON CHANGE INTO DROPDOWN MENU

BUTTON PADDING CHANGE HEIGHT WIDTH

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

WEB IMAGE DOWNLOADER

TEXT COMPARE OR DUPLI TEXT FINDER

BLOCK JAVA SCRIPT BY GOOGLE CHROME

MOUSE COORDINATES IN JAVA SCRIPT

RELATED POST WIDGET LIST WITHOUT TH...

WHACK A RAT CSS GAME

USE ARABIC URDU LANGUAGE IN HTML

POST DATE THUMBNAIL IN BLOG

POST DATE HEADER IN BLOG

SEARCH YOUR VIDEO IN GOOGLE

INPUT BUTTON VALUE SWAP

DYNAMIC VIEWS BLOGGER TEMPLATE
?
+
X
Recommended for you
Loading..
Related Post for CSS CLICK DROPDOWN
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://…
SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More: 3:30 PDF HTML IMAGE CONVERTER HD…
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
BUTTON CHANGE INTO DROPDOWN MENU ----------------------------------------------------------------------------------------------------------------- DIV TAG DROPDOWN MENU https://www.youtube.com/watc…
WEB IMAGE DOWNLOADER ----------------------------------------------------------------------------------------------------------------- IMAGE DOWNLOAD EXTENSIONS READ MORE: https://chrome.google.c…
ARROW BUTTON ------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ---------------------------------------------…
IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
MOUSE COORDINATES IN JAVA SCRIPT -------------------------------------------------------------------------------------------------------------- mouse coordinates finder on website https://chrome.google.com/web…
BLOCK JAVA SCRIPT BY GOOGLE CHROME -------------------------------------------------------------------------------------------------------------------------------------- java file block in google chrome h…
NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
BUTTON PADDING CHANGE HEIGHT WIDTH ------------------------------------------------------------------------------------------------------------ PADDING BUTTON CHANGE INTO WIDTH AND HEIGHTEMOJI SITEShttps://yayte…
DRAG AND DROP WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogsp…
CSS CLICK DROPDOWN -------------------------------------------------------------------------------------------------------------- CODE 1: http://koen.kivits.com/articles/pure-css-menu/ ---------…
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
TEXT COMPARE OR DUPLI TEXT FINDER ------------------------------------------------------------------------------------------------------------------ READ MORE: FIND RED TEXT IN GOOGLE: text compare downl…
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN W…
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.