Добрый день!
Столкнулся со следующей проблемой. Решения на форуме, увы, не нашел, поэтому решил обратиться за помощью.
Необходимо сделать верхнее меню.
В статичном виде оно выглядит так:
<!-- верхнее меню -->
<div id="menu">
<ul id="mainmenu4">
<li class="about"><a href="/about" title="О компании"><span> </span></a></li>
<li class="catalog"><a href="/catalog" title="Каталог продукции"><span> </span></a></li>
<li class="portfolio"><a href="/portfolio" title="Портфолио"><span> </span></a></li>
<li class="contacts"><a href="/contacts" title="Контактная информация"><span> </span></a></li>
</ul>
</div>
CSS:
/*верхнее меню*/
ul#mainmenu4 li{ display:block; float:left; padding-top: 40px;padding-left: 40px;}
#mainmenu4 a span {display: none;}
#mainmenu4 a {height: 15px;display: block;cursor:pointer;}
#mainmenu4 .about a {width:110px;background: url(/images/menu_about1.jpg) 0 0 no-repeat;}
#mainmenu4 .about a:hover {background-position: 0 -15px;} /*картинка высотой 30 пикселей,
состоящая из двух половинок, сдвигается при наведении курсора ровно наполовину*/
#mainmenu4 .about_act a {width:110px;background: url(/images/menu_about2.jpg) 0 0 no-repeat;}
#mainmenu4 .about_act a:hover {background-position: 0 -15px;} /*то же самое, только для активного пункта меню*/
#mainmenu4 .catalog a {width:80px;background: url(/images/menu_catalog1.jpg) 0 0 no-repeat;}
#mainmenu4 .catalog a:hover {background-position: 0 -15px;}
#mainmenu4 .catalog_act a {width:80px;background: url(/images/menu_catalog2.jpg) 0 0 no-repeat;}
#mainmenu4 .catalog_act a:hover {background-position: 0 -15px;}
#mainmenu4 .portfolio a {width:110px;background: url(/images/menu_portfolio1.jpg) 0 0 no-repeat;}
#mainmenu4 .portfolio a:hover {background-position: 0 -15px;}
#mainmenu4 .portfolio_act a {width:110px;background: url(/images/menu_portfolio2.jpg) 0 0 no-repeat;}
#mainmenu4 .portfolio_act a:hover {background-position: 0 -15px;}
#mainmenu4 .contacts a {width:90px;background: url(/images/menu_contacts1.jpg) 0 0 no-repeat;}
#mainmenu4 .contacts a:hover {background-position: 0 -15px;}
#mainmenu4 .contacts_act a {width:90px;background: url(/images/menu_contacts2.jpg) 0 0 no-repeat;}
#mainmenu4 .contacts_act a:hover {background-position: 0 -15px;}
/*конец верхнего меню*/
Такой метод позволяет избежать использования лишних скриптов.
Не очень понимаю, как "прицепить" эту структуру к стандартному XSl-шаблону Верхнего меню?:
<?xml version="1.0" encoding="windows-1251"?>
<!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="Windows-1251" indent="yes" method="html" omit-xml-declaration="no"
version="1.0" media-type="text/xml"/>
<xsl:template match="/document">
<ul class="top_menu gray_link">
<!-- Выбираем узлы структуры первого уровня -->
<xsl:apply-templates select="structure[show=1]"/>
</ul>
</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>
<div>
<div>
<!-- Показывать ссылку, или нет -->
<xsl:choose>
<xsl:when test="show_link = 1">
<!-- Определяем адрес ссылки -->
<xsl:variable name="link">
<xsl:choose>
<!-- Если внешняя ссылка -->
<xsl:when test="is_external_link =
1">
<xsl:value-of disableoutput-
escaping="yes" select="external_link"/>
</xsl:when>
<!-- Иначе если внутренняя ссылка
-->
<xsl:otherwise>
<xsl:value-of disableoutput-
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>
</div>
</div>
</li>
</xsl:template>
</xsl:stylesheet>
Помогите, откуда начинать танцевать?
