CSSメニュー

CSSメニュー

a:hover,a:focus{ 
 
    text-decoration: none; 
 
    outline: none; 
 
} 
 
.tab .nav-tabs{ 
 
    border-bottom: 2px solid #ddd; 
 
} 
 
.tab .nav-tabs li{ 
 
    margin: 0 2px 0 0; 
 
    position: relative; 
 
} 
 
.tab .nav-tabs li.active:before{ 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -28px; 
 
    left: 68px; 
 
    border: 14px solid transparent; 
 
    border-top-color: red; 
 
} 
 
.tab .nav-tabs li.active:after{ 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -24px; 
 
    left: 81px; 
 
    border: 12px solid transparent; 
 
    /*border-top-color: #fff;*/ 
 
} 
 
.tab .nav-tabs li a{ 
 
    border: none; 
 
    padding: 20px 53px; 
 
    font-size: 14px; 
 
    color: #777; 
 
    background: transparent; 
 
    border-radius: 0; 
 
    text-decoration: none; 
 
} 
 
/* .tab .nav-tabs li a:hover{ 
 
    color: red; 
 
} */ 
 
.tab .nav-tabs li a i{ 
 
    display: block; 
 
    text-align: center; 
 
    margin-bottom: 5px; 
 
} 
 
.tab .nav-tabs li.active a, 
 
.tab .nav-tabs li.active a:focus, 
 
.tab .nav-tabs li.active a:hover{ 
 
    border: none; 
 
    background: transparent; 
 
    color: red; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    transition: background 0.20s linear 0s; 
 
} 
 
.tab .tab-content{ 
 
    font-size: 14px; 
 
    color: #777; 
 
    background: #fff; 
 
    line-height: 25px; 
 
    padding: 10px; 
 
} 
 
.tab .tab-content h3{ 
 
    font-size: 26px; 
 
} 
 
@media only screen and (max-width: 479px) { 
 
    .tab .nav-tabs li a{ 
 
     padding: 10px; 
 
    } 
 
    .tab .nav-tabs li.active:before{ 
 
     left: 28px; 
 
     bottom: -24px; 
 
     border-width: 12px; 
 
    } 
 
    .tab .nav-tabs li.active:after{ 
 
     left: 30px; 
 
     bottom: -20px; 
 
     border-width: 10px; 
 
    } 
 
} 
 
span.round-tabs{ 
 
\t width: 15px; 
 
\t height: 15px; 
 
\t line-height: 70px; 
 
\t display: inline-block; 
 
\t border-radius: 100px; 
 
\t background: white; 
 
\t z-index: 2; 
 
\t position: absolute; 
 
\t left: 45%; 
 
\t text-align: center; 
 
\t font-size: 25px; 
 
\t top: 89%; 
 
} 
 

 
span.round-tabs.one{ 
 
\t border: 2px solid #ddd; 
 
\t color: #ddd; 
 
} 
 

 
li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five { 
 
\t background: #f8f8f8 !important; 
 
\t border: 2px solid #f8f8f8; 
 
\t color: #fff; 
 
} 
 

 
span.round-tabs.two{ 
 
\t border: 2px solid #ddd; 
 
\t color: #ddd; 
 
} 
 

 
span.round-tabs.three{ 
 
\t border: 2px solid #ddd; 
 
\t color: #ddd; 
 
} 
 

 
.nav-tabs > li.active > a span.round-tabs{ 
 
\t background: #fafafa; 
 
}

<div class="tab" role="tabpanel"> 
 
<!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"> 
 
     <a href="#Section1" aria-controls="home" role="tab" data-toggle="tab" id="id1">Mission 
 
     <span class="round-tabs one"><i class="icon icon-pencil"></i></span> 
 
     </a> 
 
    </li> 
 
    <li role="presentation"> 
 
     <a href="#Section2" aria-controls="home" role="tab" data-toggle="tab" id="id2">Mission 
 
     <span class="round-tabs one"><i class="icon icon-pencil"></i></span> 
 
     </a> 
 
    </li> 
 
    <li role="presentation"> 
 
     <a href="#Section3" aria-controls="home" role="tab" data-toggle="tab" id="id3">Mission 
 
     <span class="round-tabs one"><i class="icon icon-pencil"></i></span> 
 
     </a> 
 
    </li> 
 
    <li role="presentation"> 
 
     <a href="#Section4" aria-controls="home" role="tab" data-toggle="tab" id="id4">Mission 
 
     <span class="round-tabs one"><i class="icon icon-pencil"></i></span> 
 
     </a> 
 
    </li> 
 
        
 
    </ul> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane fade in active" id="Section1"> 
 
     <h3>Section 1</h3> 
 
     <p>text here</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane fade" id="Section2"> 
 
     <h3>Section 2</h3> 
 
     <p>text here</p> 
 
     </div> 
 
     <div role="tabpanel" class="tab-pane fade" id="Section3"> 
 
     <h3>Section 5</h3> 
 
     <p>text here</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane fade" id="Section4"> 
 
     <h3>Section 4</h3> 
 
     <p>text here</p> 
 
     </div> 
 
    </div> 
 
</div>

enter image description here こんにちは、私はデザインすることができますが、私は上のクリックしたときに添付code.littleビットを試してみました別のメニュー矢印は、メニューの下に正確に表示されません。別の場所に表示されます。私は画像に表示されているものと同じメニューデザインを実装できます。

出典

2017-05-12 Lakhan Khandelwal

矢印すなわちの

まず正しいz-indexは、今あなたが以下のようにdisplay arrowからclick、

