Сколько про выпадающие менюшки было на этом форуме разговоров. Огромное количество шаблонов поставляется в штатной редакции, а по настоящему простого и легкого меню в тоже время и красивого я не встретил.
Меню это что? Это список пунктов. Так давайте его и сделаем списком!
И приступим к наведению красототы с помощью магии CSS
/*Верхнее меню*/
#t_menu {
float: left;
background: #21283a;
border: medium none;
color: #fff;
width: 100%;
min-height: 23px;
}
#t_menu, #t_menu ul {
background:#515151 none repeat scroll 0%;
border:1px 0 solid #000000;/*По бокам бордюры не надо, а то в браузер влезать не будет*/
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
}
#t_menu li {
background:transparent none repeat scroll 0%;
float:left;
position:relative;
}
#t_menu a {
background:transparent url(/diz/dot.png) repeat-y scroll right center;
color:#FFFFFF;
display:block;
padding:0.3em 0.5em;
text-decoration:none;
width:11em;
}
#t_menu a:hover {
background:#CCCCCC none repeat scroll 0%; /*полет мыша*/
color:#000000;
}
#t_menu a:active {
background:red none repeat scroll 0%;/флеш ин зе найт/
}
#t_menu li:hover {
background:#333333 none repeat scroll 0%;
}
#t_menu li ul {
background:transparent url(/diz/fone-tr.png) repeat scroll 0%;
display:none;
padding:0.5em 0pt;
position:absolute;
width:11.99em;
}
#t_menu li li a {
background:transparent none repeat scroll 0%;
width:10.95em;
}
#t_menu li:hover ul {
display:block;
}
#t_menu li:hover li ul {
display:none;
left:10.6em;
top:-0.65em;
width:10.99em;
}
#t_menu li:hover li:hover ul {
display:block;
}
/* Конец верхнего меню*/
Получилась красота!
Работает во всех популярных браузерах (FF, Opera, IE6-7)Килобайты копеечные!
Кому для теста лень создавать страничку могут заглянуть
А теперь вопрос:
Как это оформить XSL-шаблоном?
Не стыдно что-либо не знать или не понимать. Стыдно бояться спросить.
Не дождался я, други, готового решения по XSL-шаблону.
И наклепал свой. Хоть и очень смутно представляю себе его работу, но шаблон получился рабочим.
Да и еще выяснилось что Ослик версии 6 и ниже не понимает свойство li:hover как это бороть пока не знаю. Где-то слышал что всетаки придется использовать js, а этого как раз и не хочется.
Но если учесть что IE6 , то наверно можно и не заморачиваться.
И, наконец, сам шаблон
<!-- Запишем в константу ID структуры, данные для которой будут выводиться пользователю -->
<xsl:variable name="current_structure_id" select="/document/structure/current_structure_id"/>
<li>
<!-- Показывать ссылку, или нет -->
<xsl:if 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>
<!-- Определяем стиль вывода ссылки -->
<xsl:variable name="link_style">
<xsl:choose>
<!-- Выделяем текущую страницу жирным (если это текущая страница, либо у нее есть ребенок с ID, равным текущей) -->
<xsl:when test="current_structure_id=@id or count(.//structure[@id=$current_structure_id])=1">font-weight: bold</xsl:when>
<!-- Иначе обычный вывод с пустым стилем -->
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- Если не показывать ссылку - выводим просто имя ссылки -->
<xsl:if test="show_link=0">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</xsl:if></li>
</xsl:template>
<xsl:template match="structure" mode="pool">
<li>
<!-- Показывать ссылку, или нет -->
<xsl:if 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>
<!-- Если не показывать ссылку - выводим просто имя ссылки -->
<xsl:if test="show_link=0">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>
Не стыдно что-либо не знать или не понимать. Стыдно бояться спросить.
Сознательно решил этим не заморачиваться. Ибо... Изначально была идея вообще без скриптов меню сделать. Не получилось. Пришлось идти на компромис. Но утежелять дальше скриптами, заставляющими правильно работать фильтр AlphaImageLoader, не захотел.
Не стыдно что-либо не знать или не понимать. Стыдно бояться спросить.