Консультации Портала - Консультация #142395

Задать вопрос Консультации Пользователи Форум

Задать вопрос экспертам

Консультация № 142395

27.08.2008, 14:34

0.00 руб.

0 11 0

Компьютеры Программирование

Здравствуйте, уважаемые эксперты. Не могу разобраться с CSS.
Мне нужно, чтобы при наведении курсора на ссылку у элементов ul изменялся параметр visibility.
Вот есть такая страница:

Код:

<style type="text/css">
a:hover{color:#F0F}
ul{visibility:hidden}
</style>
<a href='#'>test</a>
<ul><li>1</li><li>2</li></ul>

Что нужно дописать?
Есть страничка с выпадающим меню, но я не могу разобраться.

Код:


<!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>cssMenu by ice-w-ind</title>

<style type="text/css">
.cssMenu {
	width:745px;
	height:32px;
	font-size:0.85em;
	position:relative; /* когда значения left и top задаются относительно текста, за которым следует элемент */
	z-index:100;
	border-right:1px solid #000000;
	}
* html .cssMenu { /* А вот здесь первый hack для IE 5.5 чтоб корректно отобразить размер */
	width:746px;
	w\idth:745px;
	}
.cssMenu ul { /* Теперь уберем все отступы и точки в начале пунктов меню */
	padding:0;
	margin:0;
	list-style-type:none;
	}
.cssMenu li { /* Указываем элементам нашего списка относительую позицию и вертикальную организацию */
	float:left;
	width:149px;
	position:relative;
	}

.cssMenu a, .cssMenu a:visited { /* Здесь задаем стиль для элементов высшего уровня */
	display:block;
	font-size:11px;
	text-decoration:none;
	color:#000000;
	width:138px;
	height:30px;
	border:1px solid #000;
	border-width:1px 0 1px 1px;
	background:#ebe9ed;
	padding-left:10px;
	line-height:29px;
	}
* html .cssMenu a, * html .cssMenu a:visited { /* Еще один hack для корректного отображения IE 5.5 элементов меню */
	width:149px;
	w\idth:138px;
	}
.cssMenu ul ul a.list, .cssMenu ul ul a.list:visited { /* Указываем заний фон для элементов второго уровня из которых будут выпадать другие разделы */
	background:#CCCCCC url(li.gif) center right no-repeat;
	}
.cssMenu ul ul a.list:hover{ /* Теперь как будут выглядеть элементы второго уровня при наведении курсора */
	background:#999999 url(li.gif) center right no-repeat;
	}
.cssMenu ul ul :hover > a.list { /* И здесь для других броузеров */ 
	background:#999999 url(li.gif) center right no-repeat;
	}
.cssMenu ul ul ul a, .cssMenu ul ul ul a:visited{ /* Теперь для элементов меню третьего уровня */
	background:#CCCCCC;
	}
.cssMenu ul ul ul a:hover { /* Как будут выглядеть элементы третьего уровня при наведении курсора */
	background:#999999;
	}
.cssMenu ul ul { /* Теперь присваиваем выпадающим элементам абсолютную позицию и прячем их */
	visibility:hidden;
	position:absolute;
	height:0;
	top:31px;
	left:0;
	width:149px;
	border-top:1px solid #000;
	}
* html .cssMenu ul ul { /* И еще один hack для 5й версии */
	top:30px;
	t\op:31px;
	}
.cssMenu ul ul ul{ /* Позиция элементов третьего уровня */
	left:149px;
	top:-1px;
	width:149px;
	}
.cssMenu ul ul ul.left { /* А здесь позиция элементов третьего уровня для выпадания в левую сторону */
	left:-149px;
	}
.cssMenu table { /* Здесь указываем свойства таблицы. Необходимо для IE */
	position:absolute;
	top:0;
	left:0;
	border-collapse:collapse;
	}
.cssMenu ul ul a, .cssMenu ul ul a:visited { /* Свойства элементов <a> второго уровня */
	background:#ebe9ed;
	color:#000;
	height:auto;
	line-height:1em;
	padding:5px 10px;
	width:128px;
	border-width:0 1px 1px 1px;
	}
* html .cssMenu ul ul a, * html .cssMenu ul ul a:visited { /* И еще один hack для IE 5.5 */
	width:150px;
	w\idth:128px;
	}

/* Теперь определим свойства элементов, на которые наведен курсор */

.cssMenu a:hover, .cssMenu ul ul a:hover{ /* Элементы высшего уровня */
	color:#000000;
	background:#CCCCCC;
	}
.cssMenu :hover > a, .cssMenu ul ul :hover > a { /* Для остальных броузеров */
	color:#fff;background:#CCCCCC;
	}
.cssMenu ul li:hover ul, .cssMenu ul a:hover ul{ /* Показываем элементы второго уровня если навели на первый */
	visibility:visible;
	}
.cssMenu ul :hover ul ul{ /* Оставляем третий уровень невидимым */ 
	visibility:hidden;
	}
.cssMenu ul :hover ul :hover ul{ /* И теперь показываем элементы третьего уровня при наведении на соотвествующий пункт второго */
	visibility:visible;
	}

</style>

</head>

<body>
<div class="cssMenu">
<ul>
	<li><a href="../content/articles.php">Статьи
        <!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        <li><a href="../content/articles.php?mod=add">Добавить статью</a></li>
        <li><a href="../content/articles.php?mod=new">Показать новые</a></li>
        <li><a href="../content/articles.php?mod=all" class="list">Показать все<!--[if IE 7]><!--></a><!--<![endif]-->
	      <!--[if lte IE 6]><table><tr><td><![endif]-->
        	<ul>
            <li><a href="../content/articles.php?mod=all&sortby=date">Сортировать по дате</a></li>
            <li><a href="../content/articles.php?mod=all&sortby=size">Сортировать по размеру</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>        	
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="../content/downloads.php">Файлы<!--[if IE 7]><!--></a><!--<![endif]-->
	    <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        <li><a href="../content/downloads.php?mod=toprated">Самые популярные</a></li>
        <li><a href="../content/downloads.php?mod=recent">Самые новые</a></li>
        <li><a href="../content/articles.php?mod=all" class="list">Показать все<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
        	<ul>
            <li><a href="../content/downloads.php?mod=all&sortby=date">Сортировать по дате</a></li>
            <li><a href="../content/downloads.php?mod=all&sortby=size">Сортировать по размеру</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="http://forum.mysite.ru">Форум</a></li>
    <li><a href="../content/contacts.php">Контакты<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        <li><a href="../content/contacts.php?mod=emailus">Написать нам</a></li>
        <li><a href="../content/contacts.php?mod=managers" class="list">Наши менеджеры<!--[if IE 7]><!--></a><!--<![endif]-->
		    <!--[if lte IE 6]><table><tr><td><![endif]-->
        	<ul>
            <li><a href="../content/contacts.php?mod=managers&show=top">Директор</a></li>
            <li><a href="../content/contacts.php?mod=managers&show=sell">Менеджер по продажам</a></li>
            <li><a href="../content/contacts.php?mod=managers&show=empl">По работе с персоналом</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="../content/login.php">Мой аккаунт</a></li>
</ul>
</div>


<p> </p>
</body>
</html>

Большое Вам Спасибо!

Обсуждение

Неизвестный

27.08.2008, 14:52

общий

Код:


.cssMenu ul li:hover ul, .cssMenu ul a:hover ul{ /* Показываем элементы второго уровня если навели на первый */
	visibility:visible;
	}
.cssMenu ul :hover ul ul{ /* Оставляем третий уровень невидимым */ 
	visibility:hidden;
	}
.cssMenu ul :hover ul :hover ul{ /* И теперь показываем элементы третьего уровня при наведении на соотвествующий пункт второго */
	visibility:visible;
	}

Тут как раз стили для видимости объектов 2 и 3 уровня в случае наведения мышки на 1 и 2 уровень меню соответственно

Неизвестный

27.08.2008, 15:01

общий

Я же говорю: не могу разорбаться, как применить это к странице:

Код:

<style type="text/css">
a:hover{color:#F0F}
ul{visibility:hidden}
</style>
<a href='#'>test</a>
<ul><li>1</li><li>2</li></ul>

Я в CSS - новичок

Неизвестный

27.08.2008, 15:31

общий

Список первого уровня "обертывается" в DIV с классом "cssMenu".
Все названия пунктов в списках должны быть заключены в ссылки.
Только уберите стиль ul{visibility:hidden} - иначе у Вас скроется даже меню первого уровня.

А вообще такие вещи лучше делать по шагам, так быстрее понимаешь, что к чему. Предложу ссылку из моего Избранного:
http://www.webmascon.com/topics/coding/42a.asp

PS. Перечитав заново Ваш вопрос, возникли сомнения - а выпадающий ли список Вы делаете? Зачем нужна эта одиночная ссылка в начале кода?

Неизвестный

28.08.2008, 13:18

общий

Нет, мне нужен не выпадающий список.
Мне нужно изменять свойство visibility у одного элемента при наведении на другой элемент. Эти элементы не зависимы от друг друга. Выпадающий список - пример.

Неизвестный

28.08.2008, 13:31

общий

Тогда лучше сделать через JS+CSS:

Код:


<script>
function showMenu(vis)
{
   var obj = document.getElementById('hiddenmenu'); 
   if (!obj) return false;
   obj.className = (vis ? obj.className.replace("hidden","") : obj.className+' hidden');
}
</script>
<style type="text/css">
.hidden {
   visibility: hidden;
}
a:hover{color:#F0F}

</style>
<a href='#' onmouseover='showMenu(1);' onmouseout='showMenu(0);'>test</a>
<ul id='hiddenmenu' class='hidden'><li>1</li><li>2</li></ul>
123

Тут я специально добавил немного текста после списка, чтобы была видна разница между visibility: hidden и display: none;
В первом случае список не виден, но занимает место на странице. Если заменить на display: none, то текст переместится к ссылке.

PS. Вариант решения наподобие выпадающих списков получится несколько сложнее, так как там необходимо вложить этот список в один блок с ссылкой, кроме того из-за ИЕ6 все равно придется обратиться к помощи JavaScript.

Неизвестный

28.08.2008, 13:41

общий

Нет, я хочу узнать как это делается именно с помощью CSS, с помощью Js я знаю как.

Неизвестный

28.08.2008, 13:57

общий

На cssplay.co.uk много примеров, но я не могу разобратся с синтаксисом, а быстрый поиск книг ничего не дал. Вот и решил задать вопрос сюда

Неизвестный

28.08.2008, 14:08

общий

Тогда объясню:

1. Создается блок (DIV, UL или еще что-то).
2. В него вкладывается требуемый объект. При загрузке страницы он скрывается с помощью стилей:
.cssMenu ul ul {
visibility:hidden;
}
.cssMenu ul ul - список второго уровня в объекте с классом cssMenu
3. Теперь необходимо его показать при наведении на родительский объект:
.cssMenu ul li:hover ul, .cssMenu ul a:hover ul{
visibility:visible;
}
Тут .cssMenu ul li:hover ul - это список второго уровня, находящийся в том пункте первого списка, на который навели мышь (псевдокласс :hover).
Первый вариант сделан для "нормальных" браузеров (ИЕ выше 6 и остальные), которые понимают псевдокласс :hover. Дело в том, что ИЕ6 использует :hover только для ссылок, что неудобно, т.к. нельзя вкладывать в ссылки списки и прочие объекты. Поэтому для ИЕ6 либо выполняют JS-код обработчиков OnMouseOver/OnMouseOut, либо вставляют таблицы НЕ ЗАКРЫВАЯ ссылку (этот вариант приведен Вами).

Все остальные стили используются больше для позиционирования и красивого отображения.

Неизвестный

28.08.2008, 14:19

общий

.cssMenu ul a:hover ul - это означает, что при наведении на элемент a , который находится в списке ul, который находится в блоке <div class=cssMenu> , будет отображаться элемент ul , который находится в списке ul, который находится в блоке <div class=cssMenu> ?

Неизвестный

28.08.2008, 14:36

общий

Не совсем так.
.cssMenu ul a:hover ul - это просто фильтр, нечто вроде XPath.
Разбираем последовательно объекты:
Стиль применяется к объектам UL в ссылке "под мышью", находящейся в другом объекте UL блока со стилевым классом cssMenu. Причем он может быть применен и к UL третьего уровня, если тот вложен в один из объектов ссылки.

Более сложный пример:
.cssMenu ul a:hover >ul
В данном варианте стиль применится к НЕПОСРЕДСТВЕННОМУ потомку ссылки.

Советую прочитать цикл статей о CSS (CSS по шагам) - очень хорошо расписаны селекторы.

Неизвестный

28.08.2008, 14:43

общий

Спасибо, будем учиться.

Форма ответа

Отправка постов/ответов доступна только зарегистрированным и подтвержденным пользователям.

Если Вы уже зарегистрированы на Портале - войдите в систему, если Вы еще не регистрировались - пройдите простую процедуру регистрации.