アクティブなメニューを作りなさい

私はあなたがそれを押さえたときに下の矢印を示すメニューを持っているが、あなたがそれを押したときにも矢印を表示したい。ここでアクティブなメニューを作りなさい

はcodepenのコードです：https://codepen.io/ouchie/pen/gMMegZ

HTML

<div id="menu"> 
     <ul> 
      <li><a href="index.html"><img src="Image/home-128.png" width="27" height="27" id="menu-img" />Startseite</a></li> 
      <li><a href="Pages/Anfahrt.html"><img src="Image/Map.png" width="27" height="27" id="menu-img" />Anfahrt</a></li> 
      <li><a href="Pages/Kontakt.html"><img src="Image/Contact.png" width="27" height="27" id="menu-img" />Kontakt</a></li> 
      <li><a href="Pages/Speisekarte.html"><img src="Image/Menu.png" width="27" height="27" id="menu-img" />Speisekarte</a></li> 
      <li><a href="Pages/Galerie.html"><img src="Image/Gallery.png" width="27" height="27" id="menu-img" />Galerie</a></li> 

     </ul> 
    </div>

は、これは私が使用するCSSです。私はこれを作っていなかったが、私はあなたが追加することができ、インターネット

CSS

#menu { 
position:relative; 
list-style:none; 
float:left; 
width:800px; 
height:60px; 
text-align:center; 
} 

#menu li { 
float:left; 
text-decoration:none; 
display:block; 
font-family:Franklin Gothic Heavy, Gadget, sans-serif; 
height:50px; 
text-align:center; 
line-height:50px; 
} 

#menu ul{ 
display:inline-block; 
list-style-type: none; 
} 

#menu li a { 
position:relative; 
display:inline; 
padding:11px 27px; 
overflow:hidden; 
text-decoration:none; 
text-align:center; 
font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif; 
text-transform:capitalize; 
font-weight:bold; 
color:#000; 
border-bottom:7px solid #959393; 
background:#979393; 
background-image: -webkit-linear-gradient(top, #ffffff, #EDF1F2); 
background-image: -moz-linear-gradient(top, #ffffff, #EDF1F2); 
background-image: -ms-linear-gradient(top, #ffffff, #EDF1F2); 
background-image: -o-linear-gradient(top, #ffffff, #EDF1F2); 
background-image: linear-gradient(to bottom, #ffffff, #EDF1F2); 
-moz-transition:all 0.25s ease; 
-webkit-transition:all 0.25s ease; 
-o-transition:all 0.25s ease; 
transition:all 0.25s ease; 
opacity:0.68; 
} 

#menu li:nth-child(2n-1) a:hover { 
border-bottom-color:#FF0000; 
} 

#menu li:nth-child(2n) a:hover { 
border-bottom-color:#FF0000; 
} 

#menu li:nth-child(2n-1) a:hover::before { 
position:absolute; 
content:''; 
width:0; 
height:0; 
border-left:11.5px solid transparent; 
border-right:11.5px solid transparent; 
border-bottom:11.5px solid #FF0000; 
right:45%; 
bottom:0; 
} 

#menu li:nth-child(2n) a:hover::before { 
position:absolute; 
content:''; 
width:0; 
height:0; 
border-left:11.5px solid transparent; 
border-right:11.5px solid transparent; 
border-bottom:11.5px solid #FF0000; 
right:45%; 
bottom:0; 
} 

#menu li a:hover { 
color:#FF0000; 
text-shadow:inset 0 0 8px 0 red; 
-moz-transition:all 0.25s ease; 
-webkit-transition:all 0.25s ease; 
-o-transition:all 0.25s ease; 
transition:all 0.25s ease; 
}

出典

2016-06-16 Joey

チェックアウト：target' –

Iそれは既にやったが、うまくいかなかった。それをどこに追加するか分かりません。 – Joey

申し訳ありませんが、私は '：target'を意味しました：https://css-tricks.com/on-target/ –

これを試してください。それはインデックスページのために働くでしょう。別のページのために少し変更する必要があります。

HTML：

<div id="menu"> 
    <ul> 
     <li><a href="index.html"><img src="Image/home-128.png" width="27" height="27" id="menu-img" />Startseite</a></li> 
     <li><a href="Pages/Anfahrt.html"><img src="Image/Map.png" width="27" height="27" id="menu-img" />Anfahrt</a></li> 
     <li><a href="Pages/Kontakt.html"><img src="Image/Contact.png" width="27" height="27" id="menu-img" />Kontakt</a></li> 
     <li><a href="Pages/Speisekarte.html"><img src="Image/Menu.png" width="27" height="27" id="menu-img" />Speisekarte</a></li> 
     <li><a href="Pages/Galerie.html"><img src="Image/Gallery.png" width="27" height="27" id="menu-img" />Galerie</a></li> 
    </ul> 
</div>

CSS：

#menu { 
    position: relative; 
    list-style: none; 
    float: left; 
    width: 800px; 
    height: 60px; 
    text-align: center; 
} 

