Оригинальное угловое меню на jQuery

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

Шаг 1.

Скачаем и подключим таблицу стилей этого меню и скрипт CornerDock.js

<script type="text/javascript" src="CornerDock.js"></script>

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

Шаг 2.

Скачаем изображения, используемые в примере, или возьмем свои.

Вставим эти изображения в документ, предварительно поместив в теги <div> с необходимыми стилями.

<div id="page">

      <div id="CornerDockDiv">
    <a id="0" href="http://ruseller-board.com/index.php"><img  src="Contact.png" alt="" /></a>

  <a id="1" href="http://ruseller-board.com/index.php"><img  src="Chart.png" alt="" /></a>

  <a id="2" href="http://ruseller-board.com/index.php"><img  src="Chat1.png" alt="" /></a>

  <a id="3" href="http://ruseller-board.com/index.php"><img  src="Class.png" alt="" /></a>

  <a id="4" href="http://ruseller-board.com/index.php"><img  src="Copy.png" alt="" /></a>

  <a id="5" href="http://ruseller-board.com/index.php"><img  src="House.png" alt="" /></a>

  <a id="6" href="http://ruseller-board.com/index.php"><img  src="Pie.png" alt="" /></a>

  <a id="7" href="http://ruseller-board.com/index.php"><img  src="Shopping.png" alt="" /></a>

  <a id="8" href="http://ruseller-board.com/index.php"><img  src="User.png" alt="" /></a>

  </div>

  </div>

Измените ссылки на соответствующие вашему меню.

Шаг 3.

Следом вставим следующий код:

 <script language="JavaScript">

window.CornerDock = new JSCornerDock('CornerDockDiv',300,800);

</script>

Меню готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.tomcoote.co.uk
Перевел: Сергей Патин
Урок создан: 13 Апреля 2009
Просмотров: 44543
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^