Pure CSS3 to Achieve Vertical Menu Navigation With Adsorption and Shadow Effects

Pure CSS3 to Achieve Vertical Menu Navigation With Adsorption and Shadow Effects: BY James18 Dec,2020; Tags:
CSS3 Menu

Introduction

Bring you a very unique pure CSS3 vertical menu navigation. It is characterized by the effect of 3D shadows on the menu items. At the same time, when the mouse moves over the menu item, the menu item will be adsorbed on the page, remove the mouse The menu item will leave the page again and present a 3D shadow visual effect. This menu is based on pure CSS3 implementation, so it is very convenient to use.

Pure CSS3 to Achieve Vertical Menu Navigation With Adsorption and Shadow Effects

Instructions

HTML Body Code

<div class="box shadow">
	<a href="https://www.html5ways.com/">Home</a>
  <div class="circle"></div>
</div>
<div class="box shadow">
	<a href="https://www.html5ways.com/search/HTML5_Animation">HTML5 Animation</a>
  <div class="circle"></div>
</div>
<div class="box shadow">
	<a href="https://www.html5ways.com/search/jQuery_Plugin">jQuery Plugin</a>
  <div class="circle"></div>
</div>

Css Code

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}

.box {
  width: 25%;
  max-width: 250px;
  display: block;
  height: 50px;
  position: relative;
  border-radius: 5px;
  background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%);
  margin-bottom: 40px;
  padding: 15px 25px 0 40px;
  color: darkslategray;
  box-shadow: 1px 2px 1px -1px #777;
  transition: background 200ms ease-in-out;
  text-align:right;
}

.box a{color:#fff;text-decoration:none;}

.shadow {
  position: relative;
}

VIEW NOW