CSSでアクティブなメニュー項目をハイライト表示

Question

正常に動作するtopnavメニューを持っていますが、そのメニュー項目がアクティブな場合にホバーイベントに表示される下線を維持したいだけです。私はフォーラムで見つけた多くのソリューションを試しましたが、どうにかしてもうまくいきませんでした。どんな助けもありがとうございます。私は、メニュー項目のドロップダウンを開くためにjsを使用しますが、私はそれを作るために必要だったとは思わない

\t body { 
 
\t margin: auto; 
 
\t } 
 

 
\t .topnavbar { 
 
\t background-color: rgba(20, 180, 255, 1); 
 
\t /*rgba(0,255,150,0.6); #3EDC99*/ 
 
\t -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); 
 
\t -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); 
 
\t box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); 
 
\t } 
 

 
\t .nav { 
 
\t padding: 5px 5px 5px 5px; 
 
\t } 
 

 
\t html { 
 
\t box-sizing: border-box; 
 
\t } 
 

 
\t *, 
 
\t *:before, 
 
\t *:after { 
 
\t box-sizing: inherit; 
 
\t } 
 

 
\t body { 
 
\t background-color: rgba(245, 245, 245, 1)/*#3498db; */ 
 
\t } 
 

 
\t .nav { 
 
\t width: 550px; 
 
\t margin: 0 auto 0 auto; 
 
\t text-align: center; 
 
\t } 
 

 

 
\t /* Navigation */ 
 

 
\t .nav { 
 
\t font-family: Verdana, Georgia, Arial, sans-serif; 
 
\t font-size: 14px; 
 
\t } 
 

 
\t .nav-items { 
 
\t padding: 0; 
 
\t list-style: none; 
 
\t } 
 

 

 
\t /* color of menu links 
 
\t span \t { 
 
\t \t 
 
\t \t color:yellow; 
 
\t } 
 
\t */ 
 

 
\t .nav-item { 
 
\t display: inline-block; 
 
\t margin-right: 25px; 
 
\t } 
 

 
\t .nav-item:last-child { 
 
\t margin-right: 0; 
 
\t } 
 

 
\t .nav-link, 
 
\t .nav-link:link, 
 
\t .nav-link:visited, 
 
\t .nav-link:active, 
 
\t .submenu-link, 
 
\t .submenu-link:link, 
 
\t .submenu-link:visited, 
 
\t .submenu-link:active { 
 
\t display: block; 
 
\t position: relative; 
 
\t font-size: 14px; 
 
\t letter-spacing: 1px; 
 
\t cursor: pointer; 
 
\t text-decoration: none; 
 
\t outline: none; 
 
\t color: blue; 
 
\t } 
 

 
\t .nav-link::before { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 3px; 
 
\t background: rgba(0, 0, 0, 0.2); 
 
\t opacity: 0; 
 
\t -webkit-transform: translate(0, 10px); 
 
\t transform: translate(0, 10px); 
 
\t transition: opacity 0.3s ease, transform 0.3s ease; 
 
\t } 
 

 
\t .nav-link:hover::before, 
 
\t .nav-link:hover::before { 
 
\t opacity: 1; 
 
\t -webkit-transform: translate(0, 5px); 
 
\t transform: translate(0, 5px); 
 
\t } 
 

 
\t .dropdown { 
 
\t position: relative; 
 
\t } 
 

 
\t .dropdown .nav-link { 
 
\t padding-right: 15px; 
 
\t height: 17px; 
 
\t line-height: 17px; 
 
\t } 
 

 
\t .dropdown .nav-link::after { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t top: 6px; 
 
\t right: 0; 
 
\t border: 5px solid transparent; 
 
\t border-top-color: blue; 
 
\t /*small triangle showing drop down menu*/ 
 
\t } 
 

 
\t .submenu { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t left: 50%; 
 
\t z-index: 100; 
 
\t width: 200px; 
 
\t margin-left: -100px; 
 
\t background: blue; 
 
\t border-radius: 3px; 
 
\t line-height: 1.46667; 
 
\t margin-top: -5px; 
 
\t box-shadow: 0 0 8px rgba(0, 0, 0, .3); 
 
\t opacity: 0; 
 
\t -webkit-transform: translate(0, 0) scale(.85); 
 
\t transform: translate(0, 0)scale(.85); 
 
\t transition: transform 0.1s ease-out, opacity 0.1s ease-out; 
 
\t pointer-events: none; 
 
\t } 
 

 
\t .submenu::after, 
 
