Странный эффект с выпадающим меню

Ramles · December 29, 2007

Доброго всем!

Возникла проблема при создании выпадающего меню на сайте: http://dev.kp.ru/

Пункт "Спецпроекты" в главном горизонтальном меню.

Нормально отображается в ИЕ, Опере, а вот в Мозилле не хочет. Фон и текст выводятся поверх меню

Разбирался...

Нашел, что есть какая-то непонятная зависимость у перекрывающих выпадающее меню блоков со свойством overflow

При значении hidden - перекрывает, при значении visible - нет.

Но это решило часть проблемы, т.к. например у закладок на главной странице что работают с помощью ява-скрипта этого значения вообще нет, так же как и у надписи "Финансы". Выставление значения не помогает.

Вобщем вот весь код:

ХТМЛ:

<li class="last"><noindex><a href="#" onmouseover="showdiv('menuS3');" onmouseout="hidediv('menuS3');">Спецпроекты</a></noindex>
<ul id="menuS3" class="menuS" onmouseover="showdiv('menuS3');" onmouseout="hidediv('menuS3');">
 <li><a href="http://kp.ru/daily/auto/">Авто</a></li>
 <li><a href="http://kp.ru/daily/rubric/tv/">Телевизор "КП"</a></li>
 <li><a href="http://kp.ru/daily/health/">Красота и здоровье</a></li>
 <li><a href="http://kp.ru/daily/home/">Ваш дом и дача</a></li>

 <li><a href="http://kp.ru/daily/rest/">Досуг и туризм</a></li>
 <li><a href="http://kp.ru/daily/digital/">Умные вещи</a></li>
 <li><a href="http://kp.ru/daily/doxod/">Личные деньги</a></li>
 <li><a href="http://kp.ru/daily/animal/">Живой уголок</a></li>
 <li><a href="http://kp.ru/daily/shop/">За покупками</a></li>
 <li><a href="http://kp.ru/daily/gurman/">Приятного аппетита</a></li>

 <li><a href="http://kp.ru/daily/education/">Образование и работа</a></li>
 <li><a href="http://kp.ru/daily/bookcollection/">Книжная коллекция "КП"</a></li>
</ul>
</li>

ЦСС:

#main-menu ul li ul li {
 float: none;
 position: relative;
 width: 125px;
 top: 20px;
 display: block;
 overflow: visible;
 z-index: 256;
 padding: 3px 3px 4px 8px;
 border-right: 0px;
}

.last li {
 background-color: #568FC1;
 padding: 8px 0;
}

.last ul li a {
 width: 90px;
 background: none;
}

.menuS {
position: absolute;
left: 730px;
top: 215px;
visibility: hidden;
overflow: visible;
z-index: 256;
}

.menuS li {
position: relative;
width: 127px;
top: 20px;
overflow:visible;
z-index: 256;
}

Ну и ЯваСкрипт:

function showdiv(name){
if (document.all){
 eval('document.all.' + name + '.style.visibility = "visible" ');
} else if (document.layers) {
 eval('document.layers["' + name + '"].visibility = "visible" ');
} else if (document.getElementById) {
 eval('document.getElementById("' + name + '").style.visibility = "visible" ');
}}

function hidediv(name){
if (document.all){
 eval('document.all.' + name + '.style.visibility = "hidden" ');
} else if (document.layers) {
 eval('document.layers["' + name + '"].visibility = "hidden" ');
} else if (document.getElementById) {
 eval('document.getElementById("' + name + '").style.visibility = "hidden" ');
}}

Я понимаю, что проблема сия не 5 минут подумать, поискать.

Поэтому не за "спасибо" прошу помочь.

klierik · December 29, 2007

помещайте код в соответствующие теги code

Ramles · December 30, 2007

Сори, исправил.

Ekstazi · December 30, 2007

Не уверен, но у меня возникало что-то похожее при использовании z-index.

yopopt · December 30, 2007

Ramles, кто Вас научил так верстать? Чтобы исправить это нужно перевертать пол страницы, и, возможно, понадобятся некоторые перестановки в голове. Вы без нужды используете всюду position, overflow и z-index. Давайте разбер?м блок с id "sensation_inset1" и блок с классом "inset-sensation".

Вот их html:

