Many novice friends in the weaving dream to do imitation station, often asked how to implement the navigation bar is selected style, that is, when the first page of the navigation bar "Home" on the
In the selected state, the following figure:
Figure 1
When in other columns, the navigation bar "Home" is not selected, the column is in the selected state, the following figure:
Figure 2
In fact, it is very simple to make this state, usually when we do the dream template, the navigation bar will be placed in the head template head.htm, assuming that figure 1
Navigation bar, we use the following code:
<li class= "menu_on" >
<a href= "{dede:global.cfg_basehost/}" >{dede:global.cfg_indexname/}</a>
</li>
{dede:channel type= ' top ' row= ' currentstyle= "<li class= ' menu_on ' ><a href= ' ~typelink~ ' ~rel~><span >~typename~</span></a></li> "}
<li ><a href= ' [field:typeurl/] ' [field:rel/]>[field:typename/]</a> </li>
{/dede:channel}
You can see from the code, the home page belongs to the <li> tag, there are class= "menu_on", this style is to show the selected state. Other columns also need to display the selected style, so you need to use the red part of the Add code.
But if we have other templates outside the homepage template also call this head.htm, when entering other columns, such as the "Picture template" in Figure 2, home page and picture template two columns will be selected.
So the solution is very simple, in doing a head1.htm, in addition to the first page template outside the other template calls, the code is as follows:
<li >
<a href= "{dede:global.cfg_basehost/}" >{dede:global.cfg_indexname/}</a>
</li>
{dede:channel type= ' top ' row= ' currentstyle= "<li class= ' menu_on ' ><a href= ' ~typelink~ ' ~rel~><span >~typename~</span></a></li> "}
<li ><a href= ' [field:typeurl/] ' [field:rel/]>[field:typename/]</a> </li>
{/dede:channel}
You may have seen it, this time the code and the last code is only the home page <li> tag to remove the class= "menu_on", so you can make this effect, very simple.
