Minimal Hover Menu

Developer
Brock Nunn
Size
3,203 Kb
Views
4,048
  1. Minimal Hover Menu Previews
  2. Minimal Hover Menu HTML Codes
  3. Minimal Hover Menu CSS Codes
  4. Minimal Hover Menu JS Codes

How do I make an minimal hover menu?

Just a simple hover menu implementation using a nice an quick jQuery effect. . What is a minimal hover menu? How do you make a minimal hover menu? This script and codes were developed by Brock Nunn on 06 January 2023, Friday.

Minimal Hover Menu Previews
IQ Test

Minimal Hover Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Minimal Hover Menu</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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> <nav id="nav" class="navigation"> <ul> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="">About</a> <ul> <li><a href="">Page 1</a></li> <li><a href="">Page 2 With More</a></li> <li><a href="">Page 3</a></li> </ul> </li> <li><a href="">Products</a></li> <li><a href="">Blog</a></li> <li><a href="">Contact</a> <ul> <li><a href="">Page 1</a></li> <li><a href="">Page 2 With More</a></li> <li><a href="">Page 3</a></li> </ul> </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>

Minimal Hover Menu - Script Codes CSS Codes

/* Default Colors */
body { background: #2a333b;
}
#nav { margin-top: 2.5em;
}
#nav ul li { display: inline-block; padding: 1em; font-size: 1.15em;
}
#nav ul li.current_page_item a { border-top: 0.35em solid #ff3a2e;
}
#nav ul li:last-child { padding-right: 0;
}
#nav ul li ul { display: none; margin: 0; padding: 0; position: absolute; background: #fff; padding: .5em; margin-top: .75em; margin-left: 0em; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.35); border-radius: .25em;
}
#nav ul li ul:before { content: ""; position: absolute; top: -8px; left: 5%; width: 0px; height: 0px; border-style: solid; border-width: 0 5px 8px 5px; border-color: transparent transparent #ffffff transparent;
}
#nav ul li ul li { display: block; margin: 0; padding: 0;
}
#nav ul li ul li a { font-weight: normal; font-size: .65em; color: #5f7385; padding: .5em; display: block; border-radius: .25em;
}
#nav ul li ul li a:hover { border-top: none; color: #2a333b; background: #eaeaea;
}
#nav ul li ul li a:active { position: relative; top: 1px;
}
#nav ul li a { color: #fff; text-transform: uppercase; font-weight: bold; text-decoration: none; padding-top: 1em;
}
#nav ul li a:hover { border-top: 0.35em solid #1f262c; color: #d9d9d9;
}

Minimal Hover Menu - Script Codes JS Codes

// USER SCRIPTS
$("#nav li").hover(function() { $(this).find("ul").slideToggle("fast"); });
$(".navigation").tinyNav({ active: 'selected', header: 'Navigation', label: ''
});
Minimal Hover Menu - Script Codes
Minimal Hover Menu - Script Codes
Home Page Home
Developer Brock Nunn
Username banunn
Uploaded January 06, 2023
Rating 4.5
Size 3,203 Kb
Views 4,048
Do you need developer help for Minimal Hover 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!

Brock Nunn (banunn) Script Codes
Name
Super Simple Slideshow
Simple Article Layout
Article Cards
Angular Users Application
Pixel Perfect Buttons Without PSD
Modern Web Button
Flat UI Alert
Pop Up Question Form
A Pen by Brock Nunn
Off Canvas Navigation
Create amazing marketing copy 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!