MVC Masterpage: Menüde İlgili Sayfa

Doğru bir başlık mı bilmiyorum. Peki MVC olarak sınırlı bir kullanım mı ? Tabi ki hayır. Ancak MVC bir projede ihtiyacım olduğu için bu notu düşüyorum.

İhtiyaç Master Page ‘e eklediğim bir menü de ilgili sayfa hangisiyse o sayfayı menüde işaretlemek.

 

CSS

.masthead-nav > li {
  display: inline-block;
  }
  .masthead-nav > li + li {
  margin-left: 20px;
  }
  .masthead-nav > li > a {
  padding-right: 0;
  padding-left: 0;
  font-size: 20px;
  font-weight: bold;
  color: #fff; /* IE8 proofing */
  color: rgba(255,255,255,.75);
  border-bottom: 2px solid transparent;
  }
  .masthead-nav > li > a:hover,
  .masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #a9a9a9;
  border-bottom-color: rgba(255,255,255,.25);
  }
  .masthead-nav > .active > a,
  .masthead-nav > .active > a:hover,
  .masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
  }

 

 

jQuery / JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
 jQuery(function () {
 jQuery('.masthead-nav li').each(function () {
 var href = jQuery(this).find('a').attr('href');
 if (href === window.location.pathname) {
 jQuery(this).addClass('active');
 }
 });
 });
 </script>

Örnekte de görebileceğiniz gibi; jQuery ile bulunduğumuz sayfanın url ‘si ni menümüzde ki linkler arasında eşitliyor class=”active” olarak ilgili butona yazdırıyoruz. En sonunda seçili sayfa işaretli olarak menümüz hazır.