Красивого оригинальное раздвижного меню для фото. Это меню предназначено для картинок - фотографий. И тематика для этого меню не каждая подойдет. Для картинок оно в самый раз подойдет.
Код прописываем там где будит находится меню.
Код
<link href="http://zornet.ru/ZORNET/pictureMenu.css" rel="stylesheet" type="text/css">
<script src="http://zornet.ru/ZORNET/pictureMenu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".MainMenu4").pictureMenu({
animateTime: 400, // The duration of the animations
menuHeight: 160, // The height of the menu (usually the same as the height of the images)
menuWidth: 50, // The length of a menu item (useMenuWidth must be true)
menuWidthHover: 50, // The length of the inactive menu items
menuActiveWidth: 250, // The length of the active menu items (useMenuActiveWidth must be true)
menuInactiveHide: 0.6, // The opacity of the inactive menu items
menuBorder: 1, // The Border between the menu items
menuAutoOpen: 15, // Menu item that should be open
subMenu: ".submenu", // Selector of the submenu
fillColor: "#000000", // Color of the menu
useMenuWidth: true, // If true: use custom menuWidth. If false: use calculated menuWidth
useMenuActiveWidth: true, // If true: use custom menuActiveWidth. If false: use calculated menuActiveWidth
leaveActiveOpen: true, // If true, active menu item stay's open after mouse leaves
debug: true // Turn on or off the debugger
});
});
</script>
<style>
h1 {font-family: Times New Roman, Times, serif; font-size:15pt; color:#0066CC; text-align:center;}
</style>
</head>
<body style="background:#FFFFFF; text-align: justify;">
<div class="MainMenu4">
<div>
<img src="http://zornet.ru/ZORNET/menu-1.jpg">
<img src="http://zornet.ru/ZORNET/text-1.png">
<ul class="submenu dark">
<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>
<img src="http://zornet.ru/ZORNET/menu-2.jpg">
<img src="http://zornet.ru/ZORNET/text-2.png">
<ul class="submenu dark">
<li><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
<li><a href="">Пункт 3</a></li>
</ul>
</div>
<div>
<img src="http://zornet.ru/ZORNET/menu-3.jpg">
<img src="http://zornet.ru/ZORNET/text-3.png">
<ul class="submenu dark">
<li><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
</ul>
</div>
<div>
<img src="http://zornet.ru/ZORNET/menu-4.jpg">
<img src="http://zornet.ru/ZORNET/text-4.png">
<ul class="submenu dark">
<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>
<img src="http://zornet.ru/ZORNET/menu-5.jpg">
<img src="http://zornet.ru/ZORNET/text-5.png">
<ul class="submenu light">
<li><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
</ul>
</div>
<div>
<img src="http://zornet.ru/ZORNET/menu-6.jpg">
<img src="http://zornet.ru/ZORNET/text-6.png">
<ul class="submenu dark">
<li><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
</ul>
</div>
<div>
<img src="http://zornet.ru/ZORNET/menu-7.jpg">
<img src="http://zornet.ru/ZORNET/text-7.png">
<ul class="submenu dark">
<li><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
<li><a href="">Пункт 3</a></li>
</ul>
</div>
<div>
<img src="http://zornet.ru/ZORNET/min.jpg">
<img src="http://zornet.ru/ZORNET/min8.png">
<ul class="submenu dark">
<li><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
</ul>
</div>
<div>
<img src="http://zornet.ru/ZORNET/umor9.jpg">
<img src="http://zornet.ru/ZORNET/umor9.png">
<ul class="submenu dark">
<li><a href="">Пункт 1</a></li>
</ul>
</div>
<div>
<img src="http://zornet.ru/ZORNET/menu-8.jpg">
<img src="http://zornet.ru/ZORNET/text-8.png">
<ul class="submenu dark">
<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>
<img src="http://zornet.ru/ZORNET/menu-9.jpg">
<img src="http://zornet.ru/ZORNET/text-9.png">
<ul class="submenu dark">
<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>
<img src="http://zornet.ru/ZORNET/menu-10.jpg">
<img src="http://zornet.ru/ZORNET/text-10.png">
<ul class="submenu dark">
<li><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
<li><a href="">Пункт 3</a></li>
<li><a href="">Пункт 4</a></li>
</ul>
</div>
<div>
<img src="http://zornet.ru/ZORNET/menu-11.jpg">
<img src="http://zornet.ru/ZORNET/text-11.png">
<ul class="submenu light">
<li><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
<li><a href="">Пункт 3</a></li>
</ul>
</div>
<div>
<img src="http://zornet.ru/ZORNET/menu-12.jpg">
<img src="http://zornet.ru/ZORNET/text-12.png">
<ul class="submenu light">
<li><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
</ul>
</div>
<div>
<img src="http://zornet.ru/ZORNET/menu-13.jpg">
<img src="http://zornet.ru/ZORNET/text-13.png">
<ul class="submenu light">
<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>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5399114-15");
pageTracker._initData();
pageTracker._trackPageview();
</script></td> <!--Раздвижное меню-->
</tr>
</table>