Horizontal Menu

Tutorials of (Horizontal menu) by Ilic davor

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Horizontal Menu</title>
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:600'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="wrapper">
	<ul>
		<li><a href="#"><i class="icon-list-alt"></i>
		<div>
			 Type
		</div>
		</a></li>
		<li><a href="#"><i class="icon-calendar"></i>
		<div>
			 Basic Settings
		</div>
		</a></li>
		<li><a href="#"><i class="icon-globe"></i>
		<div>
			 Geo
		</div>
		</a></li>
		<li><a href="#"><i class="icon-bullseye"></i>
		<div>
			 Target Groups
		</div>
		</a></li>
		<li><a href="#"><i class="icon-picture"></i>
		<div>
			 Creatives
		</div>
		</a></li>
		<li><a href="#"><i class="icon-list-alt"></i>
		<div>
			 Summery
		</div>
		</a></li>
	</ul>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background-color: #f15050;
  font-family: 'Open Sans', sans-serif;
}
body #wrapper {
  width: 100%;
}
body #wrapper ul {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  height: 118px;
  background-color: #fff;
  font-size: 0px;
}
body #wrapper ul:hover li {
  width: 13.33333%;
}
body #wrapper ul li {
  display: inline-block;
  float: left;
  width: 16.66667%;
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  text-shadow: 0px 1px 3px white;
  border-right: thin solid lightgray;
}
body #wrapper ul li:last-child {
  border-right: none;
}
body #wrapper ul li:hover {
  background: #e6e6e6;
  width: 28.57143%;
  -moz-box-shadow: inset 10px 10px 10px -10px rgba(0, 0, 0, 0.3), inset -10px 10px 10px -10px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 10px 10px 10px -10px rgba(0, 0, 0, 0.3), inset -10px 10px 10px -10px rgba(0, 0, 0, 0.3);
  box-shadow: inset 10px 10px 10px -10px rgba(0, 0, 0, 0.3), inset -10px 10px 10px -10px rgba(0, 0, 0, 0.3);
}
body #wrapper ul li a {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  padding-top: 19px;
  height: 118px;
  text-decoration: none;
  font-size: 38px;
  color: gray;
}
body #wrapper ul li a:visited {
  color: gray;
}
body #wrapper ul li div {
  margin-top: 5px;
  font-weight: 600;
  font-size: 13px;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Horizontal Menu ) is write by Ilic Davor, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Ilic Davor