\t .submenu::before { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t bottom: 100%; 
 
\t left: 50%; 
 
\t margin-left: -10px; 
 
\t border: 10px solid transparent; 
 
\t height: 0; 
 
\t } 
 

 
\t .submenu::after { 
 
\t border-bottom-color: blue; 
 
\t } 
 

 
\t .submenu::before { 
 
\t margin-left: -13px; 
 
\t border: 13px solid transparent; 
 
\t border-bottom-color: rgba(0, 0, 0, .1); 
 
\t -webkit-filter: blur(1px); 
 
\t filter: blur(1px); 
 
\t } 
 

 
\t .submenu-items { 
 
\t list-style: none; 
 
\t padding: 10px 0; 
 
\t } 
 

 
\t .submenu-item { 
 
\t display: block; 
 
\t text-align: left; 
 
\t } 
 

 
\t .submenu-link, 
 
\t .submenu-link:link, 
 
\t .submenu-link:visited, 
 
\t .submenu-link:active { 
 
\t color: #3498db; 
 
\t padding: 10px 20px; 
 
\t } 
 

 
\t .submenu-link:hover { 
 
\t text-decoration: underline; 
 
\t } 
 

 
\t .submenu-seperator { 
 
\t height: 0; 
 
\t margin: 12px 10px; 
 
\t border-top: 1px solid #eee; 
 
\t } 
 

 
\t .show-submenu .submenu { 
 
\t opacity: 1; 
 
\t -webkit-transform: translate(0, 25px) scale(1); 
 
\t transform: translate(0, 25px) scale(1); 
 
\t pointer-events: auto; 
 
\t } 
 

 
\t .submenu-link { 
 
\t color: red; 
 
\t }

<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}"> 
 

 
<!--Top Navigation--> 
 
<nav role="navigation" class="nav" id="topnav"> 
 
    <ul class="nav-items"> 
 
    <li class="nav-item"> 
 
     <a href="#" class="nav-link"><span>Home</span></a> 
 
    </li> 
 
    <li class="nav-item "> 
 
     <a href="#" class="nav-link"><span>Media</span></a> 
 
     <nav class="submenu"> 
 
     <ul class="submenu-items"> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li> 
 
     </ul> 
 
     </nav> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a href="#" class="nav-link"><span>Search</span></a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a href="#" class="nav-link"><span>Report</span></a> 
 
    </li> 
 
    <li class="nav-item dropdown"> 
 
     <a href="#" class="nav-link"><span>More</span></a> 
 
     <nav class="submenu"> 
 
     <ul class="submenu-items"> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">About</a></li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li> 
 
      <li class="submenu-item"> 
 
      <hr class="submenu-seperator" /> 
 
      </li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li> 
 
     </ul> 
 
     </nav> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 

 
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>

：ここ

とはhtmリットルとcssスニペットです今よりも拡大して投稿してください。

Answer 1

私が心配する限り、達成しようとしていることは、JSで可能であるか、要素にクラスを追加することです。しかし、あなたはCSSだけを望むので、私はそれが可能だとは思わない。 uはウルの心を変更した場合、このクラスを追加することでそれを行う方法であるために

：

<script> 
    $('.nav-items li a').click(function(event){ 
     event.preventDefault(); 
     $('.nav-items li a').removeClass('active') 
     $(this).addClass('active'); 
    }); 
    </script> 

EDIT：JavaScriptがHow to give a different color to the current selected list item than other items in html?

、jQueryのは、実際に、私はuはちょうどこれを追加することができると思います：これはもっと必要なものです

<script> 
     var page = window.location.pathname; 
     var elements = document.getElementsByClassname("nav-link"); 
     if(page == "/index/"){ 
      elements[0].style.textDecoration="underline"; 
     } 
    </script> 

Answer 2

新しいクラスを作成することができます。 .is-active。あなたのCSSで

<li class="nav-item"> 
    <a href="#" class="nav-link is-active"><span>Home</span></a> 
</li> 

あなたは:hoverとしてis-activeクラスを同じようにスタイル：ホームページでは、このように、あなたのナビゲーションでホームリンクにこのクラスを追加することができます。

サイトの新しいページごとに、HTMLの.is-activeクラスの場所を適切なページに変更します。あなたのウェブサイトがはるかに大きくて複雑な場合は、プログラムでこれを行うことができます。

