Blurring Menu

What is a blurring menu How do you make a blurring menu? This script and codes were developed by Assaf Gelber on 09 March 2022, Wednesday.

How do I make an blurring menu?
  1. Blurring Menu Previews
  2. Blurring Menu HTML Codes
  3. Blurring Menu CSS Codes
Blurring Menu Previews

Blurring Menu HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Blurring Menu</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(https://fonts.googleapis.com/css?family=Sintony);
* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

nav {
  position: relative;
  text-align: center;
  background: #202033;
  box-shadow: 0 3px 5px #555;
}
nav:hover a {
  color: transparent;
  text-shadow: 0 0 3px #CC5C00;
}
nav a {
  display: inline-block;
  width: 150px;
  height: 66px;
  line-height: 66px;
  font-family: Sintony;
  font-size: 1.25em;
  text-decoration: none;
  color: #CC5C00;
  transition: all 0.3s ease;
}
nav a:hover {
  color: #FF7300;
  border-bottom: 5px solid #FF7300;
  text-shadow: none;
}

@media screen and (max-width: 620px) {
  nav a {
    width: 49%;
  }
}
@media screen and (max-width: 300px) {
  nav a {
    width: 100%;
  }
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <nav>
  <a href='#'>Link</a>
  <a href='#'>Other Link</a>
  <a href='#'>Another</a>
  <a href='#'>One More</a>
</nav>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>

Blurring Menu CSS Codes

@import url(https://fonts.googleapis.com/css?family=Sintony);
* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

nav {
  position: relative;
  text-align: center;
  background: #202033;
  box-shadow: 0 3px 5px #555;
}
nav:hover a {
  color: transparent;
  text-shadow: 0 0 3px #CC5C00;
}
nav a {
  display: inline-block;
  width: 150px;
  height: 66px;
  line-height: 66px;
  font-family: Sintony;
  font-size: 1.25em;
  text-decoration: none;
  color: #CC5C00;
  transition: all 0.3s ease;
}
nav a:hover {
  color: #FF7300;
  border-bottom: 5px solid #FF7300;
  text-shadow: none;
}

@media screen and (max-width: 620px) {
  nav a {
    width: 49%;
  }
}
@media screen and (max-width: 300px) {
  nav a {
    width: 100%;
  }
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.