CSS Библиотека: Горизонтальное CSS Меню: Здесь
^{jQuery Многоуровневое CSS Меню #2}

Это - многоуровневое горизонтальное меню CSS, создал использование регулярного вложенного списка HTML, затем превратился в полностью функциональное выпадающее меню, используя CSS и легкий jQuery. Подменю задвигают и в представление, который также автоматически репозиция самостоятельно горизонтально если слишком близкий к правому краю окна.

Пример:

Важно: Удостоверьтесь, что Ваша страница содержит правельный DOCTYPE для этого меню, чтобы оно работало должным образом.

Использую:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Внешние файлы: Меню требует следующих файлов поддержки, которые Вы должны загрузить по умолчанию в тот же каталог где непосредственно расположена Ваша страница:

jquery.min.js jQuery 1.2.6 - New Wave Javascript
jqueryslidemenu.css
jqueryslidemenu.js (в этом файле укажите правильный URL (путь) к изображениям "Стрелки" см.ниже)
down.gif стрелка вниз
right.gif стрелка вправо

Если Вы хотите загрузить вышеупомянутые файлы в другие каталоги, то незабудьте отредактировать "jqueryslidemenu.js" указать правильный URL (путь) к изображениям "Стрелки".

The CSS / JavaScript: Следующий код должен быть добавлен в HEAD (голову) вышей страницы:

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>

HTML:

<div id="myslidemenu" class="jqueryslidemenu">
    <ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Folder 1</a>
	    <ul>
		<li><a href="#">Sub Item 1.1</a></li>
		<li><a href="#">Sub Item 1.2</a></li>
		<li><a href="#">Sub Item 1.3</a></li>
		<li><a href="#">Sub Item 1.4</a></li>
	    </ul>
	</li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Folder 2</a>
	    <ul>
		<li><a href="#">Sub Item 2.1</a></li>
		<li><a href="#">Folder 2.1</a>
		    <ul>
			<li><a href="#">Sub Item 2.1.1</a></li>
			<li><a href="#">Sub Item 2.1.2</a></li>
			<li><a href="#">Folder 3.1.1</a>
			    <ul>
				<li><a href="#">Sub Item 3.1.1.1</a></li>
				<li><a href="#">Sub Item 3.1.1.2</a></li>
				<li><a href="#">Sub Item 3.1.1.3</a></li>
				<li><a href="#">Sub Item 3.1.1.4</a></li>
				<li><a href="#">Sub Item 3.1.1.5</a></li>
			    </ul>
			</li>
			<li><a href="#">Sub Item 2.1.4</a></li>
		    </ul>
		</li>
	    </ul>
	</li>
	<li><a href="#">Item 4</a></li>
    </ul>
    <br style="clear: left" />
</div>

一步一步地会到目的

Search for Extra-Terrestrial Intelligence at Home

User signature graphic BOINC Stars

Прямая трансляция переговоров космонавтов МКС с ЦУП.
Только голос | Голос и Видео
Говорят они не всегда, только по необходимости, так что не удивляйтесь, если на канале будет тишина.

Ubuntu 14.04 (Trusty Tahr) Daily Build

>>> Старые релизы Ubuntu <<<