Home
Programming

3 Simple Menu Hover in HTML

Syiainfoku make a 3 Simple Menu Hover in HTML
3 Simple Menu Hover in HTML

Hello everyone, I am the founder of Syiainfoku. Today in Syiainfoku you will learn how to create a 3 Simple Menu Hover in HTML. 

Preview 3 Simple Menu Hover in HTML

Preview 3 Simple Menu Hover in HTML

More or less the result will be like in the image above.

Source Code and Brief Explanation

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>3 Simple Menu Hover | hitoricoding</title>
  <link rel="stylesheet" type="text/css" href="assets/style.css" />
</head>

<body>

  <!-- === HOVER STYLE #1 === -->
  <section class="style1">
    <nav class="effect1">
      <a href="#"><span data-hover="Home">Home</span></a>
      <a href="#"><span data-hover="Blog">Blog</span></a>
      <a href="#"><span data-hover="Service">Service</span></a>
      <a href="#"><span data-hover="About">About</span></a>
      <a href="#"><span data-hover="Contact">Contact</span></a>
    </nav>
  </section>

  <!-- === HOVER STYLE #2 === -->
  <section class="style2">
    <nav class="effect2">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Skill</a>
      <a href="#">Work</a>
      <a href="#">Contact</a>
    </nav>
  </section>

  <!-- === HOVER STYLE #3 === -->
  <section class="style3">
    <nav class="effect3">
      <a href="#" data-hover="Home"><span>Home</span></a>
      <a href="#" data-hover="Blog"><span>Blog</span></a>
      <a href="#" data-hover="Service"><span>Service</span></a>
      <a href="#" data-hover="About Us"><span>About Us</span></a>
      <a href="#" data-hover="Contact Us"><span>Contact Us</span></a>
    </nav>
  </section>
</body>

</html>

Finally, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0f1740;
}

nav a {
  text-decoration: none;
  color: #c1add8;
  font-family: Helvetica, Arial, sans-serif;
  position: relative;
  display: inline-block;
  margin: 0 20px;
  font-weight: 400;
}

section {
  margin: 100px auto;
  padding: 20px;
  text-align: center;
  width: 900px;
}

/* === BACKGROUND COLOR === */
.style1 {
  background: #CF000F;
}

.style3 {
  background: #a3ecdb;
}

/* ==== HOVER STYLE 1 === */
.effect1 a {
  color: #FFFFFF;
  overflow: hidden;
  padding: 0 5px;
  height: 1em;
}

.effect1 a span {
  position: relative;
  display: inline-block;
  transition: transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
}

.effect1 a span::before {
  color: #f7e254;
  position: absolute;
  top: 100%;
  content: attr(data-hover);
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

.effect1 a:hover span,
.effect1 a:focus span {
  transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}

/* === HOVER STYLE 2 === */
.effect2 a {
  color: #FFFFFF;
  padding: 10px 0;
}

.effect2 a::after {
  background: #fb3535;
  position: absolute;
  top: 100%;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
}

.effect2 a:hover::after,
.effect2 a:focus::after {
  opacity: 1;
  transform: translateY(0px);
  -moz-transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

/* === HOVER STYLE 3 === */
.effect3 {
  position: relative;
  z-index: 1;
}

.effect3 a {
  margin: 0 15px;
  overflow: hidden;
}

.effect3 a span {
  color: #FFFFFF;
  background: #ff6712;
  display: block;
  padding: 10px 20px;
  transition: transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
}

.effect3 a::before {
  color: #bef71c;
  background: #258a7b;
  position: absolute;
  border-radius: 10px;
  top: 0;
  left: 0;
  z-index: -1;
  padding: 10px 0;
  width: 100%;
  height: 100%;
  content: attr(data-hover);
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

.effect3 a:hover span,
a:focus span {
  transform: translateY(100%);
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
}

.effect3 a:hover::before,
.effect3 a:focus::before {
  transform: translateY(0%);
  -moz-transform: translateY(0%);
  -webkit-transform: translateY(0%);
}

That's it, now you have successfully created a 3 Simple Menu Hover in HTML, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment