Is there any option to change color of selected tab with dynamic children of top navigation in sharepoint 2013
0
-
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;
}