Brainbow Menu

Developer
Moses Holmström
Size
3,767 Kb
Views
38,456
  1. Brainbow Menu Previews
  2. Brainbow Menu HTML Codes
  3. Brainbow Menu CSS Codes
  4. Brainbow Menu JS Codes

How do I make an brainbow menu?

Neat underline effect for navigation menu.. What is a brainbow menu? How do you make a brainbow menu? This script and codes were developed by Moses Holmström on 21 August 2022, Sunday.

Brainbow Menu Previews
IQ Test

Brainbow Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Brainbow Menu</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> <h1>brainbow menu</h1>
</header>
<nav> <ul> <li>news</li> <li>products</li> <li>services</li> <li>gallery</li> <li>about us</li> <li>contact</li> <li>jobs</li> <li>blog</li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Brainbow Menu - Script Codes CSS Codes

body { color: #FFF; background: #000; font-weight: 100; font-family: "Segoe UI", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
h1 { font-size: 2.5em; line-height: 1.5em; font-weight: 100; text-align: center; vertical-align: bottom; margin: 0; padding: 0; color: #FFF; letter-spacing: 0.075em; text-transform: capitalize;
}
nav { position: relative; top: 0.5em; margin: 0 auto;
}
nav ul { background: rgba(255, 255, 255, 0.1); margin: 0; padding: 0; text-align: center; font-size: 0;
}
nav ul li { font-size: 1.2rem; font-weight: 400; cursor: pointer; line-height: 1.6em; padding: 0.25em 0.6em; margin: 0 0; display: inline-block; list-style-type: none; letter-spacing: 1px; text-transform: capitalize; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; box-sizing: border-box;
}
nav ul li:hover { color: #FFF;
}
nav ul :nth-child(1) { color: #bbe006;
}
nav ul :nth-child(1):hover { background-color: #bbe006;
}
nav ul :nth-child(2) { color: #11d452;
}
nav ul :nth-child(2):hover { background-color: #11d452;
}
nav ul :nth-child(3) { color: #11b4d4;
}
nav ul :nth-child(3):hover { background-color: #11b4d4;
}
nav ul :nth-child(4) { color: #308ce8;
}
nav ul :nth-child(4):hover { background-color: #308ce8;
}
nav ul :nth-child(5) { color: #516dfb;
}
nav ul :nth-child(5):hover { background-color: #516dfb;
}
nav ul :nth-child(6) { color: #8c5af2;
}
nav ul :nth-child(6):hover { background-color: #8c5af2;
}
nav ul :nth-child(7) { color: #cd2bee;
}
nav ul :nth-child(7):hover { background-color: #cd2bee;
}
nav ul :nth-child(8) { color: #e61aa2;
}
nav ul :nth-child(8):hover { background-color: #e61aa2;
}
nav ul :nth-child(9) { color: #cf171a;
}
nav ul :nth-child(9):hover { background-color: #cf171a;
}
nav .indicator { pointer-events: none; position: fixed; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}

Brainbow Menu - Script Codes JS Codes

$(function() { brainbow();
});
var brainbow = function init () { /* function stuff */ var indicate = function indicate ($e, current) { var o = $e.offset(), h = $e.innerHeight(), w = $e.innerWidth(), t = (o.top + h - 3).toFixed(2), l = o.left.toFixed(2), c = $e.data("color") || "rgba(0,0,0,0)"; $(".indicator").css({ "top": current ? t + "px" : t + 6 + "px", "left": l + "px", "width": w + "px", "height": current ? "1px" : "0.3em", "background-color": c }); }; /* event stuff */ $("nav ul").on("click", "li", function(e) { $("nav ul li").each(function(){ $(this).removeClass("current"); }); $(this).addClass("current"); }); $("nav ul").on("mouseenter", "li", function(e) { indicate( $(this), false); }); $("nav ul").on("mouseleave", "li", function(e) { indicate( $("li.current"), true); }); $(window).on("resize", function() { indicate( $("li.current"), true); }); $("li:eq(6)").on("click", function(){ var mail = "mailto:[email protected]?subject=We'd like to offer you a job!&body=Hi Moses! We like your stuff and we'd like to hire you as a frontend developer at our company, ________."; window.open(mail,"_blank"); }); /* init stuff */ var indicator = $("<div>").addClass("indicator"); $("nav").prepend(indicator); $("nav ul li").each(function(){ $(this).data({"color": $(this).css("color")}); }).first().addClass("current"); indicate($("nav ul li.current"), true);
};
Brainbow Menu - Script Codes
Brainbow Menu - Script Codes
Home Page Home
Developer Moses Holmström
Username thykka
Uploaded August 21, 2022
Rating 4.5
Size 3,767 Kb
Views 38,456
Do you need developer help for Brainbow Menu?

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!

Moses Holmström (thykka) Script Codes
Name
Freaky Shadow Effect
Rotary control with value display
HSL color picker
Rotating ASCII Globe
Thing
Pagination indicators
Fallout Slides
Three.js Planetoid
Strange sphere thing
Status Monitor mockup
Create amazing art & images 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!