Stas_Y (01 Май 2015 - 08:03) писал:
<ul id="main_nav"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul>замените на
<nav class="ph-lift"> <ul id="main_nav"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %} class="active"{%ENDIF%} data-title="{menu.header.links.NAME}"{% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </nav>
далее добавьте в конец main.css
nav.ph-lift ul li { float: left; height: 90px; line-height: 90px; background: white; overflow: hidden; -webkit-transition: all.6s ease; -moz-transition: all.6s ease; -o-transition: all.6s ease; -ms-transition: all.6s ease; transition: all.6s ease; } nav.ph-lift ul li:hover { box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset; background: teal; } nav.ph-lift ul li a { display: block; text-decoration: none; color: #007e7e; padding: 0 45px; margin-top: 0; -webkit-transition: all.6s ease; -moz-transition: all.6s ease; -o-transition: all.6s ease; -ms-transition: all.6s ease; transition: all.6s ease; } nav.ph-lift ul li:hover a { margin-top: -90px; color: white; text-shadow: 0 1px 2px black; } nav.ph-lift ul li a:after { content: attr(data-title); display: block; }