We Keep Coding

Select Dropdown Material Design only CSS/JS

I have been working to create some input fields with Material Design Looking.
Sadly, I could not use the usual frameworks available on the internet (e.g. Materialize), so I need to develop it my own, I have almost everything created. Although, the select field dropdown with no results, I could not make it.
The goal is to look like the Simple Select with arrow of this git here
For now what I did is this on codepen
Do you know any source or example rather than the getmdl-select only with CSS(scss) and JS
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
$md-color-blue:#1074ac;
$md-color-black: rgba(0, 0, 0, 0.54);
/* ---- text field ----- */
.md-group{
position:relative;
margin: 35px 0;
// margin-bottom:45px;
.md-input__text{
background: transparent;
font-size:14px;
padding:5px 5px 2px 5px;
// display:block;
width:50%;
border:none;
border-bottom:1px solid #757575;
vertical-align: bottom;
}
.md-input__text:focus {
outline:none;
}
option:active,
option:hover, option:focus, {
background: rgba(0,0,0,.04);
}
}
/* LABEL */
.md-input__label {
color:rgba(0,0,0,.54);
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:-20px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
.md-input__text:focus ~ label, .md-input__text:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS */
.md-input__bar {
position:relative;
display:block;
width:50%;
background-color: rgba(0,0,0,.42);
}
.md-input__bar:before, .md-input__bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:$md-color-blue;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.md-input__bar:before {
left:50%;
}
.md-input__bar:after {
right:50%;
}
/* active state */
.md-input__text:focus ~ .md-input__bar:before, .md-input__text:focus ~ .md-input__bar:after {
width:50%;
}
/* HIGHLIGHTER */
.md-input__highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
.md-input__text:focus ~ .md-input__highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS */
#-webkit-keyframes inputHighlighter {
from { background:$md-color-blue; }
to { width:0; background:transparent; }
}
#-moz-keyframes inputHighlighter {
from { background:$md-color-blue; }
to { width:0; background:transparent; }
}
#keyframes inputHighlighter {
from { background:$md-color-blue; }
to { width:0; background:transparent; }
}
.md-btn__right{
position: absolute;
top: 1px;
right: 1px;
}
.md-autocomplete-clear{
display: none;
}
.md-input__text:focus ~ .md-autocomplete-clear {
display: block;
}
<div class="md-group">
<select class="md-input__text" required>
<option>Yes</option>
<option>No</option>
</select>
<span class="md-input__highlight"></span>
<span class="md-input__bar"></span>
<label class="md-input__label">Select</label>
</div>

how to do a 50% hover overlay effect for a circular image

I have a functionality in my website that when the user hovers on his/her display picture an overlay will appear.
But sadly I want the overlay not to cover up the entire photo. I want it to be just half of the circle.
I have tried researching for solutions but I can't seem to find any solution to this.
Here is an image of how I want it to look like.
thanks in advance.
And i would really appreciate it if you would guide me on how to achieve this effect.

The trick is, to add overflow:hidden to the container (circle) and make the overlay half the height of the circle. Here is an example code:
#circle{
width:200px;
height:200px;
border-radius:50%;
background-color:#0098dd;
position:relative;
overflow:hidden;
}
#overlay{
display:none;
position:absolute;
bottom:0;
text-align:center;
width:200px;
height:100px; /* Half of the container */
line-height:100px;
background-color:rgba(255,255,255,0.5);
}
#circle:hover #overlay{
display:block;
}
<div id="circle">
<div id="overlay">
Test
</div>
</div>