$(document).ready(function(){ 
 
\t $("ul > li").on("click",function(){ 
 
    \t $("ul > li").filter(".active").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    }); 
 
});

a:hover,a:focus{ 
 
    text-decoration: none; 
 
    outline: none; 
 
} 
 
.tab .nav-tabs{ 
 
    border-bottom: 2px solid #ddd; 
 
} 
 
.tab .nav-tabs li{ 
 
    margin: 0 2px 0 0; 
 
    position: relative; 
 
} 
 
.tab .nav-tabs li.active:before{ 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -28px; 
 
    left: 68px; 
 
    border: 14px solid transparent; 
 
    border-top-color: red; 
 
    z-index:9; 
 
} 
 
.tab .nav-tabs li.active:after{ 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -24px; 
 
    left: 81px; 
 
    border: 12px solid transparent; 
 
    /*border-top-color: #fff;*/ 
 
} 
 
.tab .nav-tabs li a{ 
 
    border: none; 
 
    padding: 20px 53px; 
 
    font-size: 14px; 
 
    color: #777; 
 
    background: transparent; 
 
    border-radius: 0; 
 
    text-decoration: none; 
 
} 
 
/* .tab .nav-tabs li a:hover{ 
 
    color: red; 
 
} */ 
 
.tab .nav-tabs li a i{ 
 
    display: block; 
 
    text-align: center; 
 
    margin-bottom: 5px; 
 
} 
 
.tab .nav-tabs li.active a, 
 
.tab .nav-tabs li.active a:focus, 
 
.tab .nav-tabs li.active a:hover{ 
 
    border: none; 
 
    background: transparent; 
 
    color: red; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    transition: background 0.20s linear 0s; 
 
} 
 
.tab .tab-content{ 
 
    font-size: 14px; 
 
    color: #777; 
 
    background: #fff; 
 
    line-height: 25px; 
 
    padding: 10px; 
 
} 
 
.tab .tab-content h3{ 
 
    font-size: 26px; 
 
} 
 
@media only screen and (max-width: 479px) { 
 
    .tab .nav-tabs li a{ 
 
     padding: 10px; 
 
    } 
 
    .tab .nav-tabs li.active:before{ 
 
     left: 28px; 
 
     bottom: -24px; 
 
     border-width: 12px; 
 
    } 
 
    .tab .nav-tabs li.active:after{ 
 
     left: 30px; 
 
     bottom: -20px; 
 
     border-width: 10px; 
 
    } 
 
} 
 
span.round-tabs{ 
 
\t width: 15px; 
 
\t height: 15px; 
 
\t line-height: 70px; 
 
\t display: inline-block; 
 
\t border-radius: 100px; 
 
\t background: white; 
 
\t z-index: 2; 
 
\t position: absolute; 
 
\t left: 45%; 
 
\t text-align: center; 
 
\t font-size: 25px; 
 
\t top: 89%; 
 
} 
 

 
span.round-tabs.one{ 
 
\t border: 2px solid #ddd; 
 
\t color: #ddd; 
 
} 
 

 
li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five { 
 
\t background: #f8f8f8 !important; 
 
\t border: 2px solid #f8f8f8; 
 
\t color: #fff; 
 
} 
 

 
span.round-tabs.two{ 
 
\t border: 2px solid #ddd; 
 
\t color: #ddd; 
 
} 
 

 
span.round-tabs.three{ 
 
\t border: 2px solid #ddd; 
 
\t color: #ddd; 
 
} 
 

 
.nav-tabs > li.active > a span.round-tabs{ 
 
\t background: #fafafa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="tab" role="tabpanel"> 
 
<!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"> 
 
     <a href="#Section1" aria-controls="home" role="tab" data-toggle="tab" id="id1">Mission 
 
     <span class="round-tabs one"><i class="icon icon-pencil"></i></span> 
 
     </a> 
 
    </li> 
 
    <li role="presentation"> 
 
     <a href="#Section2" aria-controls="home" role="tab" data-toggle="tab" id="id2">Mission 
 
     <span class="round-tabs one"><i class="icon icon-pencil"></i></span> 
 
     </a> 
 
    </li> 
 
    <li role="presentation"> 
 
     <a href="#Section3" aria-controls="home" role="tab" data-toggle="tab" id="id3">Mission 
 
     <span class="round-tabs one"><i class="icon icon-pencil"></i></span> 
 
     </a> 
 
    </li> 
 
    <li role="presentation"> 
 
     <a href="#Section4" aria-controls="home" role="tab" data-toggle="tab" id="id4">Mission 
 
     <span class="round-tabs one"><i class="icon icon-pencil"></i></span> 
 
     </a> 
 
    </li> 
 
        
 
    </ul> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane fade in active" id="Section1"> 
 
     <h3>Section 1</h3> 
 
     <p>text here</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane fade" id="Section2"> 
 
     <h3>Section 2</h3> 
 
     <p>text here</p> 
 
     </div> 
 
     <div role="tabpanel" class="tab-pane fade" id="Section3"> 
 
     <h3>Section 5</h3> 
 
     <p>text here</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane fade" id="Section4"> 
 
     <h3>Section 4</h3> 
 
     <p>text here</p> 
 
     </div> 
 
    </div> 
 
</div>

出典

2017-05-12 10:54:27 frnt

@Lakhan Khandelwalあなたのコードだけで、細かい作業をしていることを達成できるjQuery、9に設定z-indexを使用する前に疑似セレクタを整列させます。 – frnt

働いてくれてありがとう。 –

ようこそ@LakhanKhandelwal :-)、私はliタグのアクティブなクラスを削除するjQueryコードでいくつかの変更を加えました。 – frnt

答えて

関連する問題