UMIhelp

Разработка сайта на UMI.CMS => Шаблоны TPL => Тема начата: korogan от 31 Июля 2011, 21:06:33

Название: Многоуровневое меню с разным css
Отправлено: korogan от 31 Июля 2011, 21:06:33

Здравствуйте!

Есть задача сделать многоуровневое меню. Но возникает проблема как.
В верстке используются разные стили. _http://new.unimed-c.ru/ где это планируется реализовать, для наглядности.

Пример HTML кода:

Код: [Выделить]

<ul id="nav">  
<li><a href="/">ГЛАВНАЯ</a></li>
<li><img src="/images/l.png" class="m_line"><a href="">АКУШЕРСТВО</a>
<ul style="margin-left: 65px"> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Team</a></li> 
     <li><a href="#">Offices</a></li> 
</ul> 
</li>
<img src="/images/l.png" class="m_line" />
<li><a href="">ГИНЕКОЛОГИЯ</a>
<ul style="margin-left: 165px"> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Team</a></li> 
     <li><a href="#">Offices</a></li> 
</ul> 
</li>
<img src="/images/l.png" class="m_line">
<li><a href="">УЗИ 3D</a>
<ul style="margin-left: 273px"> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Team</a></li> 
     <li><a href="#">Offices</a></li> 
</ul>
</li>
<img src="/images/l.png" class="m_line">
<li><a href="">СТОМАТОЛОГИЯ</a>
<ul style="margin-left: 335px"> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Team</a></li> 
     <li><a href="#">Offices</a></li> 
</ul>
</li>
<img src="/images/l.png" class="m_line">
<li><a href="">УРОЛОГИЯ</a>
<ul style="margin-left: 455px"> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Team</a></li> 
     <li><a href="#">Offices</a></li> 
</ul>
</li>
<img src="/images/l.png" class="m_line">
<li><a href="">ТЕРАПИЯ</a>
<ul style="margin-left: 538px"> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Team</a></li> 
     <li><a href="#">Offices</a></li> 
</ul>
</li>
<img src="/images/l.png" class="m_line">
<li><a href="">АНАЛИЗЫ</a>
<ul style="margin-left: 613px"> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Team</a></li> 
     <li><a href="#">Offices</a></li> 
</ul>
</li>
<img src="/images/l.png" class="m_line">
<li><a href="">КОНТАКТЫ</a></li>
</ul>

Подскажите пожалуйста как быть в такой ситуации

Название: Re:Многоуровневое меню с разным css
Отправлено: admin от 31 Июля 2011, 21:43:55

с точки зрения верстки, насколько я понимаю, ты хочешь этими стилями "style='margin-left:163px'" достичь правильного расположения выпадающего 2 уровня, так?

Если это так, то проще немного поменять css правила для меню и подменю, посмотри мой урок по многоуровневому меню  (http://umihelp.ru/388/video-multi-level-menu-tpl/), там как раз такое же меню рассматривается.

ну а если тебе все же надо прописать такие кастомные стили, я бы на твоем месте сделал так:

Код: [Выделить]

<ul style="margin-left: 165px">

  заменил бы на

Код: [Выделить]

<ul class="item63"> 

в css прописал бы все эти кастомы как набор стилей

Код: [Выделить]

.item63{margin-left: 165px}

,
а стиль .item63 получал бы путем прописывания в шаблон item%id%

то есть:
1. создаешь шаблон для меню прописывая вместо

Код: [Выделить]

<ul style="margin-left: 165px">

,

Код: [Выделить]

<ul class="item%id%"> 

2. смотришь получившиеся стили и прописываешь в css нужные инструкции

Название: Re:Многоуровневое меню с разным css
Отправлено: korogan от 01 Августа 2011, 11:29:12

Спасибо.
Все получилось.

С уважением, Денис.