Folding Horizontal Menu

Wave

Wavy

Text

Effect

Moving

Move

Automatic

Scrollbar

Textbox

Wind

Twinkle

Dropdown

List

Browser

Explorer

Histry

Back

Top

Title

Checkbox

Check

Uncheck

All

Written by @kerixa 6 May 2020

If you want to be different in your website menu, you need to make change. For example you can use horizontal menus instead of vertical ones. If you out some effects on the menu, it would be great. Below is a nice example of such menus.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<style>
@import url('https://fonts.googleapis.com/css?family=Lato');
body {
  background-color: #000000;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Lato', sans-serif;
  margin: 20px;
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.menu {
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  display: inline-block;
  cursor: pointer;
  pointer-events: none;
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.menu:hover {
  pointer-events: all;
}
.label {
  display: inline-block;
  cursor: pointer;
  pointer-events: all;
}
.spacer {
  display: inline-block;
  width: 80px;
  margin-left: 15px;
  margin-right: 15px;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}
.spacer:before {
  content: "";
  position: absolute;
  border-bottom: 1px solid #ffffff;
  height: 1px;
  width: 0%;
  transition: width 0.25s ease;
  transition-delay: 0.7s;
}
.item {
  position: relative;
  display: inline-block;
  margin-right: 30px;
  top: 10px;
  opacity: 0;
  transition: opacity 0.5s ease, top 0.5s ease;
  transition-delay: 0;
}
span {
  transition: color 0.5s ease;
}
.item:hover span {
  color: #ff0000;
}
.menu:hover .spacer:before {
  width: 100%;
  transition-delay: 0s;
}
.menu:hover .item {
  opacity: 1;
  top: 0px;
}
.item:nth-child(1) {
  transition-delay: 0.45s;
}
.item:nth-child(2) {
  transition-delay: 0.4s;
}
.item:nth-child(3) {
  transition-delay: 0.35s;
}
.item:nth-child(4) {
  transition-delay: 0.3s;
}
.item:nth-child(5) {
  transition-delay: 0.25s;
}
.item:nth-child(6) {
  transition-delay: 0.2s;
}
.item:nth-child(7) {
  transition-delay: 0.15s;
}
.item:nth-child(8) {
  transition-delay: 0.1s;
}
.item:nth-child(9) {
  transition-delay: 0.05s;
}
.item:nth-child(10) {
  transition-delay: 0s;
}
.menu:hover .item:nth-child(1) {
  transition-delay: 0.25s;
}
.menu:hover .item:nth-child(2) {
  transition-delay: 0.3s;
}
.menu:hover .item:nth-child(3) {
  transition-delay: 0.35s;
}
.menu:hover .item:nth-child(4) {
  transition-delay: 0.4s;
}
.menu:hover .item:nth-child(5) {
  transition-delay: 0.45s;
}
.menu:hover .item:nth-child(6) {
  transition-delay: 0.5s;
}
.menu:hover .item:nth-child(7) {
  transition-delay: 0.55s;
}
.menu:hover .item:nth-child(8) {
  transition-delay: 0.6s;
}
.menu:hover .item:nth-child(9) {
  transition-delay: 0.65s;
}
.menu:hover .item:nth-child(10) {
  transition-delay: 0.7s;
}
</style>
Take your mouse over "FOLLOW ME".
<div class="menu">
  <div class="label">Follow Me</div>
  <div class="spacer"></div>
  <div class="item"><span>Twitter</span></div>
  <div class="item"><span>Instagram</span></div>
  <div class="item"><span>Flickr</span></div>
  <div class="item"><span>Behance</span></div>
  <div class="item"><span>MixCloud</span></div>
</div><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300