ПОДСВЕТКА ОТДЕЛЬНОЙ СТРОКИ МЕНЮ при наведении

Defender1 · February 13, 2008

А как сделать то, что изображено на картинке, чтобы при наведении подсвечивалась строка. Вроде както легко, но убей не помню как ... printfile.php?action=attach&img=yes&f=7&t=330&id=1

Mordraug · February 13, 2008

Примерно так:

<!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</title>
		<style type="text/css">
			#menu {
				width:120px; /* Ширина блока меню */
				text-align:left;
				}

			ul.menulist , ul.menulist li {
				padding:0;
				margin:0;
				display:inline;
				list-style:none;
				}

			a.menuitem {
				display: block;
				width:auto;
				padding-left:22px; /*отступ слева в блоке элемента меню для отображения маркера*/
				text-decoration:none;
				color:#000;
				background:transparent url(bullet.png) left center no-repeat; /*маркер*/
				}

			a.menuitem:hover {
				color:#fc1;
				background-color:#222;
				text-decoration:none;
				}
		</style>
	</head>

	<body>
		<div id="menu">
			<ul class="menulist">
				<li><a href="#" class="menuitem">MENUITEM 1</a></li>
				<li><a href="#" class="menuitem">MENUITEM 2</a></li>
				<li><a href="#" class="menuitem">MENUITEM 3</a></li>
				<li><a href="#" class="menuitem">MENUITEM 4</a></li>
				<li><a href="#" class="menuitem">MENUITEM 5</a></li>
				<li><a href="#" class="menuitem">MENUITEM 6</a></li>
			</ul>
		</div>

	</body>
</html>

Если в качестве элементов меню будут использоваться картинки ? то немного по-другому: нужно будет в стилях для каждого элемента делать свой класс, указывать размеры, и фоном назначать картинку целиком (в каждой картинке сразу 2 состояния одно над дргим), а не только маркер, и указывать позиционирование бэкграунда так чтобы при неактивном состоянии из картинки бралась первая половина, а при активном (курсор наведен) - смещалось на вторую. (Подробнее: смотри статью Эффект перекатывания с помощью стилей ).

Defender1 · February 13, 2008

Все бы хорошо с этим методом, но подсвечивается не вся строка, как это показано на ресунке, а только до конца слова MENUITEM ?, а как сделать чтобы вся подсвечивалась?

Defender1 · February 13, 2008

Ага, разобрался, убрал width:120px; /* Ширина блока меню */

Но еще вопрос, а как отступ слева сделать?

Mordraug · February 13, 2008

отступ для чего?

Внешний отступ слева(например для div):

margin-left: 10px;  /* отступ слева 10px */

внутренний отступ(поле его называют еще):

padding-left: 10px;  /* отступ слева 10px */

Почитайте Рецепты ? раздел "Поля и отступы".

Vlad111 · February 27, 2008

Тоже посмотрел этот пример... В Опере и IE отображается нормально, но вот в мозилле неправильно (делает зачемо большое расстояние между линками по вертикали) соответсвенно увеличивает высоту самой ячейки в связи с чем остальные колонки из таблицы отображаются неправильно, несмотря на то, что высота фиксирована.

Как справится тогда с мозиллой?)

Vlad111 · February 27, 2008

Никто не знает почему так мозилла реагирует?(

Mordraug · February 27, 2008

Вы про какой пример говорите? про тот, который в уроке, или про тот который я привел выше?.. если тот что я привел ? то никакой разницы в отображении нет.. только что проверил.

Есть еще один момент ? некоторые браузеры (IE например) учитывает еще line-height шрифта используемого на странице.. тоесть если элемент по вертикали меньше размера шрифта ? элемент будет по высоте равен line-height шрифта. чтобы это обойти нужно для такого элемента либо указать font-size:1px; либо line-height:1px;

Если у вас проблема не в этом ? тогда я не знаю откуда ноги растут.. покажите ваш пример

Vlad111 · February 28, 2008

line-height:1px;

Этот параметр мозилла и опера понимают по разному и соответсвенно расстояние по вертикали разное!

Более универсально тега нет, который понимался бы одинаково и мозилой и оперой?)

Vlad111 · February 28, 2008

говорю про пример данный выше

homm · February 28, 2008

Никто не знает почему так мозилла реагирует?(

Мозала реагирует правильно, автор почему-то сверстал в совместимом режиме, который на мой взгляд является извращением, просто переведите в режим strict.

Vlad111 · February 28, 2008

А что это за режим strict, чтото не встречал Что именно поменять?

Mordraug · February 28, 2008

А что это за режим strict, чтото не встречал Что именно поменять?

имелось ввиду использовать доктайп строгого соответствия:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Vlad111 · February 29, 2008

Кстати еще минус приведенного примера с маркерами. Когда наводишь мышой, исчезает маркур bullet/ Я его заменил картинкой.но вот линки отображаются по низу картинки, а не по середине как показано на картинке(

Vlad111 · February 29, 2008

А смысл вообще в других режимах, если

quot;-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

отображает везде правильно...нубский вопрос, но всеже?)

Vlad111 · March 5, 2008

ВСе разобрался во всем)

Sign In

ПОДСВЕТКА ОТДЕЛЬНОЙ СТРОКИ МЕНЮ при наведении

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information