Выподающее CSS-меню с хаком для ie6

redaktor.lvivske.info

Осваиваюсь на форуме
15
0 / 1

Выподающее CSS-меню с хаком для ie6

« : 06.01.2012, 22:38:40 »

Добрый день. Не первый день ищу в интернете хорошее решение выподающего CSS-меню. Но сколько не находил (и с хаком для ie6) ни одно не работает в ie6. Обязательно, чтоб скрипт был только для ie6. Заранее спасибо.

Записан

redaktor.lvivske.info

Осваиваюсь на форуме
15
0 / 1

Re: Выподающее CSS-меню с хаком для ie6

« Ответ #1 : 11.01.2012, 01:40:48 »

Вроде как нашёл неплохое решение
http://www.joomla15.ru/examples/3iedropdown/index.html

Но IE6 не работает

Скачал на комп. Открываю index.html в IE6 всё роботает.

Все файлы копирую в файл шаблона. переношу с index.html в index.php Но в IE6 не работает.

Вот мой index.php

Код: php

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >  
<head>  
<jdoc:include type="head" />  
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/cssdropdownmenu/css/full.css"  />
 <!--[if IE]>
<style type="text/css">
/*
 *		Очеловечивание IE6
 */

body {
	behavior:url("csshover3.htc");
}
</style>
<![endif]-->
</head> 
<body>
<div id="kings_of_classic_rock">
			<div class="moduletable">
				<ul class="menu">
					<li class="parent active"><a href="#Pink Floyd"><span>Pink Floyd</span></a>
						<ul>
							<li class="parent"><a href="#The Piper at the Gates of Dawn"><span>The Piper at the Gates of Dawn</span></a>
								<ul>
									<li><a href="#"><span>Astronomy Domine</span></a></li>
									<li><a href="#"><span>Lucifer Sam</span></a></li>
								</ul>
							</li>
							<li><a href="#A Saucerful of Secrets"><span>A Saucerful of Secrets</span></a></li>
							<li class="parent"><a href="#Animals"><span>Animals</span></a>
								<ul>
									<li><a href="#Pigs On The Wing (Part 1)"><span>Pigs On The Wing (Part 1)</span></a></li>
									<li><a href="#Dogs"><span>Dogs</span></a></li>
								</ul>
							</li>
							<li><a href="#Obscured by Clouds"><span>Obscured by Clouds</span></a></li>
							<li><a href="#The Dark Side of the Moon"><span>The Dark Side of the Moon</span></a></li>
							<li class="parent"><a href="#The Wall"><span>The Wall</span></a>
								<ul>
									<li><a href="#In The Flesh?"><span>In The Flesh?</span></a></li>
									<li><a href="#The Thin Ice"><span>The Thin Ice</span></a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="parent"><a href="#Creedence Clearwater Revival"><span>Creedence Clearwater Revival</span></a>
						<ul>
							<li><a href="#Bayou Country"><span>Bayou Country</span></a></li>
							<li><a href="#Green River"><span>Green River</span></a></li>
							<li class="parent"><a href="#Willy and the Poor Boys"><span>Willy and the Poor Boys</span></a>
								<ul>
									<li><a href="#Down on the Corner"><span>Down on the Corner</span></a></li>
									<li><a href="#It Came Out of the Sky"><span>It Came Out of the Sky</span></a></li>
								</ul>
							</li>
							<li><a href="#Cosmo's Factory"><span>Cosmo's Factory</span></a></li>
							<li><a href="#Pendulum"><span>Pendulum</span></a></li>
						</ul>
					</li>
					<li class="parent"><a href="#The Guess Who"><span>The Guess Who</span></a>
						<ul>
							<li class="parent"><a href="#American Woman"><span>American Woman</span></a>
								<ul>
									<li><a href="#American Woman"><span>American Woman</span></a></li>
									<li><a href="#No Time"><span>No Time</span></a></li>
								</ul>
							</li>
							<li><a href="#Share the Land"><span>Share the Land</span></a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div style="clear:both"></div>
		<div id="links">
			<ul>
				<li><a href="css/full.css">Полная версия CSS-файла с комментариями</a></li>
				<li><a href="css/tidy.css">CSS-файл</a>, сжатый при помощи <a href="http://csstidy.sourceforge.net">csstidy</a></li>
				<li><a href="http://semlabs.co.uk/journal/free-web-design-icon-set">Пиктограммы папок</a></li>
			</ul>
		</div>
		<div id="validators">
			<a rel="nofollow" href="http://validator.w3.org/check?uri=referer">
				<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
			</a>
			<a rel="nofollow" href="http://jigsaw.w3.org/css-validator/check/referer">
				<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Правильный CSS!" />
			</a>
		</div>
		<div id="license">
			<a rel="license nofollow" href="http://creativecommons.org/licenses/by-sa/3.0/">
				<img alt="Creative Commons License" style="border-width: 0pt;" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" />
			</a>
		</div>
</div>
</body>  
</html>

Вот templateDetails.xml

Код: xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
        <name>cssdropdownmenu</name>