parent div will have position:relative; and overflow:hidden;. the overlay will have position:absolute; with top:50%; (to cover only the bottom half of the parent).
To make it appear :
First Method : You can set .overlay to display:none; and .con:hover .overlay to display:block;
Second Method: You can set .overlay to top:100%; transition:top 0.5s; and .con:hover .overlay to top:50%;. The transition is added to make the change slow.
Check out the snippet below which uses second method. Also I used font-awesome for the icons.
.con{
width:150px;
height:150px;
border-radius:75px;
background-image:url("http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg");
background-size:cover;
overflow:hidden;
position:relative;
}
.overlay{
position:absolute;
top:100%;
left:0;
padding-top:10px;
text-align:center;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.5);
transition:top 0.5s;
}
.con:hover .overlay{
top:50%;
}
.overlay a{
margin:5px;
font-size:1.6em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="con">
<div class="overlay">
<a><i class="fa fa-briefcase"></i></a>
<a><i class="fa fa-list"></i></a>
</div>
</div>

You have to use overflow: hidden; Please check this jsfiddle
https://jsfiddle.net/3jdb1m7e/
i hope you like with transition.
<div class="img-box">
<img src="http://placehold.it/350x350" class="image">
<div class="img-content">
<img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/96-128.png" width="36px" height="36px" />
<img src="https://cdn0.iconfinder.com/data/icons/internet-and-web-flat-icons-free/512/Menu_icon-128.png" width="36px" height="36px"/>
</div>
</div>
.img-box {
position: relative;
text-align: center;
display: block;
border-radius: 105px;
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid #333;
}
.img-box .image{
border-radius: 50%;
width: 100%;
}
.img-content {
padding: 40px;
background: #fff;
position: absolute;
bottom: -120px;
width: 100%;
box-sizing: border-box;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}
.img-box:hover .img-content{
bottom: 0px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}

responsive navigation getting jumpy with display flex

so, I tried to remaster my previous projects and change it into flex. and it getting messed up because of ul element is block and I changed it using JavaScript into a display flex.
this is the fiddle
$(function() {
var pull = $('#pull');
menu = $('nav ul.clearfix');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
$('#burger').toggleClass('open');
if ($('#burger').hasClass("open")) {
$(menu).css("display", "flex");
$("section").css("z-index", 1);
menu.slideToggle();
} else {
menu.slideToggle('slow', function() {
$("section").css("z-index", 4);
});
}
});
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
header{
width:100%;
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
header #logo{
width:15%;
position:absolute;
top:0;
left:0;
z-index:2;
}
#logo img{
width:100%;
}
header nav{
width:100%;
position:relative;
z-index:1;
}
nav ul.clearfix{
width:100%;
padding:0;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
ul.clearfix a{
list-style:none;
text-decoration:none;
border:solid 2px #e74c3c;
padding:8px 0px;
width:12%;
max-width:300px;
font-size:15px;
color:#e74c3c;
text-align:center;
cursor:pointer;
transition:all 0.3s ease-in-out;
}
ul.clearfix a:nth-child(n+2){
margin-left:-1px;
}
ul.clearfix a:hover{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
ul.clearfix #currentPage{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
/*default*/
#media screen and (max-width: 768px) {
header{
height:50px;
justify-content:flex-start;
}
nav {
z-index:2;
position:absolute;
top:0;
left:0;
right:0;
width:100%;
height:50px;
border-bottom: 0;
}
nav a#pull{
line-height:50px;}
nav ul.clearfix {
width:100%;
display: none;
height: auto;
background:#ccc;
position:relative;
flex-direction:column;
z-index:2;
}
ul.clearfix a{
border-bottom:1px dotted black;
font-size:14px;
width:100%;
position:relative;
height:50px;
text-align:center;
z-index:2;
}
ul.clearfix a:first-child{
border-top:1px dotted black;
margin-top:50px;
}
nav a#pull {
display: flex;
position: absolute;
align-items:flex-start;
justify-content:flex-start;
padding-left:10px;
right:10px;
top:5px;
}
nav a#pull:after {
background:#ccc;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
line-height:50px;
right:15px;
top:0px;}
div#burger{
width:20px;
height:20px;
position: absolute;
right:0px;
top:0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
z-index:4;}
div#burger span{
display: block;
position: absolute;
height: 5px;
width: 100%;
background: red;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
#burger span:nth-child(1){top: 0px;}
#burger span:nth-child(2){top: 7px;}
#burger span:nth-child(3){top: 14px;}
#burger.open span:nth-child(1){
top: 7px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#burger.open span:nth-child(2){
opacity: 0;
left: -30px;
}
#burger.open span:nth-child(3){
top: 7px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
}
/*default Portrait*/
#media screen and (max-width: 773px) and (orientation: portrait) {
div#logo{
width:30%;
}
}
/* iPad Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
div#logo{
width:20%;}
}
/* iPad Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
header{
width:100%;
height:80px;
}
div#logo {
width: 25%;}
nav {
width: 65%;}
}
/*default Landscape*/
#media screen and (max-width: 773px) and (orientation: landscape) {
div#logo{
width:20%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="sameThisHeight">
<div id="logo" class="logo">
<img src="assets/Logo.png">
</div>
<nav class="clearfix">
<ul class="clearfix">
<a id="currentPage" href="index.php">HOME</a>
REGISTRATION
TUTORIAL
CONTACT US
</ul>
<a href="#" id="pull">
<div id="burger">
<span></span>
<span></span>
<span></span>
</div>
</a>
</nav>
</header>
The thing is,
when i tried to clicked the burger at the first time it's back and forth like it has something wrong with it.
and the second time i opened the burger, it collapse the nav and it did good, no no it's not good actually it's not good at all.
Somehow the sequence has changed the "x" button for the opening the nav and the "burger icon" to close the nav. It definetly not ok.
I don't know for what i did so wrong about it, the right thing should be in place is the opposite of what i did the "x" button for close the nav and the "burger icon" to open up the nav.
My thought was because I inserted this in my JavaScript
$(menu).css("display", "flex");
Because, before i adding this into my javascript it did good performance but not good enough to match with the design. the last project i did fine because of not using flex and go stright with UL LI tags. is there anyway to solve this problem, and keep using flex for it? please help.

