→ При разработке сайта лендинг в подарок! ЖМИ! ←
Фев
19

Sweet menu — классное выезжающее меню на Jquery

Сегодня рассмотрим очень интересное меню, которое сэкономит место на странице и будет выглядеть очень эффектно. Традиционно, будем использовать Jquery.

Результатом будет такое чудо:

тв тумбы

Выглядит эффектно и подключается элементарно. Итак, качаем меню и начинаем разбираться с подключением на странице. Можно посмотреть и демо. В архиве есть и демо, и все необходимые файлы.

Для начала традиционно подключаем необходимые библиотеки в разделе head:

1
2
3
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.easing.js"></script>
        <script type="text/javascript" src="jquery.sweet-menu-1.0.js"></script>

Затем делаем разметку html на основе списков для использования в качестве меню:

1
2
3
4
5
6
7
8
9
10
<ul id="mySweetMenu">
    <li>
        <a href="#link1">
            Link 1
        </a></li>
    <li>
        <a href="#link2">
            Link 2
        </a></li>
</ul>

и инициализируем меню:

1
$(selector).sweetMenu();

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

top Целочисленный параметр, который указывает на расстояние от верха страницы до меню. По умолчанию — 80
position  Парметр, отвечающий на тип меню (фиксированный или плавающий). Если указано ‘fixed’, то меню будет прокручиваться вместе со страницей, если же указано ‘absolute’, то при прокрутке страницы меню будет оставаться на месте
iconSize  Указывается размер для квадратной иконки (когда длина и ширина равны) в пикселях
iconSizeWidth  Указывает длину иконки в пикселях
iconSizeHeight  Указывает ширину иконки в пикселях
padding  Указывает отступы между текстом и иконкой, а также между текстом и границей блока меню
verticalSpacing  Расстояние в пикселях между элементами меню
duration  Указывает на время анимации при сворачивании/разворачивании элементов меню
easing  Лубые расширения функций JQuery должны быть указаны в этом параметре
anchorClass  В случае необходимости переопределения классов, имена нужно указывать в этом параметре (на практике нужно крайне редко)
icons  Тут указываются файлы с иконками

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script type="text/javascript">
            $(document).ready(function(){
               
                $('#backMenu').sweetMenu({
                    top: 40,
                    padding: 8,
                    iconSize: 48,
                    easing: 'easeOutBounce',
                    duration: 500,
                    icons: [
                        'images/back.png'
                    ]
                });
               
                $('#exampleMenu').sweetMenu({
                    top: 200,
                    padding: 8,
                    iconSize: 48,
                    easing: 'easeOutBounce',
                    duration: 500,
                    icons: [
                        'images/home.png',
                        'images/comments.png',
                        'images/red_heart.png',
                        'images/male_user.png',
                        'images/yellow_mail.png',
                        'images/computer.png'
                    ]
                });
            });
        </script>
       
        <style type="text/css">
            body
            {
                background: #000000 url('images/bg.jpg') top center no-repeat;
            }
       
            .sweetMenuAnchor{
                border-top: 1px solid #ffffff;
                border-right: 1px solid #ffffff;
                border-bottom: 1px solid #ffffff;
                border-top-right-radius: 4px;
                -moz-border-radius-topright: 4px;
                border-bottom-right-radius: 4px;
                -moz-border-radius-bottomright: 4px;
                color: #0071bb;
                font-size: 24px;
                font-weight: bold;
                text-align: right;
                text-transform: uppercase;
                font-family: arial;
                text-decoration: none;
                background-color: #888888;
                opacity: 0.6;
            }
           
            .sweetMenuAnchor span{
                display: block;
                padding-top: 10px;
            }
           
            h1
            {
                display: block;
                text-align: center;
                font-size: 48px;
                color: #ffffff;
                text-shadow: 0px 0px 12px #000000;
                font-family: "Trebuchet MS";
            }
        </style>

Вот, в принципе, и всё. Пользуйтесь на здоровье! К примеру, таким меню можно оформить Все новые видеокарты 2012!
Автор плагина — Adam Becker, перевод и комментарии — K_E_V_in

Прокомментировать

Рубрики

Наши услуги

В прямом эфире