"menu"
Bootstrap 4.1.1 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - Navigation hover effect</title> <style> *{ margin: 0; padding: 0; } body{ font-size: 12px; background: #eff; } .navigation{ margin: 100px auto; background: #fff; overflow: hidden; width: 690px; box-shadow: 0 5px 3px 2px rgba(0, 0, 0, 0.2); } .navigation li{ width: 160px; border-left: 5px solid #666; float: left; list-style-type: none; padding: 10px 50px 10px 15px; -webkid-transition: all 0.3 ease-in; -moz-transition: all 0.3 ease-in; -o-transition: all 0.3 ease-in; } .navigation li:hover{ background: #000; color: #fff; } .navigation li p{ font-size: 11px; color: #999; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; } .navigation li:hover p { color: #ccc; padding-left: 5px; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <ul class="navigation"> <li> <h2>Home</h2> <p>homeee</p> </li> <li> <h2>About</h2> <p>about us</p> </li> <li> <h2>Contacts</h2> <p>contacts</p> </li> </ul> </body> </html>

Related: See More

Material Dashboard Pro React
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: