0

Is there any option to change color of selected tab with dynamic children of top navigation in sharepoint 2013

  • how do you want to change the color? i mean on hover or on selection and what do you mean by dynamic children – luckydeveloper May 6 '14 at 11:44
  • Can you post the code that you have tried ??? – vinod kumar May 6 '14 at 12:13
  • By dynamic children I just mean links for a heading in top navigation.If link is selected, corresponding heading should be highlighted. – Syama Poulose May 6 '14 at 12:24
1

Here is how I coded my nav. The script will detect which link is clicked and the css will then highlight it. Wrap your navigation with this code in your master page:

<script type="text/javascript">
$(function() {
$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('activeMenu');
});
</script>

<div id="sse50">
  <nav id="sses50">
  <ul>
        <li> <a href="/Page1"><img alt="" src="Navigation/Page1.png" ></a></li>
        <li> <a href="/Page2"><img src="Navigation/Page2.png" ></a></li>
        <li> <a href="/Page3"><img src="Navigation/Page3.png" ></a></li>
  </ul>
  </nav>
</div>

CSS:

#sse50 
{
  width:90%;
  padding:0px;/*changing its value will give menu margins to its container*/
  text-align:center;
  border-radius: 20px;
}
#sses50
{
  margin:0 auto;/*If you don't want the menu center aligned, remove this line and above  text-align:center*/

}

#sses50 ul, #sses50 li
{
  display: inline;
  list-style-type: none;padding: 0;margin: 0;border:0;background-image:none;
}

#sses50 a.activeMenu
{
background:#005d84;
border-radius:25px 25px 25px 25px;
margin:7px 0px 7px 0px;
padding: 10px 10px 10px 10px;/*This defines the size of each menu item*/
}
#sse50 img
{
width:100%;
}
#sses50 a
{
  text-align: center;
  display: inline-block;
  text-decoration: none;    
  width:10%;
  opacity: 0.85;
}

#sses50 a:hover, #sses50 a.current
{
/*Hover effect*/
opacity: 1.0; 
background:#005d84;
border-radius:25px 25px 25px 25px;
transition: all 0.2s linear;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.