Меню “рыбий глаз” в стиле MAC на jQuery

By masster

Меню, выполненное в стиле док-меню (или “рыбий глаз”) вы наверняка видели на маке. Используется фреймворк jQuery. Возможно как горизонтальное расположение, так и вертикальное. Каждая иконка может сопровождаться надписью.

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

By masster

В продолжение предыдущего поста, где я рассказал о необычной карусели, хочется продолжить тему оригинальных сайтов, использующих возможности jQuery. Сегодня речь пойдет о меню, которое можно смело отнести к произведением веб искусства - здесь и динамика, и дизайн, и креайтивность.

Сам скрипт, проделывающий всю работу находится в файле global.js.
Функция, которая реализует скольжение пунктов меню - slideFX
Само меню реализовано в виде ненумерованного списка <ul></ul>

Супер симпатичное jQuery CSS3 меню

By masster

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

Демо

Скачать

Знакомьтесь, “phatfusion” - раздвижное меню из картинок на mootools

By masster

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

Если пользователь уже выбрал пункт меню - оно не схлопывается до тех пор, пока не будет выбран другой или же не будет повторного щелчка по этому пункту. Таким образом первый клик открывает пункт, второй клик - закрывает.

Использование

var myMenu = new ImageMenu('imageMenu', {
	openWidth:310,
	onOpen:function(e,i){console.log(e)}
});

Параметры

onOpen
функция, которой передается управление, когда пользователь щелкает по пункту меню. Если внутри li есть href, то он передается в эту функцию.
a function to execute when an item is clicked open. If there is an href within the li then that is passed to the function.
onClose
То же самое, что выше, только при щелчке, закрывающем меню
openWidth
Ширина в пикселях пункта меню в момент проведения мыши над ним. По умолчанию - 200
transition
Тип плавного перехода. По умолчанию
default: Fx.Transitions.quadOut
duration
Продолжительность перехода. По умолчанию: 400
open
id пункта меню, который открыт изначально.По умолчанию: null
border
Ширина подсвечивающей рамки в пикселяхкогда пункт меню раскрыт. По умолчанию: 0

Кросс-браузерность

Firefox 2 (mac / pc)
IE 7
IE 6
Safari (mac)

Фрэймворк

mootools v1.11

Скачать

Flash подобное меню на jQuery

By masster

Подключаем библиотеки

Добавляем CSS классы

К каждому пункту меню (к гиперссылке) добавляем
CSS класс flashMenu
<a href=”Portfolio.html” class=”flashMenu”>Portfolio</a>

Настраиваем

Можно задать скорость, тип анимации (easing) , размер шрифта, цвет:

      $("a.menuFlash").hoverSize({
      speed:400,
      fontColor:"#d7df23",
      fontSize : "300%",
      lineHeight:"39px",
      easing : "easeOutExpo"
      })

Скачать и посмотреть

Демо
Скачать

Профессиональное CSS меню - часть 2

By masster

После того как основные графические элементы для меню созданы, можно приступить к CSS верстке. Для этого в корневой директории, где будет находить файл index.html, создадим папку css. Внутри этой папки заведем еще одну папку images, в которую поместим три файла:

фон :

левая “крышка”:

правая “крышка” (длинная):

Эти три файла сохраним в папке css/images

Теперь приступим к созданию стилей. Ниже приведу css файл, который сохраним под именем style.css в папке css


.menu{
background: url(images/menu_bgr.png) repeat-x;
height: 40px;
list-style: none;
}
.menu li{
float:left;
}
.menu li a{
display: block;
color:#000;
text-decoration: none;
font-size: 13px;
font-family:sans-serif;
font-weight:bold;
padding:0 0 0 19px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.menu li a span{
display: block;
padding: 0 33px 0 14px;
}
.menu li.active a, .menu li a:hover{
color: #fff;
background: url(images/menu_left.png) no-repeat left;
}
.menu li.active a span, .menu li a:hover span{
color: #fff;
background: url(images/menu_right.png) no-repeat right top;
}

И, наконец, сама страница index.html, на которой будет отображаться меню:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
</head>
<body>
<ul class="menu">
<li class="active"><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Товары</span></a></li>
<li><a href="#"><span>Доставка</span></a></li>
<li><a href="#"><span>Контакты</span></a></li>
</ul>
</body>
</html>