выпадающее меню на CSS и полупрозрачный фон

Ziggy Stardust · June 18, 2007

Пробую накидать выпадающую менюшку реализованную без всякого JS только на CSS. Сама по себе менюшка работает нормально. Возникла проблема с реализацией полупрозрачного фона. Насколько я вычитал в доках за полупрозрачность отвечают следующие свойства: "opacity: 0.xx" - для мозиллы/оперы, "filter: alpha(opacity=xx)" - для IE.

С мозиллой /оперой проблем нет. Проблемы в ИЕ - полупрозрачность применяется только ко 2-му уровню выпадающего меню. В чем проблема не понимаю... Может кто подскажет?

Вот немного сокращенный код (для меньшего объема я только для 1-го пункта выпадающие меню оставил):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
 <STYLE Type="text/css">
 BODY {
 font-family: Tahoma, Verdana; 
 color: #003366; background-color: #A1BCE7; font-size: 12px; 
 }
 .topnav, .topnav UL {
 list-style: none;
 margin: 0; padding: 0; border: 0px;
 text-align: left; width: 100%;
 }
 .topnav LI {
 position: relative;
 border: 0px; width: 100%;
 }
 .topnav A {
 font-size: 11px; font-weight: bold; text-align: center; text-decoration: none; 
 display: block;
 }
 A.top_menu_on:link, A.top_menu_on:visited {
 color: #1A57AE; 
 }
 A.top_menu_on:active, A.top_menu_on:hover {
 color: #4883D6; 
 }
 A.top_menu_off:link, A.top_menu_off:visited {
 color: #FFFFFF; 
 }
 A.top_menu_off:active, A.top_menu_off:hover {
 color: #CCCCCC; 
 }
 .topnav LI UL {
 display: none; position: absolute;
 text-align: left;
 border: 1px solid #0c2958; border-top: 0px; padding: 0px; padding-top: 6px;
 background: #1D488C;
 opacity: 0.80;
 filter: alpha(opacity=80);
 }
 .topnav LI LI:hover, .topnav LI LI.jshover {
 background: #6e8ab8;
 }
 .topnav LI LI A {
 font-size: 11px; text-align: left; font-weight: normal; text-decoration: none; 
 }
 .topnav LI LI A:link, .topnav LI LI A:visited {
 color: #FFFFFF; 
 }
 .topnav LI LI A:active, .topnav LI LI A:hover {
 color: #CCCCCC; 
 }
 .topnav LI:hover UL, .topnav LI.jshover UL {
 display: block;
 }

 .topnav LI:hover LI UL, .topnav LI.jshover LI UL {
 display: none; list-style: none; text-align: left; top: 0px; left: 95%; padding: 0px;
 border: 1px solid #0c2958; background: #1D488C;
 width: 180px;
 }
 .topnav LI:hover LI:hover UL, .topnav LI.jshover LI.jshover UL {
 display: block;
 }
 </STYLE>
</HEAD>

<SCRIPT Type="text/javascript"><!--//--><![CDATA[//><!--
 jsHover = function() {
 for (var j=1; j<=3; j++) {
 var nav = "nav" + j;
 var hEls = document.getElementById(nav).getElementsByTagName("LI");
 for (var i=0, len=hEls.length; i<len; i++) {
 hEls[i].onmouseover=function() { this.className+=" jshover"; }
 hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
 }
 }
 }
 if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]></SCRIPT>


<BODY MarginWidth="0" MarginHeight="0" LeftMargin="0" TopMargin="0">
<DIV Align="center">
<TABLE Width="50%" Border="1" CellSpacing="0" CellPadding="0">
 <TR VAlign="top">
 <TD Align="center">
 <UL ID="nav1" Class="topnav">
 <LI>
 <A Class="top_menu_off" Href="#">Пункт главного <BR> меню 1</A>
 <UL>
 <LI>
 <A Href="#">Пункт подменю номер 1</A>
 <UL>
 <LI><A Href="#">Пункт подподменю 1</A></LI>
 <LI><A Href="#">Пункт подподменю 2</A></LI>
 <LI><A Href="#">Пункт подподменю 3</A></LI>
 </UL>
 </LI>
 <LI>
 <A Href="#">Пункт подменю номер 2</A>
 <UL> 
 <LI><A Href="#">Пункт подподменю 1</A></LI>
 <LI><A Href="#">Пункт подподменю 2</A></LI>
 <LI><A Href="#">Пункт подподменю 3</A></LI>
 </UL>
 </LI>
 <LI>
 <A Href="#">Пункт подменю номер 3</A>
 <UL>
 <LI><A Href="#">Пункт подподменю 1</A></LI>
 <LI><A Href="#">Пункт подподменю 2</A></LI>
 <LI><A Href="#">Пункт подподменю 3</A></LI>
 </UL>
 </LI>
 </UL>
 </LI>
 </UL>
 </TD>
 <TD Align="center">
 <UL ID="nav2" Class="topnav">
 <LI>
 <A Class="top_menu_off" Href="data/index1.phtml">Пункт главного <BR> меню 2</A>
 </LI>
 </UL> 
 </TD>
 <TD Align="center">
 <UL ID="nav3" Class="topnav">
 <LI>
 <A Class="top_menu_off" Href="data/index1.phtml">Пункт главного <BR> меню 3</A>
 </LI>
 </UL> 
 </TD>
 </TR>
