Ко всем чертям с матерями катись!

#
Ко всем чертям с матерями катись!
Сколько про выпадающие менюшки было на этом форуме разговоров. Огромное количество шаблонов поставляется в штатной редакции, а по настоящему простого и легкого меню в тоже время и красивого я не встретил.
Меню это что? Это список пунктов. Так давайте его и сделаем списком!
<!-- Верхнее меню -->
<ul id="t_menu">
<li><a href="#">Интернет-магазин</a>
<ul>
<li><a href="#">Прайс</a>
</li>
<li><a href="#">корзана</a>
</li>
</ul>
</li><li><a href="#">Фотогалерея</a>
</li>
<li><a href="#">Информация</a>
<ul>
<li><a href="#">Новости</a>
</li>
<li><a href="#">Статьи</a>
</li>
<li><a href="#">Гостевая</a>
</li>
<li><a href="#">Вопросы и ответы</a>
</li>
</ul>
</li>
<li><a href="#">Обратная связь</a>
</li>
</ul>
<!--Конец меню -->

И приступим к наведению красототы с помощью магии 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)Килобайты копеечные!
Кому для теста лень создавать страничку могут заглянуть http://www.hsn-ltd.ru/testdrive
А теперь вопрос:
Как это оформить XSL-шаблоном?
Не стыдно что-либо не знать или не понимать. Стыдно бояться спросить.
#
Re: Ко всем чертям с матерями катись!
ну ничего, нормально.
я вот к примеру как с CSS помороковал http://altay.magazine.ru/
прошу заценить.
#
Xsl-шаблон выпадающего меню
Не дождался я, други, готового решения по XSL-шаблону.
И наклепал свой. Хоть и очень смутно представляю себе его работу, но шаблон получился рабочим.
Да и еще выяснилось что Ослик версии 6 и ниже не понимает свойство li:hover как это бороть пока не знаю. Где-то слышал что всетаки придется использовать js, а этого как раз и не хочется.
Но если учесть что IE6 основательно потеснили другие браузеры, то наверно можно и не заморачиваться.
И, наконец, сам шаблон

<?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 id="t_menu">
<!-- Выбираем узлы структуры -->
<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>
<!-- Показывать ссылку, или нет -->
<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>

<a href="{$link}">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</xsl:if>

<!-- Выводим подуровни меню -->
<xsl:if test="count(structure[show = 1]) &gt; 0">
<ul>
<xsl:apply-templates select="structure[show=1]" mode="pool"/>
</ul>
</xsl:if>

<!-- Если не показывать ссылку - выводим просто имя ссылки -->
<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>

<a href="{$link}">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</xsl:if>

<!-- Если не показывать ссылку - выводим просто имя ссылки -->
<xsl:if test="show_link=0">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>
Не стыдно что-либо не знать или не понимать. Стыдно бояться спросить.
#
Решение для IE6
Кто ищет тот всегда найдет. Нашлось и у меня решение.
Маленький скриптик все-таки нужен
<script type="text/javascript" language="javascript">
function t_menuhover()
{
   if(!document.getElementById("t_menu"))
      return;
   var lis = document.getElementById("t_menu").getElementsByTagName("LI");
   for (var i=0;i<lis.length;i++)
   {
      lis[i].onmouseover=function(){this.className+=" jshover";}
      lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" jshover\\b"), "");}
   }
}
if (window.attachEvent)
   window.attachEvent("onload", t_menuhover);
</script>

А теперь в таблице CSS заменим блок отвечающий за каскадное меню этим блоком.
#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, #t_menu li.jshover {
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, #t_menu li.jshover ul {
display:block;
}
#t_menu li:hover li ul, #t_menu li.jshover li ul {
display:none;
left:10.6em;
top:-0.65em;
width:10.99em;
}
#t_menu li:hover li:hover ul, #t_menu li.jshover li.jshover ul {
display:block;
}

Теперь все отображается, но в IE6, как не было прозрачности, так и нет.
Не стыдно что-либо не знать или не понимать. Стыдно бояться спросить.
Модератор
#
Re: Ко всем чертям с матерями катись!
sivruk писал(а):
но в IE6, как не было прозрачности, так и нет.

про прозрачность в ИЕ-6 столько всего написано. Почитайте статьи по этому поводу.
#
Re: Ко всем чертям с матерями катись!
Сознательно решил этим не заморачиваться. Ибо... Изначально была идея вообще без скриптов меню сделать. Не получилось. Пришлось идти на компромис. Но утежелять дальше скриптами, заставляющими правильно работать фильтр AlphaImageLoader, не захотел.
Не стыдно что-либо не знать или не понимать. Стыдно бояться спросить.
Авторизация