Jump to content
  • 0

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


Ziggy Stardust
 Share

Question

Пробую накидать выпадающую менюшку реализованную без всякого 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>

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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

.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);

}

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
  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 пикселей...

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

Хотя...

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

Link to comment
Share on other sites

  • 0

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

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

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

Когда задаю:

.topnav LI UL {

width:XXXpx;

...

opacity: 0.80;

filter: alpha(opacity=80);

}

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

Вот че нашел

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.
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy