純粋なCSSを使用してメニューの下の矢印をスライドさせる

メニューをホバリングすると、矢印が左から左にスライドして、現在ホバーしているメニュー項目になります。純粋なCSSを使用してメニューの下の矢印をスライドさせる

JavaScriptでは、矢印要素の「左」プロパティでマウスを動かして再生するイベントをバインドしますが、純粋なcss3アニメーションソリューションを使用できるかどうかは疑問です。

矢印は、このスレッド Show border triangle in navbar using CSS

に似ていますが、私はそれを表示したくないと私は矢印を常に表示したいhide-、それは私が「メニューに応じて右から左にスライドしていることmが現在ホバリングしています。

これは私が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: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -moz-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -o-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    transition: all 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>

Sample JSFiddle

出典

2016-07-12 Ziv Weissman

、あなたは次のように行うことができます。

$(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: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -moz-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -o-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    transition: all 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のみ

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: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -moz-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -o-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    transition: all 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>

出典

2016-07-13 19:19:06 LGSon

よさそうだ、お時間をいただき、ありがとうございます。 –

私は "アクティブ"タブのサポートを追加しました。javascriptはクリックのためのものです。これはブートストラップタブによって追加されたためです。今は私のニーズに完璧です。 –

@ZivWeissman 2：ndサンプルで更新、CSSのみを使用しているアクティブなタブ（_no script_に移動したい場合） – LGSon

純粋なCSSを使用してメニューの下の矢印をスライドさせる

答えて

関連する問題