Basicの例：active`セレクタ：

body { 
 
    margin: auto; 
 
} 
 

 
.topnavbar { 
 
    background-color: rgba(20, 180, 255, 1); 
 
    /*rgba(0,255,150,0.6); #3EDC99*/ 
 
    -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); 
 
    -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); 
 
    box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); 
 
} 
 

 
.nav { 
 
    padding: 5px 5px 5px 5px; 
 
} 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    background-color: rgba(245, 245, 245, 1)/*#3498db; */ 
 
} 
 

 
.nav { 
 
    width: 550px; 
 
    margin: 0 auto 0 auto; 
 
    text-align: center; 
 
} 
 

 

 
/* Navigation */ 
 

 
.nav { 
 
    font-family: Verdana, Georgia, Arial, sans-serif; 
 
    font-size: 14px; 
 
} 
 

 
.nav-items { 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 

 
/* color of menu links 
 
\t span \t { 
 
\t \t 
 
\t \t color:yellow; 
 
\t } 
 
\t */ 
 

 
.nav-item { 
 
    display: inline-block; 
 
    margin-right: 25px; 
 
} 
 

 
.nav-item:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.nav-link, 
 
.nav-link:link, 
 
.nav-link:visited, 
 
.nav-link:active, 
 
.submenu-link, 
 
.submenu-link:link, 
 
.submenu-link:visited, 
 
.submenu-link:active { 
 
    display: block; 
 
    position: relative; 
 
    font-size: 14px; 
 
    letter-spacing: 1px; 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
    outline: none; 
 
    color: blue; 
 
} 
 

 
.nav-link::before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 3px; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    opacity: 0; 
 
    -webkit-transform: translate(0, 10px); 
 
    transform: translate(0, 10px); 
 
    transition: opacity 0.3s ease, transform 0.3s ease; 
 
} 
 

 
.nav-link:hover::before, 
 
.nav-link:focus::before { 
 
    opacity: 1; 
 
    -webkit-transform: translate(0, 5px); 
 
    transform: translate(0, 5px); 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
} 
 

 
.dropdown .nav-link { 
 
    padding-right: 15px; 
 
    height: 17px; 
 
    line-height: 17px; 
 
} 
 

 
.dropdown .nav-link::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 6px; 
 
    right: 0; 
 
    border: 5px solid transparent; 
 
    border-top-color: blue; 
 
    /*small triangle showing drop down menu*/ 
 
} 
 

 
.submenu { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    z-index: 100; 
 
    width: 200px; 
 
    margin-left: -100px; 
 
    background: blue; 
 
    border-radius: 3px; 
 
    line-height: 1.46667; 
 
    margin-top: -5px; 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, .3); 
 
    opacity: 0; 
 
    -webkit-transform: translate(0, 0) scale(.85); 
 
    transform: translate(0, 0)scale(.85); 
 
    transition: transform 0.1s ease-out, opacity 0.1s ease-out; 
 
    pointer-events: none; 
 
} 
 

 
.submenu::after, 
 
.submenu::before { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    margin-left: -10px; 
 
    border: 10px solid transparent; 
 
    height: 0; 
 
} 
 

 
.submenu::after { 
 
    border-bottom-color: blue; 
 
} 
 

 
.submenu::before { 
 
    margin-left: -13px; 
 
    border: 13px solid transparent; 
 
    border-bottom-color: rgba(0, 0, 0, .1); 
 
    -webkit-filter: blur(1px); 
 
    filter: blur(1px); 
 
} 
 

 
.submenu-items { 
 
    list-style: none; 
 
    padding: 10px 0; 
 
} 
 

 
.submenu-item { 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.submenu-link, 
 
.submenu-link:link, 
 
.submenu-link:visited, 
 
.submenu-link:active { 
 
    color: #3498db; 
 
    padding: 10px 20px; 
 
} 
 

 
.submenu-link:hover { 
 
    text-decoration: underline; 
 
} 
 

 
.submenu-seperator { 
 
    height: 0; 
 
    margin: 12px 10px; 
 
    border-top: 1px solid #eee; 
 
} 
 

 
.show-submenu .submenu { 
 
    opacity: 1; 
 
    -webkit-transform: translate(0, 25px) scale(1); 
 
    transform: translate(0, 25px) scale(1); 
 
    pointer-events: auto; 
 
} 
 

 
.submenu-link { 
 
    color: red; 
 
} 
 

 
.nav-link.is-active::before { 
 
    opacity: 1; 
 
    -webkit-transform: translate(0, 5px); 
 
    transform: translate(0, 5px); 
 
}

<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}"> 
 

 
<!--Top Navigation--> 
 
<nav role="navigation" class="nav" id="topnav"> 
 
    <ul class="nav-items"> 
 
    <li class="nav-item"> 
 
     <a href="#" class="nav-link is-active"><span>Home</span></a> 
 
    </li> 
 
    <li class="nav-item "> 
 
     <a href="#" class="nav-link"><span>Media</span></a> 
 
     <nav class="submenu"> 
 
     <ul class="submenu-items"> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li> 
 
     </ul> 
 
     </nav> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a href="#" class="nav-link"><span>Search</span></a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a href="#" class="nav-link"><span>Report</span></a> 
 
    </li> 
 
    <li class="nav-item dropdown"> 
 
     <a href="#" class="nav-link"><span>More</span></a> 
 
     <nav class="submenu"> 
 
     <ul class="submenu-items"> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">About</a></li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li> 
 
      <li class="submenu-item"> 
 
      <hr class="submenu-seperator" /> 
 
      </li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li> 
 
     </ul> 
 
     </nav> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 

 
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>