Жило-было меню на CSS. Жило не тужило, пока дизайнеру не захотелось добавить эффект при его появлении. Эффект из джкверевской библиотечки.
Була.
Свернутый текст
ul#hmenu a {
border: 0px;
padding: 0 13px;
float: none !important;
float: left;
display: block;
background-image:url('/images/menuWhite.jpg');
background-repeat:no-repeat;
color: #393939;
font: bold 12px/28px Tahoma;
text-decoration: none;
height: auto !important;
height: 1%;
line-height: 48px;
padding-top: 2px;
}
/* Main Menu Hover */
ul#hmenu a:hover,
ul#hmenu li:hover a,
ul#hmenu li.iehover a {
background-image:url('/images/menuBgHover.jpg');
color: #393939;
background-repeat:repeat;
}
/* Second Menu */
ul#hmenu li:hover li a,
ul#hmenu li.iehover li a {
border-top: 1px solid #FFFFFF;
float: none;
background: #F6F6F6;
color: #474747;
font-size: 8pt;
font-weight:normal;
line-height: 30px;
opacity: 0.95;
filter: alpha(opacity=95);
}
/* Second Menu Hover */
ul#hmenu li:hover li a:hover,
ul#hmenu li:hover li:hover a,
ul#hmenu li.iehover li a:hover,
ul#hmenu li.iehover li.iehover a {
border-top: 1px solid #FFFFFF;
background: #808298;
color: #FFFFFF;
opacity: 1;
}
ul#hmenu ul ul {
display: none;
position: absolute;
top: 0;
left: 240px;
}
ul#hmenu li:hover ul ul,
ul#hmenu li.iehover ul ul {
display: none;
}
ul#hmenu li:hover ul,
ul#hmenu ul li:hover ul,
ul#hmenu li.iehover ul,
ul#hmenu ul li.iehover ul {
display: block;
}
<div id="menuShell"> <a href="http://www.elinext.com" title="Software Development Services" class="menuElinextLogo"></a>
<ul id="hmenu">
<li><a href="/">Home</a> </li>
<li><a href="/services">Services</a>
<ul>
<li><a href="/mobiledevelopment">Mobile applications</a></li>
<li><a href="/cloudcomputing">Cloud computing</a></li>
<li><a href="/webdevelopment">Web solutions</a></li>
<li><a href="/itinfrastructure">IT infrastructure management</a></li>
<li><a href="/rnd">R&D Services</a></li>
<!--<li><a href="#">Accelerated product development</a></li>-->
</ul>
</li>
<li><a href="#">Industries</a>
<ul>
<li><a href="#">IT management</a></li>
<li><a href="#">Telecommunications</a></li>
<li><a href="#">Insurance & healthcare</a></li>
<li><a href="#">Enterprise manufacturing</a></li>
<li><a href="#">Data visualization</a></li>
<li><a href="#">3D modeling</a></li>
<li><a href="#">iOS & Android applications</a></li>
<li><a href="#">iPhone games</a></li>
<li><a href="#">Social networking</a></li>
<li><a href="#">Translation service portal</a></li>
<li><a href="#">e-Commerce</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Multimedia</a></li>
</ul>
</li>
блаблабла так еще много раз.
Суть в том, что надо переделать.. ДУмал как-то так..
$(document).ready(
function()
{
$("ul[id=hmenu]>li:has(span[id=snd])").each(function()
{
$(this).hover(function()
{
$("span[id=snd]").fadeIn(500, null) //В див[id=snd] я обрамил пункты второго уровня списка
},
function()
{
$("span[id=snd]").fadeOut(500, null);
});
});
});
И, собственно, оно работает.
Но это не то что надо. Надо эффект slideDown(). Так вот он не работает. Т.е.меню показывается как обычно.. => Надо что-то сделать с цсс, или вообще другой способ.. КОроче, посоветуйте, что бы с минимальными трудозатратами..
Спустя 2 часа, 16 минут, 22 секунды (22.11.2010 - 18:30) vital написал(а):
Печальная активность( Понимаю, я бы и сам не стал(
Спустя 11 минут, 53 секунды (22.11.2010 - 18:42) inpost написал(а):
vital
Обычно помогает начать всё заново! На этот раз первым реализовать эту функцию, а потом изходя из рабочей писать css.
Обычно помогает начать всё заново! На этот раз первым реализовать эту функцию, а потом изходя из рабочей писать css.
Спустя 2 минуты, 46 секунд (22.11.2010 - 18:45) vital написал(а):
| Цитата |
| Обычно помогает начать всё заново! |
Очень не хочется. Ибо переверстывать меню это п*здц простите. Очень хочется оставить все как есть, а найти путь по легче.
_____________
"Нужно быть готовым прислушиваться к тем, кто может тебя чему-нибудь научить. Иначе ты никогда не вырастешь."
Откровенно я никому ниразу не нагрубил. А дать подзатыльник зарвавшемуся юнцу, так это и ему на пользу, и мне в удовольствие. © AllesKlar