Помогите создать горизонтальное меню!

29 октября 2009 г.

Re: Помогите создать горизонтальное меню!

создал картинку. нарезал в html код:

где "меню_02.gif" это бэкграунд для резиновости средней части меню.

Теперь хочу чтобы шаблон "ВерхнееМеню" был переверстан на мою картинку, код XLS:

<?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">
      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="top_menu">
         <tr align="center">
            
            <xsl:apply-templates select="structure[show=1]"/>
            <td style="padding-right: 15px;"></td>
         </tr>
      </table>
   </xsl:template>

   <xsl:template match="structure">

      
      <xsl:variable name="current_structure_id" select="/document/structure/current_structure_id"/>

      <td></td>
      <td>
         <div class="item_menu_div" id="menu_id_{@id}" onmouseover="TopMenuOver('menu_id_{@id}', 'child_menu_id_{@id}');" onmouseout="TopMenuOut('menu_id_{@id}', 'child_menu_id_{@id}');">
            <div class="tl"></div>
            <div class="tr"></div>
            <div class="bl"></div>
            <div class="br"></div>

            
            <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>
                     
                     <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]) > 0">
               <div id="child_menu_id_{@id}" class="poll_down_menu_lev_1" align="left">
                  <div class="tl"></div>
                  <div class="t"></div>
                  <div class="tr"></div>
                  <div class="r"></div>
                  <div class="bl"></div>
                  <div class="b"></div>
                  <div class="br"></div>
                  <div class="l"></div>
                  <ul>
                     <xsl:apply-templates select="structure[show=1]" mode="pool"/>
                  </ul>
               </div>
            </xsl:if>

            
            <xsl:if test="show_link=0">
               <xsl:value-of disable-output-escaping="yes" select="name"/>
            </xsl:if>
         </div>
      </td>
   </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>

в итоге получиться должна менюшка не отдельными блоками слова, а одноцветная резиновая

буду признателен за сведение html с xls

PS забыл сделать дизайн выпадающей части, 6 сек

Модератор 29 октября 2009 г.

Re: Помогите создать горизонтальное меню!

tekilabum писал(а):

в итоге получиться должна менюшка не отдельными блоками слова, а одноцветная резиновая

Давайте откроем исходный код страницы и сравним сгенерированный код с тем, что Вы привели. В чем отличие?

29 октября 2009 г.

Re: Помогите создать горизонтальное меню!

это он и есть, код выпадающего меню, отличия в html разметке, под которую надо отписать классы со свойствами

Модератор 29 октября 2009 г.

Re: Помогите создать горизонтальное меню!

tekilabum,
если код совпадает, то XSL шаблон отработал верно. Что же требуется?

29 октября 2009 г.

Re: Помогите создать горизонтальное меню!

я вчитался в ваши слова, мы говорим о разных вещах! требуется визуальный результат а не результат в виде кода.

только что мне пришло в голову, что надо сравнить исходник страницы полученной в броузере с тэгами в xml коде шаблона, в котором есть разметка с тэгами <table> <tr> <td>, еще <div> нас должен интересовать и class для того, чтобы посмотреть стили класса в css и увидеть результат.

в принципе, думаю, надо сделать это меню в html и css, тогда останется просто вписать xml код в полученный html код. правильно мыслю?

просто для человека который не профессионально занимается программированием достаточно сложно вникнуть во все свойства css и понять как же сделать картинку слева у меню, потом резиновую часть и окончание меню справа.

Модератор 30 октября 2009 г.

Re: Помогите создать горизонтальное меню!

tekilabum писал(а):

я вчитался в ваши слова, мы говорим о разных вещах! требуется визуальный результат а не результат в виде кода.

Вам требуется визуальный результат, Вы его проектируете, нам же требуется соответствие сгенерированного кода с эталонным, который Вы предоставили. Если сгенерировано верно - проблема в логике эталона, а не в работе CMS.
Если Вам нужно применять стили - пожалуйста, делайте это в XSL-шаблоне, никто не запрещает, но тогда начните с того, что сделайте готовый рабочий прототип в HTML, потом уже переносите на XSL и все должно заработать.

30 октября 2009 г.

Re: Помогите создать горизонтальное меню!

это не меню..это просто табличка из картинок, где ссылки?
да и табличку уверен можно было нормально сверстать) в 2-3 div'а

1 ноября 2009 г.

Re: Помогите создать горизонтальное меню!

в общем более менее разобрался с меню. возникла проблема: т.к. у меня картинка для background имеет размеры 84 х 121 px, возникло уничтожение части выпадающего меню. скриншот на ссылке http://img-fotki.yandex.ru/get/3800/blokioptom.0/0_17573_deaad938_orig прошу помочь советом как мне сделать выпадающее меню может быть даже в таком же стиле как верхнее?

2 ноября 2009 г.

Re: Помогите создать горизонтальное меню!

сверстайте скругленные уголки так как вам нужно

http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/
http://chikuyonok.ru/2009/10/decor/

посмотрите как сверстано верхнее меню

(воспросы не имеют отношения к cms

)

2 ноября 2009 г.

Re: Помогите создать горизонтальное меню!

это все прекрасно то что вы написали, я не пойму почему у меня background repeat x съел выпадающее меню второго уровня?

Авторизация