Kotoff, низкий Вам поклон за подробную инструкцию! Мне очень помогло!
Хочу обратиться к Вам с просьбой. У меня все получилось, кроме jQuery меню. Меню само работает, а вот скриптовый ползунок, который должен "липнуть" к активному пункту меню, находится в бездействии. Сайт находится на локальном сервере. Вот фрагменты кода:
Макет сайта:
<div id="wrapper">
<header id="header"></header><!-- #header-->
<!-- Верхнее меню -->
<?php
$Structure = & singleton('Structure');
$Structure->ShowStructure(5, 'ГлавноеМеню');
?>
XSL-шаблон
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>
<xsl:template match="/document">
<div class="lavalamp" >
<ul>
<!-- Выбираем узлы структуры первого уровня -->
<xsl:apply-templates select="structure[show=1]"/>
</ul>
<div class="floatr"></div>
</div>
</xsl:template>
<xsl:template match="structure">
<!-- Запишем в константу ID структуры, данные для которой будут выводиться пользователю -->
<xsl:variable name="current_structure_id" select="/document/structure/current_structure_id"/>
<li>
<!--
Выделяем текущую страницу добавлением к li класса red_li,
если это текущая страница, либо у нее есть ребенок с атрибутом id, равным текущей uheggt.
-->
<xsl:if test="current_structure_id = @id or count(.//structure[@id=$current_structure_id]) = 1">
<xsl:attribute name="class">red_li</xsl:attribute>
</xsl:if>
<!-- Показывать ссылку, или нет -->
<xsl:choose>
<xsl:when test="show_link = 1">
<!-- Определяем адрес ссылки -->
<xsl:variable name="link">
<xsl:choose>
<!-- Если внешняя ссылка -->
<xsl:when test="is_external_link = 1">
<xsl:value-of disable-output-escaping="yes" select="external_link"/>
</xsl:when>
<!-- Иначе если внутренняя ссылка -->
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes" select="link"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- Ссылка на пункт меню -->
<a href="{$link}" title="{name}"><xsl:value-of disable-output-escaping="yes" select="name"/></a>
</xsl:when>
<!-- Если не показывать ссылку - выводим просто имя ссылки -->
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes" select="name"/>
</xsl:otherwise>
</xsl:choose>
</li>
</xsl:template>
</xsl:stylesheet>
CSS
/* Main menu
-----------------------------------------------------------------------------*/
.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
height: 18px;
font: 16px Helvetica, Tahoma, Verdana, sans-serif;
}
.lavalamp ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}
.lavalamp ul li {
list-style: none;
float:left;
text-align: center;
}
.lavalamp ul li a {
padding: 0 20px;
text-align: center;
text-decoration: none;
color: black;
}
.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
JS
$(document).ready(function () {
//найти текущую позицию активного элемента
var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
var dwidth = $('.lavalamp li.active').width() + "px";
//присвоить эту позицию элеметку с подсветкой
$('.floatr').css({
"left": dleft+"px",
"width": dwidth
});
$('.lavalamp li').hover(function(){
var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
},
function(){
var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).siblings('li.active').width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
}).click(function(){
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
return false;
});
});
Заранее благодарю за помощь.