Форум Сайтостроение Веб-строительство

Как изменить код чтобы добавить запаздывание в выпадающем меню CSS?

12
T
На сайте с 25.03.2011
Offline
121
Toker
963

Добрый день,

Ниже представлен код выпадающего меню CSS. Как его изменить, чтобы добавить запаздывание развертывания и свертывания?

Спасибо 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title>

    <meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." />

</head>

<body bgcolor="#ffffff">

 

 

 

<!-- Start PureCSSMenu.com STYLE -->

<style> 

#pcm{display:none;}

ul.pureCssMenu ul{display:none}

ul.pureCssMenu li:hover>ul{display:block}

ul.pureCssMenu ul{position: absolute;left:98%;top:-1px;}

ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}

ul.pureCssMenu,ul.pureCssMenu ul {

	margin:0px;

	list-style:none;

	padding:0px 1px 1px 0px;

	background-color:#308321;

	background-repeat:repeat;

	border-color:;

	border-width:0px;

	border-style:solid;

}

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {

	display:block;

	zoom:1;

	_width:116.55000000000001px;

	float: left;

}

ul.pureCssMenu ul{

	width:138.6px;

}

ul.pureCssMenu li{

	display:block;

	margin:1px 0px 0px 1px;

	font-size:0px;

}

ul.pureCssMenu a:active, ul.pureCssMenu a:focus {

outline-style:none;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {

	display:block;

	vertical-align:middle;

	zoom:1;

	background-color:#91FF09;

	border-width:0px;

	border-color:#E4E1DE;

	border-style:solid;

	text-align:left;

	text-decoration:none;

	padding:4px;

	_padding-left:0;

	font:normal 11px Tahoma;

	color: #305429;

	text-decoration:none;

	cursor:default;

}

ul.pureCssMenu span{

	overflow:hidden;

}

ul.pureCssMenu ul li {

	float:none;

}

ul.pureCssMenu ul a {

	text-align:left;

	white-space:nowrap;

}

ul.pureCssMenu li.sep{

	text-align:left;

	padding:0px;

	line-height:0;

}

ul.pureCssMenu li.sep span{

	float:none;	padding-right:0;

	width:100%;

	height:3;

	display:inline-block;

	background-color:;	background-image:none;}

ul.pureCssMenu li:hover{

	position:relative;

}

ul.pureCssMenu li:hover>a{

	background-color:#47723F;

	border-color:#FFFFFF;

	border-style:solid;

	font:normal 11px Tahoma;

	color: #FFFFFF;

	text-decoration:none;

}

ul.pureCssMenu li a:hover{

	position:relative;

	background-color:#47723F;

	border-color:#FFFFFF;

	border-style:solid;

	font:normal 11px Tahoma;

	color: #FFFFFF;

	text-decoration:none;

}

ul.pureCssMenu li.dis a {

	color: #AAAAAA !important;

}

ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;

height:24px;

}

ul.pureCssMenu ul img {width:16px;

height:16px;

}

ul.pureCssMenu img.over{display:none}

ul.pureCssMenu li.dis a:hover img.over{display:none !important}

ul.pureCssMenu li.dis a:hover img.def {display:inline !important}

ul.pureCssMenu li:hover > a img.def  {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}

ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}

ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}

ul.pureCssMenu span{

	display:block;

	background-image:url(./images/arrow_sub5.gif);

	background-position:right center;

	background-repeat: no-repeat;

   padding-right:12px;}

ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrow_main4.gif);

}

ul.pureCssMenu a:hover span{	_background-image:url(./images/arrow_main4.gif)}

ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub5.gif)}

ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arrow_main4.gif);}

ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(./images/arrow_main4.gif)}

ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(./images/arrow_sub5.gif)}

</style>

<!-- End PureCSSMenu.com STYLE -->

 

 

 

<!-- Start PureCSSMenu.com MENU -->