This lines causes the issue on first time clicking. You should put the display: flex after the slideToggle();, I should point out that it will not be a smooth transition as the slideToggle(); puts the display: block;. You should maybe do a css solution or maybe make a container around the <ul>...</ul>.
if ($('#burger').hasClass("open")) {
//here you set it to be display
$(menu).css("display", "flex");
$("section").css("z-index", 1);
//here you toggle display, which will be flex, so you hide it
menu.slideToggle();
}
change to (fiddle, I changed your styling a bit for demo, you are free to use your own)
$(function() {
var pull = $('#pull');
menu = $('nav ul.clearfix');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
$('#burger').toggleClass('open');
if ($('#burger').hasClass("open")) {
$("section").css("z-index", 1);
menu.slideToggle();
} else {
menu.slideToggle('slow', function() {
$("section").css("z-index", 4);
});
}
});
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
Your html/css has some issues and should be re-worked.
The <ul> has to contain <li>
<ul class="clearfix">
<a id="currentPage" href="index.php">HOME</a>
REGISTRATION
TUTORIAL
CONTACT US
</ul>
should be
<ul class="clearfix">
<li><a id="currentPage" href="index.php">HOME</a></li>
<li>REGISTRATION</li>
<li>TUTORIAL</li>
<li>CONTACT US</li>
</ul>
Also why do you use the class clearfix when you are not using float? I never target a clearfix class for styling as you do in this case, rather give it a class of navigation or something.

Animated menu is opened in background

