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

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

Красивое горизонтальное супер меню на CSS3

Главная

Добро пожаловать !

Привет и добро пожаловать! Это показ возможности этого удивительного Mega выпадающего меню.

Этот пункт поставляется с широким спектром типографских стилей, таких, как заголовки, списки и т. д.

Кроссбраузерная поддержка

Это мега меню было протестировано во всех основных браузерах.
5 столбцов

Это пример большого контейнера в 5 столбцов

Это текстовое поле тёмно серое. Iriure quaestio periculis ne pro, vim id idque causae ancillae. Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram.

Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram.

Это образец текста курсивом. Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram.

Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram.

Это образец текста жирным шрифтом. Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram.

Пример использования изображений

Iriure quaestio periculis ne pro, vim id idque causae ancillae. Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram, quis ancillae suavitate ne pri, eu his stet electram.Читать далее...

Iriure quaestio periculis ne pro, vim id idque causae ancillae. Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram.Читать далее...

Это черный блок, вы можете использовать его, чтобы выделить некоторое содержание.Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram..
4 столбца
Здесь заголовок
Категории
Полезные ссылки
Другие
Мой проект
1 столбец
3 столбца
Списки в боксах
Примеры изображений

Iriure quaestio periculis ne pro, vim id idque causae ancillae. Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram, quis ancillae suavitate ne pri, eu his stet electram.Читать далее...

Iriure quaestio periculis ne pro, vim id idque causae ancillae. Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram, quis ancillae suavitate ne pri, eu his stet electram. Читать далее...

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

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

Все стили и параметры меню задаются в CSS файле menu1.css. Если Вам нужно что-то изменить, Вам нужно, воспользовавшись функцией [Скачать с сервера], скачать данный файл и внести необходимые изменения.

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

<ul id="menu">
    <li><a href="#" class="drop">Главная</a>
		<div class="dropdown_2columns">
			<div class="col_2">
                <h2>Добро пожаловать !</h2>
            </div>
			<div class="col_2">
                <p>Привет и добро пожаловать! Это показ возможности этого удивительного Mega выпадающего меню.</p>             
                <p>Этот пункт поставляется с широким спектром типографских стилей, таких, как заголовки, списки и т. д.</p>             
            </div>
			<div class="col_2">
                <h2>Кроссбраузерная поддержка</h2>
            </div>
            <div class="col_1">
                <img src="http://skriptkpbstudio.ucoz.ru/demo_srt/css3/menu/1071/browsers.png" alt="" height="48" width="125">
            </div>
            <div class="col_1">
                <p>Это мега меню было протестировано во всех основных браузерах.</p>
			</div>
        </div>
    </li>
	<li><a href="#" class="drop">5 столбцов</a>
		<div class="dropdown_5columns">
			<div class="col_5">
                <h2>Это пример большого контейнера в 5 столбцов</h2>
			</div>
            <div class="col_1">
                <p class="black_box">Это текстовое поле тёмно серое. 
Iriure quaestio periculis ne pro, vim id idque causae ancillae. Noluisse
 assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his 
stet electram.</p>
            </div>
            <div class="col_1">
                <p>Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram.</p>
            </div>
            <div class="col_1">
				<p class="italic">Это образец текста курсивом. Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram.</p>
            </div>
            <div class="col_1">
                <p>Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram.</p>
            </div>
            <div class="col_1">
                <p class="strong">Это образец текста жирным шрифтом. Noluisse assentior maiestatis id ius, quis ancillae suavitate ne pri, eu his stet electram.</p>
			</div>
			<div class="col_5">
                <h2>Пример использования изображений</h2>
            </div>
			<div class="col_3">
				<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/css3/menu/1071/01.jpg" class="img_left imgshadow" alt="" height="70" width="70">
                <p>Iriure quaestio periculis ne pro, vim id idque causae
 ancillae. Noluisse assentior maiestatis id ius, quis ancillae suavitate
 ne pri, eu his stet electram, quis ancillae suavitate ne pri, eu his 
stet electram.<a href="#">Читать далее...</a></p>
				<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/css3/menu/1071/02.jpg" class="img_left imgshadow" alt="" height="70" width="70">
                <p>Iriure quaestio periculis ne pro, vim id idque causae
 ancillae. Noluisse assentior maiestatis id ius, quis ancillae suavitate
 ne pri, eu his stet electram.<a href="#">Читать далее...</a></p>
            </div>
            <div class="col_2">
				<p class="black_box">Это черный блок, вы можете использовать его, 