<creationDate></creationDate>
<author></author>
<authorEmail></authorEmail>
<authorUrl></authorUrl>
<version>2.0</version>
<description></description>
         <files>
                 <filename>index.php</filename>
                 <filename>templateDetails.xml</filename>
                 <filename>css/full.css</filename>
				 <filename>css/tidy.css</filename>
				 <filename>csshover3.htc</filename>
				 <folder>css</folder>
         </files>
         <positions>
		          
				  <position>top</position>
                  
         </positions>
</install>

Мой CSS такой же как и в ссылке

Код: css

/*
 *		Подключение whatever:hover
 *
 * 	Чтобы не было проблем с валидацией CSS, лучше подключать библиотеку
 * через HTML следующим кодом:
 *	<!--[if lte IE 6]>
 *		<style type="text/css">
 *			body { behavior:url("csshover3.htc"); }
 *		</style>
 *	<![endif]-->
 * А следующее правило, соответственно, следует удалить
 */

body {
	behavior:url("csshover3.htc");
}

/*
 *		Очистка значений по-умолчанию
 */

ul.menu,
ul.menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}


/*
 *		Рабочий скелет меню
 *
 *		Задача: Простое появление и исчезание пунктов меню при наведении и исчезновении курсора.
 * 			Стиль не более необходимого для отображения трёхуровневого меню.
 *		Источник: http://www.xs4all.nl/~peterned/csshover.html
 */

ul.menu ul,
li:hover ul ul { display:none; }
li:hover ul,
li:hover li:hover ul { display:block; }

/*
 *		Приведение меню к стандартному виду строки с выпадающими пунктами
 *		Задача: Создать минимально оформленное горизонтальное меню с корректно-функционирующими подпунктами
 */

ul.menu li {
	float: left;
	position: relative;
}

ul.menu li,
ul.menu ul,
ul.menu li li a {
	width: 180pt;
}

ul.menu ul {
	position: absolute;
	left: 0;
}

ul.menu ul {
	clear: left;
}

ul.menu li li {
	float: none;
	position: relative;
}

ul.menu li li a {
	display: block;
}

ul.menu li li ul {
	left: 180pt;
}

/*
 *		Визуальное оформление меню
 */

ul.menu {
	font-family: arial, sans-serif;
	font-size: 11px;
}

ul.menu li a span {
	padding-left: 23px;
}
ul.menu ul {
	top: 2em;
	z-index: 200;
}
ul.menu a {
	text-decoration: none;
	line-height: 2;
}

ul.menu li {
	background-image: url(../music.png);
	background-repeat: no-repeat;
	background-position: 1.1% center;
}

ul.menu li.parent {
	background-image: url(../folder-closed.png);
}
ul.menu li.parent:hover {
	background-image: url(../folder.png);
}

ul.menu li:hover {
	background-color: #eee;
}

ul.menu ul {
	border: solid 1px #ddd;
	background-color: white;
}

ul.menu li li ul {
	top: -1px;
}

« Последнее редактирование: 11.01.2012, 01:43:56 от redaktor.lvivske.info »

Записан

redaktor.lvivske.info

Осваиваюсь на форуме
15
0 / 1

Re: Выподающее CSS-меню с хаком для ie6

« Ответ #2 : 11.01.2012, 01:45:38 »

Может неправильно подключаю файл csshover3.htc?

Записан

Efanych

Глобальный модератор
4684
644 / 0
Меняю свою жизнь на 360°!

Re: Выподающее CSS-меню с хаком для ie6

« Ответ #3 : 11.01.2012, 10:37:56 »

Может. Судя по

Цитировать

behavior:url("csshover3.htc");

Он у вас должен лежать в корне сайта.
Хотя не уверен. Это если в CSS подключать, то так. А из индекса попробуйте с доменом прописать.

Записан

Создание сайтов, шаблонов, помощь в решении проблем.

убрать из меню заголовки h3 Автор nexter	Ответов: 19 Просмотров: 6473	03.02.2020, 18:49:47 от durte
При добавлении нового пункта меню не отображается содержимое Автор Denko	Ответов: 2 Просмотров: 2150	16.01.2020, 18:40:55 от Denko
Не нажимается пункт меню на мобильной версии Автор Sensession	Ответов: 7 Просмотров: 3107	04.01.2020, 16:45:27 от xpank
Не отображаются пункты в меню Автор physic	Ответов: 20 Просмотров: 21403	20.09.2019, 16:54:01 от beliyadm
Как в ARI Ext Menu добиться работы параметра "Показать в меню"? Автор vasmed	Ответов: 1 Просмотров: 2365	01.03.2019, 11:12:18 от vasmed

Выподающее CSS-меню с хаком для ie6 - Joomla 1.5: Вопросы по работе с меню

Новости Joomla

Что нового в joomla 5.1?

Добавление полей Joomla в результаты Умного Поиска при помощи JFilters

Вышел JoomShopping 5.4.0

redaktor.lvivske.info

Выподающее CSS-меню с хаком для ie6

redaktor.lvivske.info

Re: Выподающее CSS-меню с хаком для ie6

redaktor.lvivske.info

Re: Выподающее CSS-меню с хаком для ie6

Efanych

Re: Выподающее CSS-меню с хаком для ie6

Похожие темы