Верстка вертикального меню на основе таблицы

Tord002 · April 16, 2013

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

Не работает переход с ячейки главного пункта меню на ячейку подпункта.

Проблема понятна - курсор попадает на границу таблицы.

Если границу таблицы убрать с помощью ( cellspacing="0") все работает, но при этом нарушается эстетика и задумка дизайна.

Подскажите возможные варианты решения с сохранением внешнего вида таблицы.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Меню из таблицы</title>
<style type="text/css">
.таблица {font-family:Tahoma,Geneva,sans-serif;font-size:11px;color:#FFF;}
.none {display:none;}
.block {display:;}
.default {border-top: 2px solid #555555; border-bottom: 2px solid #555555; color: #555555;}
.over {background-color:#FFF;border-top:2px solid #555555;border-bottom:2px solid #555555;cursor:pointer;color:#555555}
.out {background-color: #555555; color: #FFF}
</style>
<table width="100" >
	 <tr height="25" class="таблица" >
	 <th bgcolor="#555555" onmouseover="className='over';document.getElementById('2').className='block'" onmouseout="className='out';document.getElementById('2').className='none'">Пункт</a></th>
	 </tr >
	 <tr height="25" class="таблица" >
		 <th id="2" class="none" bgcolor="#555555" onmouseover="className='over'"onmouseout="className='none'">Подпункт</th>
	 </tr>
	 </table>
</head>
<body>
</body>
</html>

Int · April 16, 2013

А это нормально, что таблица не в <body>, что ссылка не открыта?

Инедтификаторы можно ставит цифрой? Я не помню.

Чтобы это всё не ковырять, посоветую поставить задержку перед исчезновением подпункта. Как раз мышь успеет перейти на него.

Tord002 · April 16, 2013

Ошибки исправлю. Спасибо!

Как реализовать задержку?

Edited April 17, 2013 by Tord002

Tord002 · April 17, 2013

Сделал.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Меню из таблицы</title>
<style type="text/css">
.таблица {font-family:Tahoma,Geneva,sans-serif;font-size:11px;color:#FFF;}
.none {display:none;}
.block {display:;}
.over {background-color:#FFF;border-top:2px solid #555555;border-bottom:2px solid #555555;cursor:pointer;color:#555555}
.out {background-color: #555555; color: #FFF}
</style>
</head>
<body>
<script>
function go() {
document.getElementById('id2').className='none';
}
function on() {
timeoutId = setTimeout(go, 500)
}
function off() {
clearTimeout(timeoutId)
}
</script>
<table width="100" >
				 <tr height="25" class="таблица" >
				 <th bgcolor="#555555" onmouseover="className='over';document.getElementById('id2').className='block'" onmouseout="className='out';on()">Пункт</th>
				 </tr >
				 <tr height="25" class="таблица" >
								 <th id="id2" class="none" bgcolor="#555555" onmouseover="className='over';off()"onmouseout="className='none'">Подпункт</th>
				 </tr>
</table>
</body>
</html>

Тема закрыта

Edited April 17, 2013 by Tord002

Sign In

Верстка вертикального меню на основе таблицы

Question

Tord002

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Int

Link to comment

Share on other sites

Tord002

Link to comment

Share on other sites

Tord002

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information