Перейти к содержимому


Горизонтальное меню JQuery


  • Вы не можете ответить в тему
В этой теме нет ответов

#1 ssergioss25

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 56 сообщений
Репутация: 24
Ассистент
  • ГородСПБ

Отправлено 14 July 2012 - 09:19 AM

Вот еще один вариант симпатичного меню, взятый и несколько переделанный отсюда :
http://wp-kama.ru/wp...1/07/index.html

Подключение jQuery обязательно должно быть ранее.
В index.tpl.html меняем весь код от комментария "меню" до комментария "шапка" на :
<script type="text/javascript">
{literal}
(function($){
$(function(){
var munu = $('.menu li a');
munu.each(function(){
$(this).append('<div>'+ $(this).html() +'</div>');
});
munu.hover(
function(){
$(this).stop().animate( {marginTop:'-25px'}, 300 );
},
function(){
$(this).animate( {marginTop:'0'}, 500 );
})
})
})(jQuery)
{/literal}
</script>
<table cellspacing="0" cellpadding="0" width="100%" class="print">
<tr>
<td class="headlink bf" align=center>
<ul class="menu">
<li><a href="{$smarty.const.CONF_FULL_SHOP_URL}">Главная</a></li>
<li><a href="ссылка">название</a></li>
<li><a href="ссылка">название</a></li>
<li><a href="ссылка">название</a></li>
<li><a href="ссылка">название</a></li>
<li><a href="ссылка">название</a></li>
</ul></td> </tr></table>

Соответственно, "название" меняем на название меню, "ссылка" на соответствующую ссылку.

style.css :
ul, li{vertical-align:baseline; }
.menu li{ float:left; height:25px; overflow:hidden; }
.menu li a,
.menu li a div{ display:block; padding:0 10px; line-height:25px; }
.menu li a div{ margin:0 -10px; }
.menu{ display: table;margin: 0px auto;text-align: center;font:12px Georgia;font-weight:bold}
.menu li{ border-right:1px dashed #999; text-transform:uppercase; }
.menu li a{ color:#ffffff; }
.menu li a:hover{ text-decoration:none; }
.menu li a div{ border-radius:5px 5px 5px 5px;background:#5A80A7;  }

Цвета, конечно, можно указать свои. По умолчанию, больше подходящие под дефолтовый шаблон .
Не идеальный вариант, но рабочий. Из видимых недостатков - в IE ниже 8 версии меню не выравнивается по центру (связано ,скорее всего, с тем, что
margin: auto
он не понимает),в IE ниже 9 версии углы пункта меню не закругляются, а остаются прямоугольными (связано ,скорее всего, с тем, что не понимает
border-radius
:).
К сожалению, доводить до ума нет времени и желания (а может, просто, знаний не хватает :) ).Кому интересно пользуйтесь.
  • 1