<ul class="pureCssMenu pureCssMenum">

	<li class="pureCssMenui"><a class="pureCssMenui" href="#">PureCSSMenu.com</a></li>

	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Product Info</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

	<ul class="pureCssMenum">

		<li class="pureCssMenui"><a class="pureCssMenui" href="#">What is New?</a></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu Features</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

		<ul class="pureCssMenum">

			<li class="pureCssMenui"><a class="pureCssMenui" href="#">Free Online Generator</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="#">100% Pure CSS Menu</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="#">No Javascript Required</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="#">Multi Level Submenus</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="#">Search-Engine Friendly</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="#">Advanced Styling</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="#">Horizontal & Vertical</a></li>

		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>How To Use</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

		<ul class="pureCssMenum">

			<li class="pureCssMenui"><a class="pureCssMenui" href="#">1. Select Template</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="#">2. Customize Items</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="#">3. Download Zip</a></li>

		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Supported Browsers</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

		<ul class="pureCssMenum">

			<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Windows OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

			<ul class="pureCssMenum">

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Chrome</a></li>

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Mozilla</a></li>

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Opera</a></li>

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Netscape Navigator</a></li>

			</ul>

			<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>MAC OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

			<ul class="pureCssMenum">

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>

			</ul>

			<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Unix/Linux OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

			<ul class="pureCssMenum">

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>

				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Konqueror</a></li>

			</ul>

			<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

	</ul>

	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Templates</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

	<ul class="pureCssMenum">

		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 1</a></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 2</a></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 3</a></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 4</a></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 5</a></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 6</a></li>

	</ul>

	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

	<li class="pureCssMenui"><a class="pureCssMenui" href="#">FAQ</a></li>

	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Contact Us</a></li>

</ul>

<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>

<!-- End PureCSSMenu.com MENU -->



</body>

</html>
Оптимизайка
На сайте с 11.03.2012
Offline
396
Оптимизайка
#1

CSS3 transition-delay. В IE только с десятки появился.

⭐ BotGuard (https://botguard.net) ⭐ — защита вашего сайта от вредоносных ботов, воровства контента, клонирования, спама и хакерских атак!
T
На сайте с 25.03.2011
Offline
121
Toker
#2

Как правильно вставить transition-delay в код?

И если еще другие пути, которые бы позволили большинству браузеров выполнять эту функцию?

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#3
Toker:
И если еще другие пути, которые бы позволили большинству браузеров выполнять эту функцию?

Jquery onhover тынц, например..

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
T
На сайте с 25.03.2011
Offline
121
Toker
#4

ivan-lev, ну говорят поисковики больше любят чистое css меню, чем со скриптами..

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#5
Toker:
ivan-lev, ну говорят поисковики больше любят чистое css меню, чем со скриптами..

Кто говорит? Чем аргументирует? Пруфы будут?

Естественно, правильно скрипты пихать не в HTML-разметку, а выносить в js-файл и "навешивать" обработчиками.

T
На сайте с 25.03.2011
Offline
121
Toker
#6

ivan-lev, ну в моем случае, когда вышеуказанный код уже используется на сайте, как лучше его изменить?

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#7
Toker:
ivan-lev, ну в моем случае, когда вышеуказанный код уже используется на сайте, как лучше его изменить?

Если вариант с некроссбраузерным CSS не устроил, и будет решено использовать JavaScript.. то менять надо не CSS, а JavaScript..

T
На сайте с 25.03.2011
Offline
121
Toker
#8

ivan-lev, я и первый вариант пока не могу проверить, так как не знаю как правильно вставить transition-delay....в программировании - полный ноль :(

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#9
Toker:
в программировании - полный ноль

там чуть выше - ссылку давали.. по ссылке есть Example:

transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */

Вставлять в тот :hover, который "запаздывать" должен. (можно методом тыка, можно системно.. разобраться со стилями/классами.. но это ведь долго)

T
На сайте с 25.03.2011
Offline
121
Toker
#10

все версии chroma поддерживают ccs3?

А что значит - /* Safari */?

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий