$(function() { var $move = $(".move"); $(".right").hover( //mouseenter function() { var setWidth = $(window).width() - $(this).innerWidth() - 10; $(this).prev().css("width", setWidth + "px"); $(".move").css({ "top": $(this).offset().top + "px", "width": $(this).innerWidth() + "px" }); }, //mouseleave function() { $(this).prev().css("width", 0); } ); });
<div id="container"> <div class="move"></div> <ul id="menu"> <li> <div class="side left"><p class="text">Maybe that's what life is... a wink of the eye and wining stars.</p></div> <div class="side right"><p class="text">ABOUT</p></div> </li> <li> <div class="side left"><p class="text">Maybe that's what life is... a wink of the eye and wining stars.</p></div> <div class="side right"><p class="text">It's Me</p></div> </li> <li> <div class="side left"><p class="text">Maybe that's what life is... a wink of the eye and wining stars.</p></div> <div class="side right"><p class="text">Different Size</p></div> </li> <li> <div class="side left"><p class="text">Maybe that's what life is... a wink of the eye and wining stars.</p></div> <div class="side right"><p class="text">L</p></div> </li> <li> <div class="side left"><p class="text">Maybe that's what life is... a wink of the eye and wining stars.</p></div> <div class="side right"><p class="text">OK yo</p></div> </li> </ul> </div>
* { margin: 0; padding: 0; } ul { list-style-type: none; } html { background-color: #444; } #container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #menu { position: relative; top: 50px; font-size: 0; } li { position: relative; width: 100%; height: 50px; margin-bottom: 10px; } .side { position: absolute; display: inline-block; color: #fff; width: auto; box-sizing: border-box; height: 50px; line-height: 40px; } .left { left: 0; font-size: 20px; border-radius: 0 8px 8px 0; width: 0px; overflow: hidden; text-align: right; background-color: #098ae1; transition: width .3s; } .left.on { width: 500px; } .right { right: 0; font-size: 20px; border-radius: 8px 0 0 8px; } .text { display: inline-block; position: relative; box-sizing: border-box; padding: 5px; width: 100%; height: 100%; } .move { position: absolute; right: 0; border-radius: 8px 0 0 8px; background-color: #098ae1; width: 0; height: 50px; transition: all .3s; }