чтобы выделить некоторое содержание.Noluisse assentior maiestatis id 
ius, quis ancillae suavitate ne pri, eu his stet electram..</p>
            </div>
        </div>
	</li>
	<li><a href="#" class="drop">4 столбца</a>
		<div class="dropdown_4columns">
			<div class="col_4">
                <h2>Здесь заголовок</h2>
            </div>
            <div class="col_1">
				<h3>Категории</h3>
                <ul>
                    <li><a href="#">Категория 1</a></li>
                    <li><a href="#">Категория 2</a></li>
                    <li><a href="#">Категория 3</a></li>
                    <li><a href="#">Категория 4</a></li>
					<li><a href="#">Категория 5</a></li>
                </ul>   
            </div>
			<div class="col_1">
				<h3>Полезные ссылки</h3>
                <ul>
                    <li><a href="#">Ссылка 1</a></li>
                    <li><a href="#">Ссылка 2</a></li>
					<li><a href="#">Ссылка 3</a></li>
                    <li><a href="#">Ссылка 4</a></li>
                    <li><a href="#">Ссылка 5</a></li>
                </ul>   
            </div>
			<div class="col_1">
				<h3>Другие</h3>
				<ul>
                    <li><a href="#">Ссылка 1</a></li>
                    <li><a href="#">Ссылка 2</a></li>
                    <li><a href="#">Ссылка 3</a></li>
                    <li><a href="#">Ссылка 4</a></li>
                    <li><a href="#">Ссылка 5</a></li>
				</ul>   
            </div>
			<div class="col_1">
            <h3>Мой проект</h3>
                <ul>
                    <li><a href="http://webkpb.ucoz.ru" target="_blank" title="Flash библиотека">WebKPB</a></li>
                    <li><a href="http://kpbshablon.ucoz.ru" target="_blank" title="Магазин дизайнов">KPBshablon</a></li>
                    <li><a href="http://skriptkpbstudio.ucoz.ru" target="_blank" title="Библиотека JavaScript и jQuery">ScriptKPBstudio</a></li>
					<li><a href="http://kpbwebstudio.narod.ru" target="_blank" title="Моя WEBстудия">KPBwebStudio</a></li>
                </ul>   
            </div>
        </div>
    </li>
	<li class="menu_right"><a href="#" class="drop">1 столбец</a>
		<div class="dropdown_1column align_right">
			<div class="col_1">
                <ul class="simple">
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
					<li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
					<li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                </ul>   
            </div>
		</div>
    </li>
	<li class="menu_right"><a href="#" class="drop">3 столбца</a>
		<div class="dropdown_3columns align_right">
            <div class="col_3">
                <h2>Списки в боксах</h2>
            </div>
			<div class="col_1">
				<ul class="greybox">
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
				</ul>   
			</div>
            <div class="col_1">
				<ul class="greybox">
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
					<li><a href="#">Ссылка</a></li>
                </ul>   
			</div>
            <div class="col_1">
				<ul class="greybox">
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
					<li><a href="#">Ссылка</a></li>
                    <li><a href="#">Ссылка</a></li>
                </ul>   
			</div>
            <div class="col_3">
                <h2>Примеры изображений</h2>
            </div>
            <div class="col_3">
				<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/css3/menu/1071/02.jpg" class="img_left imgshadow" alt="" height="70" width="70">
                <p>Iriure quaestio periculis ne pro, vim id idque causae
 ancillae. Noluisse assentior maiestatis id ius, quis ancillae suavitate
 ne pri, eu his stet electram, quis ancillae suavitate ne pri, eu his 
stet electram.<a href="#">Читать далее...</a></p>
				<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/css3/menu/1071/01.jpg" class="img_left imgshadow" alt="" height="70" width="70">
                <p>Iriure quaestio periculis ne pro, vim id idque causae
 ancillae. Noluisse assentior maiestatis id ius, quis ancillae suavitate
 ne pri, eu his stet electram, quis ancillae suavitate ne pri, eu his 
stet electram. <a href="#">Читать далее...</a></p>
            </div>
        </div>
    </li>
</ul>

Как видите меню имеет огромные возможности, и очень просто в понимании конструкции и алгоритма.

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

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