#menu li { 
    float: left; 
    text-decoration: none; 
    display: block; 
    font-family: Franklin Gothic Heavy, Gadget, sans-serif; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
} 

#menu ul { 
    display: inline-block; 
    list-style-type: none; 
} 

#menu li a { 
    position: relative; 
    display: inline; 
    padding: 11px 27px; 
    overflow: hidden; 
    text-decoration: none; 
    text-align: center; 
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'DejaVu Sans Condensed', sans-serif; 
    text-transform: capitalize; 
    font-weight: bold; 
    color: #000; 
    border-bottom: 7px solid #959393; 
    background: #979393; 
    background-image: -webkit-linear-gradient(top, #ffffff, #EDF1F2); 
    background-image: -moz-linear-gradient(top, #ffffff, #EDF1F2); 
    background-image: -ms-linear-gradient(top, #ffffff, #EDF1F2); 
    background-image: -o-linear-gradient(top, #ffffff, #EDF1F2); 
    background-image: linear-gradient(to bottom, #ffffff, #EDF1F2); 
    -moz-transition: all 0.25s ease; 
    -webkit-transition: all 0.25s ease; 
    -o-transition: all 0.25s ease; 
    transition: all 0.25s ease; 
    opacity: 0.68; 
} 

#menu li:nth-child(2n-1) a:hover { 
    border-bottom-color: #FF0000; 
} 

#menu li:nth-child(2n) a:hover { 
    border-bottom-color: #FF0000; 
} 

#menu li:nth-child(2n-1) a:hover::before { 
    position: absolute; 
    content: ''; 
    width: 0; 
    height: 0; 
    border-left: 11.5px solid transparent; 
    border-right: 11.5px solid transparent; 
    border-bottom: 11.5px solid #FF0000; 
    right: 45%; 
    bottom: 0; 
} 

#menu li:nth-child(2n) a:hover::before { 
    position: absolute; 
    content: ''; 
    width: 0; 
    height: 0; 
    border-left: 11.5px solid transparent; 
    border-right: 11.5px solid transparent; 
    border-bottom: 11.5px solid #FF0000; 
    right: 45%; 
    bottom: 0; 
} 

#menu li a:hover { 
    color: #FF0000; 
    text-shadow: inset 0 0 8px 0 red; 
    -moz-transition: all 0.25s ease; 
    -webkit-transition: all 0.25s ease; 
    -o-transition: all 0.25s ease; 
    transition: all 0.25s ease; 
} 
#menu li a.active { 
    color: #FF0000; 
    text-shadow: inset 0 0 8px 0 red; 
    -moz-transition: all 0.25s ease; 
    -webkit-transition: all 0.25s ease; 
    -o-transition: all 0.25s ease; 
    transition: all 0.25s ease; 
} 
#menu li a.active { 
    border-bottom-color: #FF0000; 
} 
#menu li a.active::before { 
    position: absolute; 
    content: ''; 
    width: 0; 
    height: 0; 
    border-left: 11.5px solid transparent; 
    border-right: 11.5px solid transparent; 
    border-bottom: 11.5px solid #FF0000; 
    right: 45%; 
    bottom: 0; 
}

のJavaScript（jQueryの）：擬似セレクター `

var URL = window.location.pathname; // Gets page name 
var page = URL.substring(URL.lastIndexOf('/') + 1); 
console.log(page); 
$('#menu ul li a').each(function() { 
    if($(this).attr('href') == page) { 
     alert('hi'); 
     $(this).addClass('active'); 
    } 
});

Demo (CodePen)

出典

2016-06-16 14:05:39 Maharajan

他のページの場合は、Pages/Anfahrt.htmlなどの他のページでindex.htmlのような正確なページを知っている必要があります。anfahrt.htmlを見つけてページの値を確認するためのsplitオプションを使用します。 – Maharajan

.jsファイルを作成しますか？そこにJqueryコードを挿入し、jsファイルにリンクする

でそれを見つけた：フォーカスと：アクティブ疑似クラスはどこでもあなたがホバーを持っています。また、ページ上にあり、対応するリンクを選択したい場合は、ロジックを使用して現在のクラスを追加します。このクラスには、hoverと同じCSSが必要です。

例：後

#menu li:nth-child(2n-1) a:hover::before { ... }

：：前

あなたはプログラムであなたに現在のクラスを追加する必要があります https://codepen.io/anon/pen/gMMeoE

：

#menu li:nth-child(2n-1) a:hover::before, 
#menu li:nth-child(2n-1) a:focus::before 
#menu li:nth-child(2n-1) :target::before { ... }

は私codepen例を参照してください。現在アクティブなメニュー項目です。

出典

2016-06-16 13:04:50

彼はおそらくクリック後に効果を持続したいと思います。 '：focus'は、ユーザーが他の場所をクリックしない限り、効果を維持します。 '：target'はここに行く方法です。 –

あなたは正しいです、私は私の答えを更新します –

はい、あなたはあなたがどのメニューにいるかを見ることができます。 – Joey

アクティブなメニューを作りなさい

答えて

関連する問題