Добрый день.
Заранее прошу прощения, если подобный вопрос был. Искал, но как-то неудачно.
В данный момент я делаю выпадающее меню для социальных закладок.
При наведении мышкой на пункт главного меню "Закладки" выпадает нижняя панелька. Все это сопровождается подсветкой на фоне. Потом мышка переходит на панель закладок, подсветка у панельки остается, а у у пункту "Закладки" пропадает. (см.картинку)
ВОПРОС: Как прописать CSS что бы при наведении на панельку подсвечивался пункт "Закладки"
Примечание: Почему то при наведении на панельку загарается иконка над надписью "Закладки". Так и не понял почему, нигде такой зависимости не увидел.
Примечание 2: Подсветка произсодится полупрозрачной градиентной ПГНшкой
Вот код (HTNL+CSS) всего этого блока:
/***************************************************/
/********************* HTML ************************/
/***************************************************/
<div class="header-right">
<ul class="top-menu">
<li class="delitel"><span> </span></li>
<li>
<span class="bookmarks-menu"> </span>
<a href="#">Закладки</a>
<div class="socials-menu rc10">
<div class="chertochka"> </div>
<ul>
<li class="social-icons item-1">
<a href="..."><img src="..." /></a>
</li>
</ul>
<div>
<span class="link-socials item-1">...</span>
</div>
</div>
</li>
<li class="delitel"><span> </span></li>
<li>
<span class="reg-menu"> </span>
<?php wp_register('', ''); ?>
</li>
<li class="delitel"><span> </span></li>
<li>
<span class="login-menu"> </span>
<?php wp_loginout(get_option('home')); ?>
</li>
</ul>
</div>
/***************************************************/
/********************** CSS ************************/
/***************************************************/
.delitel {
background:#637285 url(images/delitel.png) repeat scroll 0 0;
height:100px;
margin:0;
width:1px;
}
ul.top-menu {
height:100px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;;
}
ul.top-menu li {
display:inline;
float:left;
padding:0;
text-align:center;
}
ul.top-menu li:hover {
display:inline;
float:left;
padding:0;
}
ul.top-menu li a {
color:#CCCCCC;
display:block;
padding:75px 15px 10px;
}
ul.top-menu li a:hover {
background:transparent url(images/hover-top-menu.png) repeat-x scroll 0 0;
color:#FFFFFF;
display:block;
padding:75px 15px 10px;
}
ul.top-menu ul li a {
float:left;
padding:1px;
}
ul.top-menu ul li a:hover {
float:left;
padding:1px;
}
.login-menu {
background:transparent url(images/login-g.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}
ul.top-menu li:hover span.login-menu {
background:transparent url(images/login.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}
.bookmarks-menu {
background:transparent url(images/bookmark-g.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}
ul.top-menu li:hover span.bookmarks-menu {
background:transparent url(images/bookmark.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}
.reg-menu {
background:transparent url(images/reg-g.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}
ul.top-menu li:hover span.reg-menu {
background:transparent url(images/reg.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}
.socials-menu {
background:#223146 none repeat scroll 0 0;
border:1px solid #637285;
float:none;
height:35px;
margin:-1px -60px 0;
padding:5px 5px 16px;
position:absolute;
width:auto;
}
.socials-menu div {
font-size:0.8em;
}
.socials-menu span {
height:10px;
left:7px;
position:absolute;
}
.chertochka {
background:#223146 none repeat scroll 0 0;
height:1px;
margin:-6px 0 0 54px;
position:absolute;
width:87px;
}
ul.top-menu li:hover div {
background:#223146 url(images/hover-top-menu.png) repeat-x scroll 0 -99px;
}
А можно ссылку на сайт? Или этого нет в интернете?
Вот, добавил тему на свой блог:
http://alex-fadeev.com/blog/
Upd: правда я ее еще не проверял на работу в других браузерах. У меня FireFox 3.5
Кстати говоря, появился еще один дополнительный вопрос:
Иконки над подписями реализованны путем прописывание в background span’а картинки. При наведении мышки на элемент а – фон у а подсвечивается нормально. Но при наведении на span подсветка пропадает. Что-то у меня снова не вышло построить эту зависимость…
на сайте firefox.com увидел именно такое меню, как мне нужно. То бишь при наведении мышки на подменю, корневое меню остается активным. После изучения css-кода была выявлена следующая причина:
Кто может подсказать, что это?
Судя по yuimenubaritemlabel, это менюха, использующая YUIню.
Уже изучил эту штуку – альтернатива jQuery. собственно для wordpress’а не вариант.
Подозреваю, что едиснтвенный выход – это применить тот же jQuery…
Совершенно верно! YUI – редкая …ня 😀
IMHO лучшее решение – jQuery + UI. Особенно для WP.
Кстати говоря о jQuery…
Не знаю, тупой вопрос, или нет, но:
Во всех темах, с которыми я работал, все время подключался jQuery 1.2.6 из своей собственной папки в теме. При попытке подключить 1.3.2 от вордпресса – все рушилось. Закономерный вопрос: Почему?
Вот и сейчас пытаюсь все это дело оформить с помощью jQuery из вордпресса – не пашет нифига. А в другой теме, где определяется своя библиотека 1.2.6 – этот скрипт нормально работает.
Для примера приведу простейший скрипт выпадающего меню, который собственно и не пашет с библиотекой 1.3.2 но работает с 1.2.6:
Ну вот, все сделал.
Код скрипта, может кому-нить типо меня поможет =)