1. <ul class="inset-sensation">
2. <li class="act" id="sensation_tab1" onclick="on_inset('sensation', 1)">
3. <div>Общество</div>
4. </li>
5. <li  id="sensation_tab2" onclick="on_inset('sensation', 2)">
6. <div>Картинки дня</div>
7. </li>
8. <li  id="sensation_tab3" onclick="on_inset('sensation', 3)">
9. <div>Анекдоты</div>
10. </li>
11. </ul>
12. <div id="sensation_inset1">
13. <ul id="sensation">
14. <li class="top">
15. <a href="/daily/24027.5/92340/"><img title="<a href=/tests/send/>У вас корпоративчик?</a>" alt="<a href=/tests/send/>У вас корпоративчик?</a>" src="/upimg/small/121023.jpg" /></a>
16. <h3><a href="/daily/24027.5/92340/"><a href=/tests/send/>У вас корпоративчик?</a></a></h3>
17. <a href="/daily/24027.5/92340/"><a href=/tests/send/>Тогда пришлите нам забавное <FONT color=#ff0000><STRONG>[видео]</STRONG></FONT>. Автор лучшего сюжета получит славу и гонорар! Загрузить файл до 100 МВ можно через удобную форму</a></a>
18. <a href="/daily/24027.5/92340/"></a>
19. </li>
20. </ul>
21. <div class="left-link"><a href="/daily/life/">Все статьи на тему <strong>Общество</strong></a></div>
22. </div>

Это стили (стили для ссылок и класс left-link я опустил):

.inset-sensation {
	position: relative;
	top: 1px;
	list-style: none;
	width: 295px;
	overflow: hidden;
}

.inset-sensation li {
	text-align: center;
	float: left;
	color: #fff;
	background: url(/_img/tabbg4.gif) no-repeat top right;
	margin-right: 1px;
	border-bottom: solid 1px #fff;
	margin-bottom: 1px;
	cursor: hand;
	cursor: pointer;
}

.inset-sensation li div {
	text-align: center;
	padding: 4px 10px 6px 10px;
	float: left;
	background: #568fc1;
	color: #fff;
	background: url(/_img/tabbg3.gif) no-repeat top left;
}

.inset-sensation li.act {
	font-weight: bold;
	border: 0;
	padding: 0;
	background: url(/_img/tabbg2.gif) no-repeat top right;
	margin: 0 1px 1px 0px;
}
.inset-sensation li.act div {
	color: #3a3a3a;
	margin-bottom: 0;
	padding: 4px 10px 8px 10px;
	background: url(/_img/tabbg1.gif) no-repeat top left;
}
#sensation {
	padding: 10px 10px 5px 10px;
	border: solid 1px #568fc1;
	list-style: none;
	width: 273px;
}

#sensation li {
	margin-bottom: 5px;
}
#sensation li.top img {
	width: 68px;
	float: left;
	margin: 0 11px 5px 0;
	position: relative;
	top: 2px;
	border: solid 1px #646464;
}

#sensation li.top {
	width: 100%;
	overflow: hidden;
}

Приступим к html.

1. У Вас в доктайп объявлен xhtml, а атрибутов title и alt нигде не видно.

2. В строках 16 и 17 ссылка вложена в ссылку. Нельзя так. В строке 18 ссылка вообще пуста.

3. Также в строке 17 используется тег font. The font tag is deprecated.

Теперь, исправив предыдущие три пункта, убираем в привед?нном выше css все position и overflow. Развалилось? А как-же! Теперь блоку #sensation прописываем margin-top:24px;, тем самым сместив его под кнопки и финальным шрихом удаляем из css #sensation li.top и вносим мелкие коррективы:

.inset-sensation {
	list-style: none;
	width: 295px;
}

.inset-sensation li {
	float: left;
	color: #fff;
	background: url(/_img/tabbg4.gif) no-repeat top right;
	margin-right: 1px;
	border-bottom: solid 1px #fff;
	margin-bottom: 1px;
	cursor: pointer;
}

.inset-sensation li div {
	padding: 4px 10px 6px 10px;
	background: #568fc1 url(/_img/tabbg3.gif) no-repeat top left;
}

.inset-sensation li.act {
	font-weight: bold;
	border: 0;
	padding: 0;
	background: url(/_img/tabbg2.gif) no-repeat top right;
	margin: 0 1px 1px 0px;
}
.inset-sensation li.act div {
	color: #3a3a3a;
	margin-bottom: 0;
	padding: 4px 10px 8px 10px;
	background: url(/_img/tabbg1.gif) no-repeat top left;
}
#sensation {
	padding: 10px 10px 5px 10px;
	border: solid 1px #568fc1;
	list-style: none;
	width: 273px;
}

#sensation li {
	margin-bottom: 5px;
}
#sensation li.top img {
	width: 68px;
	float: left;
	margin: 2px 11px 5px 0;
	border: solid 1px #646464;
}

Теперь меню нормально работаетает, а css-код заметно упростился. Подобным образом необходимо переверстать значительную часть кода страницы. Данный код я толком не тестировал, так что могут быть мелкие баги, которые легко исправимы.

Sign In

Странный эффект с выпадающим меню

Question

Ramles

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Ramles

Link to comment

Share on other sites

Ekstazi

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information