Sliding hover effects single level menu

Sliding-hover-effects-single-level-menu

Single Level Menu Effects

In website menu is one of the important components of all site. Now a days it is rare to find a site without the navigation bar. So we have an idea a modern looking single-level menu. You might think – again, but the menu looks really interesting, its feature is a sliding panel which highlights the active elements (something like a lava-lamp menu).

Live Demo   Download Source Code

Index.html

 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta property="og:site_name" content="lisenme" />
  <meta property="og:title" content="lisenme" />
  <meta property="og:type" content="website" />
  <meta name="description" content="lisenme">
  <title>Sliding hover effects single level menu | lisenme</title>
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <header>
      <h2>Back to '<a href="https://www.lisenme.com/sliding-hover-effects-single-level-menu">Sliding hover effects single level menu</a>' tutorial</h2>
  </header>

  <nav id="menu">
    <ul>
      <li><a href="https://www.lisenme.com/category/tutorials/html-css-free-tutorial/" target="_blank">HTML/CSS</a></li>
      <li><a href="https://www.lisenme.com/category/tutorials/html-css-free-tutorial/" target="_blank">HTML5</a></li>
      <li><a href="https://www.lisenme.com/category/tutorials/jquery/" target="_blank">jQuery</a></li>
      <li><a href="https://www.lisenme.com/category/tutorials/php/" target="_blank">PHP</a></li>
      <li><a href="https://www.lisenme.com/category/tutorials/javascript-free-tutorial/" target="_blank">Javascript</a></li>
      <li><a href="https://www.lisenme.com/graphics/" target="_blank">Design</a></li>
      <li><a href="https://www.lisenme.com/category/best-free-and-premium-web-html-templates/" target="_blank">Other</a></li>
      <div class="current">
        <div class="ctoparr"></div>   
        <div class="cback"></div>
        <div class="cbotarr"></div>
      </div>
    </ul>
  </nav>

  <nav id="menu">
    <ul>
      <li><a href="https://www.lisenme.com/category/tutorials/html-css-free-tutorial/" target="_blank">HTML/CSS</a></li>
      <li><a href="https://www.lisenme.com/category/tutorials/html-css-free-tutorial/" target="_blank">HTML5</a></li>
      <li><a href="https://www.lisenme.com/category/tutorials/jquery/" target="_blank">jQuery</a></li>
      <li><a href="https://www.lisenme.com/category/tutorials/php/" target="_blank">PHP</a></li>
      <li><a href="https://www.lisenme.com/category/tutorials/javascript-free-tutorial/" target="_blank">Javascript</a></li>
      <li><a href="https://www.lisenme.com/graphics/" target="_blank">Design</a></li>
      <li><a href="https://www.lisenme.com/category/best-free-and-premium-web-html-templates/" target="_blank">Other</a></li>
      <div class="current">
        <div class="ctoparr"></div>   
        <div class="cback"></div>
        <div class="cbotarr"></div>
      </div>
    </ul>
  </nav>
</body>
</html>

Style.css

body {
	background-color: #fff;
	margin: 0;
	padding: 0;
}

header {
	background-color: #049fff;
	color: #fff;
	display: block;
	font: 14px/1.3 Arial, sans-serif;
	position: relative;
	margin: 0 0 10px;
	padding: 0;
}

header h2 {
	font-size: 22px;
	margin: 0px auto;
	padding: 10px 0;
	width: 80%;
	text-align: center;
}

header a,
a:visited {
	text-decoration: none;
	color: #fcfcfc;
}

#menu {
	display: inline-block;
	height: 128px;
	margin: 100px 5% 0;
	text-align: center;
	white-space: nowrap;
	width: 90%;
}

#menu ul {
	margin: 0;
	padding: 0;
	position: relative;
}

#menu ul:after {
	clear: both;
	content: "";
	display: block;
}

