LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
	
CSS
body, html {
	margin: 0;
	box-sizing: border-box;
	font-family: arial;
}
*, *:before, *:after {
  box-sizing: inherit;
}
#search_btns {
	width: 400px;
	margin: 30px auto;
	padding-left: 60px;
}
#search_btns button:nth-child(2) {
	width: 144px;
}
#search_btns button:nth-child(1) {
	bottom: 12px;
}
#search_btns button {
	position: relative;
	height: 34px;
	margin: 3px;
	font-weight: bold;
  color: gray;
  background: #f1f1f1;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  padding: 0 15px;
  overflow: hidden;
}
#search_btns button:hover {
	color: black;
	border: 1px solid #bdbdbd;
	box-shadow: 0px 0.5px 0px 0px #d3d3d3;
}
#search_btns button:active {
	border: 1px solid #7f7fff;
}

#search_btns button:focus {
	outline: 0;
}

#search_btns button ul li {
	list-style-type: none;
	padding: 5px 0;
	text-align: left;
}

#search_btns button ul {
	padding-left: 0;
	position: absolute;
	bottom: -135px;
	width: 144px;
}
JS
$('#search_btns button:nth-child(2)').hover(function() {
  
  btnTimeID = setTimeout(function() {
    
    // We are using the math object to randomly pick a number between 1 - 11, and then applying the formula (5n-3)5 to this number, which leaves us with a randomly selected number that is applied to the 
    (i.e. -185) and corresponds to the position of a word (or
  • element, i.e. "I'm Feeling Curious"). var pos = -((Math.floor((Math.random() * 11) + 1)) * 5 - 3) * 5 if (pos === -135) { console.log("position didn't change, let's force change") pos = -35; } $('#search_btns button:nth-child(2) ul').animate({'bottom':pos + 'px'}, 300); // Change the width of the button to fit the currently selected word. if (pos === -35 || pos === -110 || pos === -185 || pos === -10 || pos === -60 || pos === -160) { console.log(pos + ' = -35, -110, -185, -10, -60, -160'); $('#search_btns button:nth-child(2)').css('width', '149px'); } else if (pos === -85) { console.log(pos + ' = -85'); $('#search_btns button:nth-child(2)').css('width', '160px'); } else if (pos === -210) { console.log(pos + ' = -210'); $('#search_btns button:nth-child(2)').css('width', '165px'); } else { console.log(pos + ' = -260, -235'); $('#search_btns button:nth-child(2)').css('width', '144px'); } },200); }, function() { clearTimeout(btnTimeID); setTimeout(function() { console.log('setTimeout function'); $('#search_btns button:nth-child(2) ul').css('bottom', '-135px'); // this is the original position $('#search_btns button:nth-child(2)').css('width', '144px'); // reset the original width of the button },200); });

Description

Check out my complete re-creation (created from scratch) of the Google home page here: https://htmlpreview.github.io/?https://raw.githubusercontent.com/Twinbird24/google-homepage/master/index.html
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv