Эффекты на основе Java Script, jQuery и т.д.

Вернуться в каталог >>>

Меню из ссылок с красивыми и плавные эффекты при наведении и снятии курсора

Пример 2

Пример 3

Пример 4

Пример 5

Пример 6

Пример 7

Пример 9

Пример 10

Пример 11

Пример 12

Пример 13

Пример 14

Пример 15

Пример 16

Пример 17

Пример 18

Пример 19

Пример 20

Пример 21

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

<STYLE type=text/css>
h3 {font-size: 18px; color: #000;}
.container > section {
	margin: 0 auto;
	padding: 3em 1em;
	text-align: center;
}

/* effekt 1 */
.color-1 {
	background: #435a6b;
}
.cl-effect-1 a {text-decoration:none; color:#fff;}

/* effekt 2 */
.color-2 {
	background: #f39c12;
}
.cl-effect-11 a {text-decoration:none; color: #fff;}

/* effekt 3 */
.color-3 {
	background: #2ac56c;
}
.cl-effect-3 a {text-decoration:none; color:#fff;}

/* effekt 4 */
.color-4 {
	background: #0e83cd;
}
.cl-effect-4 a {text-decoration:none; color:#fff;}

/* effekt 5 */
.color-5 {
	background: #cd4436;
}
.cl-effect-5 a {text-decoration:none; color:#fff;}

/* effekt 6 */
.color-6 {
	background: #f19f0f;
}
.cl-effect-6 a {text-decoration:none; color:#fff;}

/* effekt 7 */
.color-7 {
	background: #3fa46a;
}
.cl-effect-7 a {text-decoration:none; color:#fff;}

/* effekt 8 */
.color-8 {
	background: #ecf0f1;
}
.cl-effect-8 a {text-decoration:none; color:#fff;}

/* effekt 9 */
.color-9 {
	background: #9e487f;
}
.cl-effect-9 a {text-decoration:none; color:#fff;}

/* effekt 10 */
.color-10 {
	background: #16a085;
}
.cl-effect-10 a {text-decoration:none; color:#fff;}

/* effekt 11 */
.color-11 {
	background: #aab7b7;
}
.cl-effect-11 a {text-decoration:none; color:#fff;}

/* effekt 12 */
.cl-effect-12 a {text-decoration:none; color:#fff;}

/* effekt 13 */
.cl-effect-13 a {text-decoration:none; color:#fff;}

/* effekt 14 */
.cl-effect-14 a {text-decoration:none; color:#fff;}

/* effekt 15 */
.cl-effect-15 a {text-decoration:none; color:#fff;}

/* effekt 16 */
.cl-effect-16 a {text-decoration:none; color:#fff;}

/* effekt 17 */
.cl-effect-17 a {text-decoration:none; color:#fff;}

/* effekt 18 */
.cl-effect-18 a {text-decoration:none; color:#fff;}

/* effekt 19 */
.cl-effect-19 a {text-decoration:none; color:#fff;}

/* effekt 20 */
.cl-effect-20 a {text-decoration:none; color:#fff;}

/* effekt 21 */
.cl-effect-21 a {text-decoration:none; color:#fff;}
</STYLE>
<link rel="stylesheet" type="text/css" href="http://skriptkpbstudio.ucoz.ru/demo_srt/css3/menu/1070/component1.css">

Здесь собраны стили всех приведённых эффектов. Отдельно выведен цвет. Для установки на своём сайте меню с понравившимся Вам эффектом при наведении курсора на ссылку меню, скопируйте и установите у себя его стили, (ориентируйтесь по номеру эффекта).

Внутри тега <BODY> - </BODY> там где у Вас будет меню.

<div class="container">
			
			<section class="color-1">
				<nav class="cl-effect-1"> <h3>Пример 1</h3>
					<a href="#">Ссылка 1</a>
					<a href="#">Ссылка 2</a>
					<a href="#">Ссылка 3</a>
					<a href="#">Ссылка 4</a>
					<a href="#">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-4"> <h3>Пример 2</h3>
				<nav class="cl-effect-11" id="cl-effect-11">
					<a href="#" data-hover="Desultory">Desultory</a>
					<a href="#" data-hover="Sumptuous">Sumptuous</a>
					<a href="#" data-hover="Scintilla">Scintilla</a>
					<a href="#" data-hover="Propinquity">Propinquity</a>
					<a href="#" data-hover="Harbinger">Harbinger</a>
				</nav>
			</section>
			<section class="color-6"> <h3>Пример 3</h3>
				<nav class="cl-effect-3">
					<a href="#">Ссылка 1</a>
					<a href="#">Ссылка 2</a>
					<a href="#">Ссылка 3</a>
					<a href="#">Ссылка 4</a>
					<a href="#">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-7"> <h3>Пример 4</h3>
				<nav class="cl-effect-4">
					<a href="#">Ссылка 1</a>
					<a href="#">Ссылка 2</a>
					<a href="#">Ссылка 3</a>
					<a href="#">Ссылка 4</a>
					<a href="#">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-5"> <h3>Пример 5</h3>
				<nav class="cl-effect-5">
					<a href="#"><span data-hover="Ссылка 1">Ссылка 1</span></a>
					<a href="#"><span data-hover="Ссылка 2">Ссылка 2</span></a>
					<a href="#"><span data-hover="Ссылка 3">Ссылка 3</span></a>
					<a href="#"><span data-hover="Ссылка 4">Ссылка 4</span></a>
					<a href="#"><span data-hover="Ссылка 5">Ссылка 5</span></a>
				</nav>
			</section>
			<section class="color-4"> <h3>Пример 6</h3>
				<nav class="cl-effect-6">
					<a href="#">Ссылка 1</a>
					<a href="#">Ссылка 2</a>
					<a href="#">Ссылка 3</a>
					<a href="#">Ссылка 4</a>
					<a href="#">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-8"> <h3>Пример 7</h3>
				<nav class="cl-effect-7">
					<a href="#">Ссылка 1</a>
					<a href="#">Ссылка 2</a>
					<a href="#">Ссылка 3</a>
					<a href="#">Ссылка 4</a>
					<a href="#">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-1">
				<nav class="cl-effect-8"> <h3>Пример 8</h3>
					<a href="#">Ссылка 1</a>
					<a href="#">Ссылка 2</a>
					<a href="#">Ссылка 3</a>
					<a href="#">Ссылка 4</a>
					<a href="#">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-9"> <h3>Пример 9</h3>
				<nav class="cl-effect-9">
					<a href="#"><span>Ссылка 1</span><span>Описание ссылки</span></a>
					<a href="#"><span>Ссылка 2</span><span>Описание ссылки</span></a>
					<a href="#"><span>Ссылка 3</span><span>Описание ссылки</span></a>
					<a href="#"><span>Ссылка 4</span><span>Описание ссылки</span></a>
					<a href="#"><span>Ссылка 5</span><span>Описание ссылки</span></a>
				</nav>
			</section>
			<section class="color-10"> <h3>Пример 10</h3>
				<nav class="cl-effect-10">
					<a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
					<a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
					<a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
					<a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
					<a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
				</nav>
			</section>
			<section class="color-4"> <h3>Пример 11</h3>
				<nav class="cl-effect-11">
					<a href="#" data-hover="Ссылка 1">Ссылка 1</a>
					<a href="#" data-hover="Ссылка 2">Ссылка 2</a>
					<a href="#" data-hover="Ссылка 3">Ссылка 3</a>
					<a href="#" data-hover="Ссылка 4">Ссылка 4</a>
					<a href="#" data-hover="Ссылка 5">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-5"> <h3>Пример 12</h3>
				<nav class="cl-effect-12">
					<a href="#">Ссылка 1</a>
					<a href="#">Ссылка 2</a>
					<a href="#">Ссылка 3</a>
					<a href="#">Ссылка 4</a>
					<a href="#">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-6"> <h3>Пример 13</h3>
				<nav class="cl-effect-13">
					<a href="#">Ссылка 1</a>
					<a href="#">Ссылка 2</a>
					<a href="#">Ссылка 3</a>
					<a href="#">Ссылка 4</a>
					<a href="#">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-1"> <h3>Пример 14</h3>
				<nav class="cl-effect-14">
					<a href="#">Ссылка 1</a>
					<a href="#">Ссылка 2</a>
					<a href="#">Ссылка 3</a>
					<a href="#">Ссылка 4</a>
					<a href="#">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-3"> <h3>Пример 15</h3>
				<nav class="cl-effect-15">
					<a href="#" data-hover="Ссылка 1">Ссылка 1</a>
					<a href="#" data-hover="Ссылка 2">Ссылка 2</a>
					<a href="#" data-hover="Ссылка 3">Ссылка 3</a>
					<a href="#" data-hover="Ссылка 4">Ссылка 4</a>
					<a href="#" data-hover="Ссылка 5">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-11"> <h3>Пример 16</h3>
				<nav class="cl-effect-16">
					<a href="#" data-hover="Ссылка 1">Ссылка 1</a>
					<a href="#" data-hover="Ссылка 2">Ссылка 2</a>
					<a href="#" data-hover="Ссылка 3">Ссылка 3</a>
					<a href="#" data-hover="Ссылка 4">Ссылка 4</a>
					<a href="#" data-hover="Ссылка 5">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-4"> <h3>Пример 17</h3>
				<nav class="cl-effect-17">
					<a href="#" data-hover="Ссылка 1">Ссылка 1</a>
					<a href="#" data-hover="Ссылка 2">Ссылка 2</a>
					<a href="#" data-hover="Ссылка 3">Ссылка 3</a>
					<a href="#" data-hover="Ссылка 4">Ссылка 4</a>
					<a href="#" data-hover="Ссылка 5">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-6"> <h3>Пример 18</h3>
				<nav class="cl-effect-18">
					<a href="#" data-hover="Ссылка 1">Ссылка 1</a>
					<a href="#" data-hover="Ссылка 2">Ссылка 2</a>
					<a href="#" data-hover="Ссылка 3">Ссылка 3</a>
					<a href="#" data-hover="Ссылка 4">Ссылка 4</a>
					<a href="#" data-hover="Ссылка 5">Ссылка 5</a>
				</nav>
			</section>
			<section class="color-5"> <h3>Пример 19</h3>
				<nav class="cl-effect-19">
					<a href="#"><span data-hover="Ссылка 1">Ссылка 1</span></a>
					<a href="#"><span data-hover="Ссылка 2">Ссылка 2</span></a>
					<a href="#"><span data-hover="Ссылка 3">Ссылка 3</span></a>
					<a href="#"><span data-hover="Ссылка 4">Ссылка 4</span></a>
					<a href="#"><span data-hover="Ссылка 5">Ссылка 5</span></a>
				</nav>
			</section>
			<section class="color-1"> <h3>Пример 20</h3>
				<nav class="cl-effect-20">
					<a href="#"><span data-hover="Ссылка 1">Ссылка 1</span></a>
					<a href="#"><span data-hover="Ссылка 2">Ссылка 2</span></a>
					<a href="#"><span data-hover="Ссылка 3">Ссылка 3</span></a>
					<a href="#"><span data-hover="Ссылка 4">Ссылка 4</span></a>
					<a href="#"><span data-hover="Ссылка 5">Ссылка 5</span></a>
				</nav>
			</section>
			<section class="color-7"> <h3>Пример 21</h3>
				<nav class="cl-effect-21">
					<a href="#">Ссылка 1</a>
					<a href="#">Ссылка 2</a>
					<a href="#">Ссылка 3</a>
					<a href="#">Ссылка 4</a>
					<a href="#">Ссылка 5</a>
				</nav>
			</section>

</div>

Скопируйте и установите у себя HTML код понравившегося Вам меню(ориентируйтесь по его коду) и всё.

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

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.