#menu li {
	background-position: 50% center;
	display: block;
	float: left;
	font-size: 18px;
	font-weight: bold;
	height: 128px;
	line-height: 210px;
	margin-right: 1%;
	position: relative;
	white-space: nowrap;
	width: 13%;
	z-index: 2;
}

#menu li:after {
	background: url("../images/bg.png") repeat scroll 0 0;
	content: "";
	height: 100%;
	position: absolute;
	right: -10%;
	top: 0;
	width: 10%;
}

#menu li:nth-child(1):before {
	background: url("../images/bg.png") repeat scroll 0 0;
	content: "";
	height: 100%;
	left: -10%;
	position: absolute;
	top: 0;
	width: 10%;
}

#menu li:nth-child(1) {
	background: url("../images/1.png") no-repeat center;
	margin-left: 1%;
}

#menu li:nth-child(2) {
	background: url("../images/2.png") no-repeat center;
}

#menu li:nth-child(3) {
	background: url("../images/3.png") no-repeat center;
}

#menu li:nth-child(4) {
	background: url("../images/4.png") no-repeat center;
}

#menu li:nth-child(5) {
	background: url("../images/5.png") no-repeat center;
}

#menu li:nth-child(6) {
	background: url("../images/1.png") no-repeat center;
}

#menu li:nth-child(7) {
	background: url("../images/2.png") no-repeat center;
}

#menu a {
	color: #eee;
	display: block;
	height: 100%;
	text-decoration: none;
}

.current {
	height: 158px;
	left: 7.5%;
	margin-left: -50px;
	position: absolute;
	top: -13px;
	width: 100px;
	-webkit-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
	-moz-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
	-o-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
	-ms-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
	transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
}

.cback {
	background-color: #ff9b04 !important;
	border-bottom: 2px solid rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	height: 100%;
	position: absolute;
	width: 100%;
}

.ctoparr {
	height: 12px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 13px;
	width: 100%;
	z-index: 2;
}

.ctoparr:before {
	border-radius: 20%;
	box-shadow: 0 0 15px #000;
	content: "";
	height: 10px;
	left: 5%;
	position: absolute;
	top: -10px;
	width: 90%;
}

.ctoparr:after {
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 12px solid #ff9b06;
	content: "";
	height: 0;
	left: 50%;
	margin-left: -8px;
	position: absolute;
	top: 0;
	width: 0;
}

.cbotarr {
	bottom: 17px;
	height: 12px;
	left: 0;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 2;
}

.cbotarr:before {
	border-radius: 20%;
	bottom: -10px;
	box-shadow: 0 0 15px #000;
	content: "";
	height: 10px;
	left: 5%;
	position: absolute;
	width: 90%;
}

.cbotarr:after {
	border-bottom: 12px solid #ff9b06;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	bottom: 0;
	content: "";
	height: 0;
	left: 50%;
	margin-left: -8px;
	position: absolute;
	width: 0;
}

#menu li.selected:nth-child(1)~.current {
	left: 7.5%;
}

#menu li.selected:nth-child(2)~.current {
	left: 21.5%;
}

#menu li.selected:nth-child(3)~.current {
	left: 35.5%;
}

#menu li.selected:nth-child(4)~.current {
	left: 49.5%;
}

#menu li.selected:nth-child(5)~.current {
	left: 63.5%;
}

#menu li.selected:nth-child(6)~.current {
	left: 77.5%;
}

#menu li.selected:nth-child(7)~.current {
	left: 91.5%;
}

#menu li:nth-child(1):hover~.current {
	left: 7.5%;
}

#menu li:nth-child(2):hover~.current {
	left: 21.5%;
}

#menu li:nth-child(3):hover~.current {
	left: 35.5%;
}

#menu li:nth-child(4):hover~.current {
	left: 49.5%;
}

#menu li:nth-child(5):hover~.current {
	left: 63.5%;
}

#menu li:nth-child(6):hover~.current {
	left: 77.5%;
}

#menu li:nth-child(7):hover~.current {
	left: 91.5%;
}

You May Also Like

About the Author: Ranjith Kumar A

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x