Active Menu Color ons-navigator

ganeshspear

Hi,
How to add color in active menu item using Ons-navigator…

Fran Diox

@ganeshspear Sorry, I have no idea what you mean. Could you add more information?

ganeshspear

@Fran-Diox In footer i have four pages Menu. if user clicks Movies page that menu will be highlighted

 <div class="addemo"><img src="images/addemo.jpg"></div>	
  <div class="simofooterbg">
    <div class="footermenu" style="width:21%;" onclick="myNavigator.replacePage('movies.html', { animation : 'fade' } )" > <i class="flaticon-movie47 footermenuicon" ></i><br>
      <p>Movies</p>
    </div>
    <div class="footermenu" style="width:21%;" onclick="myNavigator.replacePage('tvshows.html', { animation : 'fade' } )" > <i class="flaticon-televisions2 footermenuicon" ></i><br>
      <p>TV Shows</p>
    </div>
    <div class="footermenu" style="width:27%;" onclick="myNavigator.replacePage('liveevents.html', { animation : 'fade' } )" > <i class="flaticon-election footermenuicon" ></i><br>
      <p>Live Events</p>
    </div>
    <div class="footermenu" style="width:28%;" onclick="myNavigator.replacePage('shots.html', { animation : 'fade' } )"> <i class="flaticon-drink155 footermenuicon" ></i><br>
      <p>Shots & Cocktails</p>
    </div>
  </div>
</ons-bottom-toolbar>

rafitaangkor

In your case, why don’t you consider using ons-tab. Example can be found in: http://stackoverflow.com/questions/34651966/monaca-onsen-2-0-ons-tabbar-material-design

ganeshspear

@rafitaangkor i already have ons-tab in top…so i don’t like to use in footer…

Fran Diox

@ganeshspear So why don’t you just do onclick="colorThisItem(); myNavigator.replacePage(...);" ? Put the CSS you want in the item when calling colorThisItem().

munsterlander

@ganeshspear To piggy back on what @Fran-Diox said, I think you want something like this:

function setColor(id){
// reset all links to default color
    document.getElementById('fm1').style.color="black";
    document.getElementById('fm2').style.color="black";
// set active link
   document.getElementById(id).style.color="blue";
}

<div id="fm1" class="footermenu" style="width:21%;" onclick="setColor('fm1');myNavigator.replacePage('movies.html', { animation : 'fade' } )" > <i class="flaticon-movie47 footermenuicon" ></i><br>
      <p>Movies</p>
    </div>
    <div id="fm2" class="footermenu" style="width:21%;" onclick="setColor('fm2');myNavigator.replacePage('tvshows.html', { animation : 'fade' } )" > <i class="flaticon-televisions2 footermenuicon" ></i><br>
      <p>TV Shows</p>
    </div>

ganeshspear

Thanks…i will check…