</TABLE>
</DIV>
<BR>
<DIV Align="center">
<P> Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона.
<P> Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона.
<P> Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона.
</DIV>
</TABLE>
</BODY>
</HTML>

coldman · June 18, 2007

чтоб применился фильтер надо ставить шырину для ИЕ

.topnav LI UL { width:200px;

display: none; position: absolute;

text-align: left;

border: 1px solid #0c2958; border-top: 0px; padding: 0px; padding-top: 6px;

background: #1D488C;

opacity: 0.80;

filter: alpha(opacity=80);

}

у меня заработало

yopopt · June 18, 2007

Это особенность работы фильтра. Обязательно надо указывать ширину, прич?м абсолютную. Проценты не подойдут. У Вас фильтр работает для второго вложения поскольку для него установлена ширина в 180 пикселей.

Ziggy Stardust · June 19, 2007

coldman said:
.topnav LI UL { width:200px;
display: none; position: absolute;
text-align: left;
border: 1px solid #0c2958; border-top: 0px; padding: 0px; padding-top: 6px;
background: #1D488C;
opacity: 0.80;
filter: alpha(opacity=80);
}
у меня заработало

Хммм... У меня при таком варианте полупрозрачность в первом выпадающем меню конечно появилась, но при этом ширина в 200 пикселей применяется ко всему меню, включая второе. Т.е. от второго выпадающего меню видно только кусочек, который попадает в эти 200 пикселей...

Это в ИЕ так. В мозилле/опере нормально.

З.Ы.: В любом случае мне похоже этот вариант не подходит. :-(

Ziggy Stardust · June 19, 2007

Про данную особенность фильтра понял. Увы мне похоже тогда такой вариант не подходит. Не могу жестко ширину задавать. :-( У меня это меню должно быть растягивающимся пропорционально ширине окна браузера.

А какие еще варианты реализовать полупрозрачность есть? Сделать 1х1 png с полупрозрачным нужным цветом и указать его в качестве фона для нужных UL? При таком варианте будет ли оно нормально во всех браузерах отображаться?

PacMan · June 19, 2007

Для 6 IE в любом случае придется использовать фильтр для отображения пнг в качестве фонового изображения. Потому ширину элемента задать придется.

Хотя...

Попробуйте обмануть и задать не ширину, а высоту 100% Может поможет...

Ziggy Stardust · June 19, 2007

Мнда... Почитал про полупрозрачность в PNG для ИЕ5 и 6. Похоже в моем случае без задания явной ширины блокам

не обойтись. :-(

Все равно в ИЕ не получается отображение меню так же как в мозилле/опере.

Когда задаю:

.topnav LI UL {

width:XXXpx;

...

opacity: 0.80;

filter: alpha(opacity=80);

}

Полупрозрачность на месте получается. Но ИЕ похоже наследует эту ширину в XXX пикселей на _весь_ блок

, включая вложенные (которые вбок должны выпадать). В итоге боковые менюшки получаются не видны целиком, только та часть видна, что попадает по ширине в эти XXX пикселей. :-(

В мозилле все ОК. Это тоже "фича" ИЕ? Как-нибудь можно победить?

PacMan · June 19, 2007

yopopt said:
Это особенность работы фильтра. Обязательно надо указывать ширину, прич?м абсолютную. Проценты не подойдут. У Вас фильтр работает для второго вложения поскольку для него установлена ширина в 180 пикселей.

Вранье. Проценты подойдут. Разницы то нет никакой.

Тут например я не указывал ширину, а просто делал height:100%

Ощущение что IE чихать ширину или высоту ему задают для работы фильтра.

background-image: url(/i/прозрачный.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/i/полупрозрачный.png, sizingMethod='scale');

yopopt · June 19, 2007

PacMan said:

yopopt said:
Это особенность работы фильтра. Обязательно надо указывать ширину, прич?м абсолютную. Проценты не подойдут. У Вас фильтр работает для второго вложения поскольку для него установлена ширина в 180 пикселей.
Вранье. Проценты подойдут. Разницы то нет никакой.

Это вс? замечательно, но тогда ответьте на такой вопрос: почему в данном контексте это НЕ РАБОТАЕТ?! Прич?м я уже не раз встречаю что filter: alpha(opacity=*); не хочет работать без установки ширины в абсолютных единицах...

Tokolist · June 19, 2007

Вот че нашел

http://www.tigir.com/opacity.htm

смотрим от строчки под номером 96 "Internet Explorer 5.5+"

Пробовал эти варианты, но не помогает. Может чет не так делал...

Добавлено

Вот еще одно тому подтверждение

http://msdn.microsoft.com/library/default....lters/alpha.asp

Quote
The object that the filter is applied to must have layout before the filter effect displays. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

PacMan · June 20, 2007

yopopt said:
Это вс? замечательно, но тогда ответьте на такой вопрос: почему в данном контексте это НЕ РАБОТАЕТ?! Прич?м я уже не раз встречаю что filter: alpha(opacity=*); не хочет работать без установки ширины в абсолютных единицах...

Бизпанятия Я бы посмотрел, но времени увы не так много...

Sign In

выпадающее меню на CSS и полупрозрачный фон

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information