I have a problem with animated menu.
<header role="banner">
<a class="nav-btn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</header>
<nav role="navigation" class="site-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
css
#import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
#keyframes fadeInLeft {
0% {
transform:translateX(-100%);
}
100% {
transform:translateX(0);
}
}
#keyframes fadeInRight {
0% {
transform:translateX(100%);
}
100% {
transform:translateX(0);
}
}
.nav-btn {
display:inline-block;
float:right;
position:relative;
top:5px;
cursor:pointer;
transition:all 0.5s ease;
right:0;
}
.bar {
display:block;
height:5px;
width:35px;
background-color:#111;
margin-top: 6.5px;
transition:all 0.5s ease;
&:nth-of-type(1) {
margin-top:0;
}
}
.b-open {
&:nth-of-type(1){
transform:rotate(-45deg);
transform-origin: right top;
}
&:nth-of-type(2){
opacity:0;
}
&:nth-of-type(3){
transform:rotate(45deg);
transform-origin:right bottom;
}
}
.site-nav {
opacity:0;
position:absolute;
right:0;
top:160px;
left:0;
bottom:0;
text-align: center;
font-weight: 700;
transition:all 0.5s ease;
li {
background-color:rgba(#fff, 0.8);
transition:all 0.5s ease;
}
a {
display:block;
text-decoration: none;
color:#111;
text-transform: uppercase;
transition:all 0.5s ease;
padding:40px;
margin:0 30%;
border-top:1px dashed lighten(#111, 60%);
}
}
.nb-open {
transform:rotate(-180deg);
right:50%;
margin-right:-23.5px;
}
.sn-open {
opacity:1;
li:nth-of-type(odd) {
a { animation:fadeInLeft 0.5s ease; }
}
li:nth-of-type(even) {
a { animation:fadeInRight 0.5s ease; }
}
}
JS
$(".nav-btn").click(function(){
$(this).toggleClass("nb-open");
$(".site-nav").toggleClass("sn-open");
$(".bar").toggleClass("b-open");
});
This menu is opened in background. It is hidden, but the mouse cursor "see" as if it was open.
How do I change it ?
it is menu from codepin http://codepen.io/emcarru/pen/bxehd

Instead of toggling the visibility using the opacity property, why not use the display: none; property instead?
New CSS (notice the new 'hidden' class):
#import url(http://fonts.googleapis.com/css?family=Roboto:400, 700);
#keyframes fadeInLeft {
0% {
transform:translateX(-100%);
}
100% {
transform:translateX(0);
}
}
#keyframes fadeInRight {
0% {
transform:translateX(100%);
}
100% {
transform:translateX(0);
}
}
.nav-btn {
display:inline-block;
float:right;
position:relative;
top:5px;
cursor:pointer;
transition:all 0.5s ease;
right:0;
}
.bar {
display:block;
height:5px;
width:35px;
background-color:#111;
margin-top: 6.5px;
transition:all 0.5s ease;
&:nth-of-type(1) {
margin-top:0;
}
}
.b-open {
&:nth-of-type(1) {
transform:rotate(-45deg);
transform-origin: right top;
}
&:nth-of-type(2) {
opacity:0;
}
&:nth-of-type(3) {
transform:rotate(45deg);
transform-origin:right bottom;
}
}
.site-nav {
position:absolute;
right:0;
top:160px;
left:0;
bottom:0;
text-align: center;
font-weight: 700;
transition:all 0.5s ease;
li {
background-color:rgba(#fff, 0.8);
transition:all 0.5s ease;
}
a {
display:block;
text-decoration: none;
color:#111;
text-transform: uppercase;
transition:all 0.5s ease;
padding:40px;
margin:0 30%;
border-top:1px dashed lighten(#111, 60%);
}
}
.nb-open {
transform:rotate(-180deg);
right:50%;
margin-right:-23.5px;
}
.sn-open {
li:nth-of-type(odd) {
a {
animation:fadeInLeft 0.5s ease;
}
}
li:nth-of-type(even) {
a {
animation:fadeInRight 0.5s ease;
}
}
}
.hidden {
display: none;
}
New HTML (hidden class is applied by default to menu):
<header role="banner"> <a class="nav-btn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</header>
<nav role="navigation" class="site-nav hidden">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Clients
</li>
<li>Contact Us
</li>
</ul>
</nav>
New JS (the hidden class is toggled):
$(".nav-btn").click(function () {
$(this).toggleClass("nb-open");
$(".site-nav").toggleClass("sn-open").toggleClass("hidden");
$(".bar").toggleClass("b-open");
});
JSFiddle demo here.

How to make animated div menu disappear from below button?

My project has a button just below the image logo. I have a animated menu div which come down when I click that button but the problem is that the menu hides the logo while coming up and going down. How can I make the div disappear just below the button without disturbing the animation?
Here is my code
HTML
<!-- Here comes the animated navigation menu -->
<div id="tab">
<p><img id="arrow" onClick="toggle('box');" src="../images/down.gif" width="30px" height="40px" align="middle"></p>
</div>
<div id="box" class="hide" hidden="true">
<div id="links">
<div id="deco">
<div class="bt"><a href="index.html" >HOME</a></div>
<div class="bt"><a href="event.php" >EVENT</a></div>
<div class="bt"><a href="gallery.php" >GALLERY</a></div>
<div class="bt"><a href="archieve.php" >ARCHIEVE</a></div>
<div class="bt"><a href="about.html" >ABOUT</a></div>
<div class="bt"><a href="contact.php" >CONTACT</a></div>
</div>
</div>
</div>
<!-- Here ends the animated navigation menu -->
CSS3
/*Animation Menu*/
#box{
width: 95px;
font-size: 12px;
line-height: 20px;
position: fixed;
z-index: 100;
border-style: solid;
border-color: #0a0a0a;
border-radius: 10px;
}
#tab{
float: left;
position: relative;
z-index: 99;
}
#tab img
{
padding-left:6px;
}
#links{
width: 80px;
padding: 10px;
float: left;
}
.hide{
margin-top:-500px; /* this specifies initial position of the menu */
animation: dropupnav 2s linear;
-webkit-animation: dropupnav 2s linear; /* we specify the animation for hiding */
}
.show{
margin-top:50px; /* this specifies how much pixels to move to the top */
animation: dropdownnav 1s linear;
-webkit-animation: dropdownnav 1s linear; /* we specify the animation for showing */
}
#arrow, .bt{
cursor: pointer;
}
.bt{
width: 77px;
height: 40px;
margin: -1px;
text-align:center;
/* border:1px solid #858fa6;*/
font: bold 13px Helvetica,Arial,sans-serif;
text-shadow:0px 0px 5px rgba(0, 0, 0, 0.75);
background:#0a0a0a;
}
.bt a{
line-height: 40px;
color: #fff;
display: block;
text-decoration:none;
}
.award img{
height:143px;
width:38px;
padding-top:10px;
}
.bt a:hover{
color: #e3ae57;
}
.bt:hover{
transition: background .3s linear;
/*background: #dc3d24;*/
-o-transition: background .3s linear;
-moz-transition: background .3s linear;
-webkit-transition: background .3s linear;
}
#deco{
width: 75px;
float: left;
box-shadow:0px 0px 5px #000;
-moz-box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
}
#keyframes dropdownnav
{
from {top: -250px;}
to {top: 180px;}
}
#-webkit-keyframes dropdownnav /* Safari and Chrome */
{
from {top: -250px;}
to {top: 180px;}
}
#keyframes dropupnav
{
from {top: 700px;}
to {top: 0px;}
}
#-webkit-keyframes dropupnav /* Safari and Chrome */
{
from {top: 700px;}
to {top: 0px;}
}
/*Animation Menu End*/
JavaScript
function toggle(id) {
var el = document.getElementById(id);
var img = document.getElementById("arrow");
var box = el.getAttribute("class");
var nav = document.getElementById("box");
nav.hidden = false;
if(box == "hide"){
el.setAttribute("class", "show");
delay(img, "../images/up.gif", 400);
}
else{
el.setAttribute("class", "hide");
delay(img, "../images/down.gif", 400);
}
}
function delay(elem, src, delayTime){
window.setTimeout(function() {elem.setAttribute("src", src);}, delayTime);
}