Dotted Menu Concept

Developer
Kyle Brumm
Size
3,327 Kb
Views
6,072
  1. Dotted Menu Concept Previews
  2. Dotted Menu Concept HTML Codes
  3. Dotted Menu Concept CSS Codes
  4. Dotted Menu Concept JS Codes

How do I make an dotted menu concept?

Just messing around with creating a new menu icon concept.. What is a dotted menu concept? How do you make a dotted menu concept? This script and codes were developed by Kyle Brumm on 07 January 2023, Saturday.

Dotted Menu Concept Previews
IQ Test

Dotted Menu Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dotted Menu Concept</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header"> <h1>Dotted Menu Concept</h1> <h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>
</header>
<a href="#" class="menu"> <div class="pix"></div> <div class="pix"></div> <div class="pix"></div> <div class="pix"></div> <div class="pix"></div> <div class="pix"></div> <div class="pix"></div> <div class="pix"></div> <div class="pix"></div>
</a> <script src="js/index.js"></script>
</body>
</html>

Dotted Menu Concept - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:300);
*,
*:before,
*:after { box-sizing: border-box;
}
html { padding-top: 50px; font-family: 'Raleway', Helvetica, arial, sans-serif; text-align: center; background-color: #eeeeee;
}
.header { text-align: center;
}
a { text-decoration: none; color: #9c9fb2;
}
/*-------------------------------------------------------------------*/
.menu { position: relative; display: block; width: 20px; height: 20px; margin: 2rem auto 0 auto;
}
.menu .pix { position: absolute; width: 4px; height: 4px; background-color: #9c9fb2; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
}
.menu .pix:nth-of-type(1) { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px);
}
.menu .pix:nth-of-type(2) { -webkit-transform: translate(8px, 0px); transform: translate(8px, 0px);
}
.menu .pix:nth-of-type(3) { -webkit-transform: translate(16px, 0px); transform: translate(16px, 0px);
}
.menu .pix:nth-of-type(4) { -webkit-transform: translate(0px, 8px); transform: translate(0px, 8px);
}
.menu .pix:nth-of-type(5) { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px);
}
.menu .pix:nth-of-type(6) { -webkit-transform: translate(16px, 8px); transform: translate(16px, 8px);
}
.menu .pix:nth-of-type(7) { -webkit-transform: translate(0px, 16px); transform: translate(0px, 16px);
}
.menu .pix:nth-of-type(8) { -webkit-transform: translate(8px, 16px); transform: translate(8px, 16px);
}
.menu .pix:nth-of-type(9) { -webkit-transform: translate(16px, 16px); transform: translate(16px, 16px);
}
.menu:hover .pix { background-color: #757786;
}
.menu:hover .pix:nth-of-type(1) { -webkit-transform: translate(-4px, -4px); transform: translate(-4px, -4px);
}
.menu:hover .pix:nth-of-type(3) { -webkit-transform: translate(20px, -4px); transform: translate(20px, -4px);
}
.menu:hover .pix:nth-of-type(7) { -webkit-transform: translate(-4px, 20px); transform: translate(-4px, 20px);
}
.menu:hover .pix:nth-of-type(9) { -webkit-transform: translate(20px, 20px); transform: translate(20px, 20px);
}
.menu.active .pix:nth-of-type(1) { -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.menu.active .pix:nth-of-type(2) { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px);
}
.menu.active .pix:nth-of-type(3) { -webkit-transform: translate(16px, 0); transform: translate(16px, 0);
}
.menu.active .pix:nth-of-type(4) { -webkit-transform: translate(4px, 12px); transform: translate(4px, 12px);
}
.menu.active .pix:nth-of-type(6) { -webkit-transform: translate(12px, 4px); transform: translate(12px, 4px);
}
.menu.active .pix:nth-of-type(7) { -webkit-transform: translate(0, 16px); transform: translate(0, 16px);
}
.menu.active .pix:nth-of-type(8) { -webkit-transform: translate(12px, 12px); transform: translate(12px, 12px);
}
.menu.active .pix:nth-of-type(9) { -webkit-transform: translate(16px, 16px); transform: translate(16px, 16px);
}
.menu.active:hover .pix:nth-of-type(1) { -webkit-transform: translate(-4px, -4px); transform: translate(-4px, -4px);
}
.menu.active:hover .pix:nth-of-type(2) { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px);
}
.menu.active:hover .pix:nth-of-type(3) { -webkit-transform: translate(20px, -4px); transform: translate(20px, -4px);
}
.menu.active:hover .pix:nth-of-type(4) { -webkit-transform: translate(2px, 14px); transform: translate(2px, 14px);
}
.menu.active:hover .pix:nth-of-type(6) { -webkit-transform: translate(14px, 2px); transform: translate(14px, 2px);
}
.menu.active:hover .pix:nth-of-type(7) { -webkit-transform: translate(-4px, 20px); transform: translate(-4px, 20px);
}
.menu.active:hover .pix:nth-of-type(8) { -webkit-transform: translate(14px, 14px); transform: translate(14px, 14px);
}
.menu.active:hover .pix:nth-of-type(9) { -webkit-transform: translate(20px, 20px); transform: translate(20px, 20px);
}

Dotted Menu Concept - Script Codes JS Codes

document.querySelector('.menu').addEventListener('click', function() { this.classList.toggle('active');
});
Dotted Menu Concept - Script Codes
Dotted Menu Concept - Script Codes
Home Page Home
Developer Kyle Brumm
Username kjbrum
Uploaded January 07, 2023
Rating 4.5
Size 3,327 Kb
Views 6,072
Do you need developer help for Dotted Menu Concept?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Brumm (kjbrum) Script Codes
Name
Subtle Menu Animation
Button Hover Effects
Simple Tabs Concept
Stacked Cards Hover Effects
Vue.js Lazy Loading
Wavy Loading Animations
CSS3 Stylish Checkboxes
SVG Hover Animations
Line Button Hover Effects
Stylish Brand Buttons
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!