Форум PHP программистов

[ Поиск ] - [ Пользователи ] - [ Календарь ]

REZzANATOR

24.02.2009 - 17:34

всем привет
вновь столкнулся с меню...

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

нада какнить явой чередовать цвета.

В админке можно задать цвет только

первому, среднему и последнему. все бы ничего только вот в меню 4 элемента (ссылки)

Прошу помощи в реализации.

Заранее признателен

Спустя 3 часа, 26 минут, 46 секунд (24.02.2009 - 20:01) kirik написал(а):

Яваскриптом обходишь нужные элементы и назначаешь цвета

Выкладывай код, чтобы нагляднее было...

Спустя 11 часов, 54 минуты, 19 секунд (25.02.2009 - 07:55) REZzANATOR написал(а):

HTML

<ul id="top_menu">
<li id="top_menu_first"><a href="#">о компании</a>
<ul>
<li><a href="#">пункт 1.1</a></li>
<li><a href="#">пункт 1.2</a></li>

<li><a href="#">пункт 1.3</a></li>
<li><a href="#">пункт 1.4</a></li>
<li><a href="#">пункт 1.5</a></li>
<li><a href="#">пункт 1.6</a></li>
<li><a href="#">пункт 1.7</a></li>
</ul>

</li>
<li id="top_menu_light_blue"><a href="#">vismaravetro</a></li>
<li id="top_menu_blue"><a href="#">megius</a>
<ul>
<li><a href="#1">пункт 3.1</a></li>
<li><a href="#2">пункт 3.2</a></li>
<li><a href="#3">пункт 3.3</a></li>

<li><a href="#4">пункт 3.4</a></li>
</ul>
</li>
<li id="top_menu_light_blue"><a href="#">контакты</a></li>
</ul>

вот цcc

Код

#top_menu
{
padding:0px;
margin:0px;
list-style-type:none;
float:right;
margin-top:-20px;
padding-right:20px;
height:20px;
font-size:14px;

}
#top_menu li
{
padding:0px;
margin:0px;
float:left;
width:135px;
text-align:center;
height:20px;
_height:19px;
}
#top_menu li a
{
color:#1a4b5a;
text-decoration:none;
}
#top_menu #top_menu_last
{
padding:0px;
width:230px;
background:url(images/top_menu_last.png) top left no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top_menu_last.png', sizingMethod='crop');

}
#top_menu #top_menu_light_blue
{
background:url(images/top_menu_light_blue.png) top left no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top_menu_light_blue.png', sizingMethod='crop');
}
#top_menu #top_menu_blue
{
background:url(images/top_menu_blue.png) top left no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top_menu_blue.png', sizingMethod='crop');
}
#top_menu #top_menu_first
{
background:url(images/top_menu_first.png) top left no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top_menu_first.png', sizingMethod='crop');
}
#top_menu li ul
{
list-style-type:none;
display:none;
}
#top_menu li:hover ul, #top_menu li.jshover ul
{
display:block;
width:180px;
padding:0px;
margin:0px;
position:absolute;
z-index:120;
margin-top:2px;
}
*html #top_menu li:hover ul, #top_menu li.jshover ul
{
margin-top:19px;
margin-left:-100px;
}
#top_menu li:hover ul li, #top_menu li.jshover ul li
{
background:none;
background:url(images/top_menu_l2.png);
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top_menu_l2.png', sizingMethod='crop');
width:171px;

}
#top_menu li:hover ul li a, #top_menu li.jshover ul li a
{
display:block;
color:#0d8973;
_position:absolute;
_width:171px;
_margin-left:-85px;
z-index:130;
height:20px;

}
#top_menu li:hover ul li a:hover, #top_menu li.jshover ul li a:hover
{
color:#dde8ea;
text-decoration:underline;
}

пока не могу ничего придумать

Спустя 1 час, 2 минуты, 33 секунды (25.02.2009 - 08:57) kirik написал(а):

REZzANATOR
Каждой кнопке меню назначь атрибут color, где укажи нужный цвет бэкграунда.

Код

<li id="top_menu_first" color="#000"><a href="#">о компании</a>

И после генерации менюхи вставь следующий код:

PHP

&#60;script type="text/javascript">
function change_colors()
{
    var buttons = document.getElementById('top_menu').getElementsByTagName('li');
    
    for(i = 0, c = buttons.length; i < c; i++)
    {
        if(buttons[i].hasAttribute('color'))
        {
            buttons[i].style.backgroundColor = buttons[i].getAttribute('color');
            buttons[i].removeAttribute('color');
        }
    }
}
change_colors();

Теперь после вызова этого скрипта ко всем li-элементам находящимся внутри элемента с id='top_menu', и имеющими атрибут color будут выставлятся цвета бэкграунда прописанные в атрибуте color.

ЗЫ почитай доки по верстке, если занимаешься этим профессионально.

_____________

Быстрый ответ:

Здесь расположена полная версия этой страницы.