"Menu Hover Design"
Bootstrap 4.0.0 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <h1 class="stitched">Prakash Prajapati</h1> <ul> <li class="active"><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> <li class="slide"></li> </ul> <div class="arrow-up"></div> <div class="arrow-down"></div> <div class="arrow-left"></div> <div class="arrow-right"></div>
body { margin:0; padding:0; margin: 0 0 20px 0; background-color: #eaeaea; background-size: 20px 20px; background-image: -webkit-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px), -webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px); background-image: -moz-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px), -moz-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px); background-image: -o-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px), -o-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px); background-image: repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px), repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px); font-family:sans-serif; } ul { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; background:gold; border-radius:30px; overflow:hidden; box-shadow:0 0 0 5px #333; margin:0; padding:0; } ul li { list-style:none; width:150px; } ul li:hover { background:tomato; } ul li a:hover { text-decoration:none; color:#000; } ul li a { display:block; padding:20px; text-align:center; color:#fff; transition:0.5s; text-decoration:none; } ul li.active a { color:#262626; background:tomato; } .slide { position:absolute; width:150px; height:100px; top:0; left:0; background:#fff; z-index:-1; transition:0.5; opacity:0; } ul li:nth-child(1).active ~ .slide { left:0; opacity:1; } ul li:nth-child(2).active ~ .slide { left:150px; opacity:1; } ul li:nth-child(3).active ~ .slide { left:300px; opacity:1; } ul li:nth-child(4).active ~ .slide { left:450px; opacity:1; } ul li:nth-child(5).active ~ .slide { left:600px; opacity:1; } .stitched { padding: 20px; margin: 10px 33%; background: #ff0030; color: #fff; border: 2px dashed #fff; border-radius: 10px; box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); text-shadow: -1px -1px #aa3030; font-weight: normal; text-align: center; } .arrow-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid black; position: absolute; top: calc(50% - 52px); left: calc(50% - 20px); z-index:-1; } .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; position: absolute; bottom: calc(50% - 52px); left: calc(50% - 20px); z-index:-1; } .arrow-right { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid green; position: absolute; top: calc(50% - 20px); right: calc(35% - 75px); z-index:-1; } .arrow-left { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right:20px solid blue; position: absolute; top: calc(50% - 20px); left: calc(35% - 75px); z-index:-1; } h1:first-child:first-letter { color: #fff; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 0px; padding-left: 0px; }
$(document).ready(function(){ $('li').on('click',function(){ $(this).siblings().removeClass('active'); $(this).addClass('active'); }); });

Related: See More


Questions / Comments: