css3 - Using pure CSS to slide an arrow under a menu -
when hovering on menu, i'd arrow slide left menu item i'm hovering on.
in javascript i'd bind event hover , play arrow element's "left" property, wonder if can have pure css3 animated solution.
the arrow similar thread- show border triangle in navbar using css
but don't want appear , hide- want arrow visible , slide right left depending on menu i'm hovering on.
this how if i'd done in js:
var arrele = $("#indication-mark-wrap"); var starthover = $(arrele).css("left"); $("li").mouseenter(function() { var left = $(this).position().left; $(arrele).css("left", left+30); }); $("li").mouseleave(function() { $(arrele).css("left", starthover); });ul { list-style-type: none; padding: 0px; } li { display: inline-block; width: 80px; color: white; background-color: black; height: 50px; } #indication-mark-wrap { position: absolute; left: 38px; top: 56px; background: wheat; -webkit-transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); -moz-transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); -o-transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); -moz-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); -o-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); /* custom */ } .indication-mark { position: relative; display: block; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="menu"> <ul> <li>selection1</li> <li>selection2</li> <li>selection2</li> </ul> </div> <div id="indication-mark-wrap"> <canvas width="20" height="20" class="indication-mark"></canvas> </div>
with change in markup, can this.
$(function(){ $("li").click(function(){ $(".active").removeclass("active"); $(this).addclass("active"); }) });ul { list-style-type: none; padding: 0px; } li { background-color: black; } li:nth-child(-n+3) { display: inline-block; width: 80px; color: white; height: 50px; } #indication-mark-wrap { position: absolute; left: 35px; top: 56px; background: wheat; -webkit-transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); -moz-transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); -o-transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); -moz-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); -o-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); /* custom */ } .indication-mark { position: relative; display: block; } li:nth-child(2):hover ~ li #indication-mark-wrap { left: 118px; } li:nth-child(3):hover ~ li #indication-mark-wrap { left: 200px; } li:nth-child(1).active ~ li #indication-mark-wrap { left: 35px; } li:nth-child(2).active ~ li #indication-mark-wrap { left: 118px; } li:nth-child(3).active ~ li #indication-mark-wrap { left: 200px; } #indication-mark-wrap:before, #indication-mark-wrap:after { content: ""; position: absolute; top: 15px; width: 0; height 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid white; } #indication-mark-wrap:before { top: 14px; border-bottom-color: black; } .active { background-color: darkcyan; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="menu"> <ul> <li class="active">selection1</li> <li>selection2</li> <li>selection2</li> <li class="test"><div id="indication-mark-wrap"></div></li> </ul> </div>css only
ul { list-style-type: none; padding: 0px; } li { background-color: black; } li:nth-child(-n+3) { display: inline-block; width: 80px; color: white; height: 50px; } li:nth-child(-n+3) label { display: inline-block; width: 100%; height: 100%; cursor: inherit; } #indication-mark-wrap { position: absolute; left: 35px; top: 56px; background: wheat; -webkit-transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); -moz-transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); -o-transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); transition: 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); -moz-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); -o-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); /* custom */ } .indication-mark { position: relative; display: block; } #s1, #s2, #s3 { display: none; } #s1:checked ~ ul #indication-mark-wrap { left: 35px; } #s2:checked ~ ul #indication-mark-wrap { left: 118px; } #s3:checked ~ ul #indication-mark-wrap { left: 200px; } li:nth-child(-n+3):hover { background: darkgray; cursor: pointer; } #s1:checked ~ ul li:nth-child(1), #s2:checked ~ ul li:nth-child(2), #s3:checked ~ ul li:nth-child(3) { background-color: darkcyan; cursor: auto; } #indication-mark-wrap:before, #indication-mark-wrap:after { content: ""; position: absolute; top: 15px; width: 0; height 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid white; } #indication-mark-wrap:before { top: 14px; border-bottom-color: black; }<div class="menu"> <input type="radio" id="s1" name="s123" checked="checked"> <input type="radio" id="s2" name="s123"> <input type="radio" id="s3" name="s123"> <ul> <li><label for="s1">selection1</label></li> <li><label for="s2">selection2</label></li> <li><label for="s3">selection3</label></li> <li class="test"><div id="indication-mark-wrap"></div></li> </ul> </div>
Comments
Post a Comment