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

Lava Lamp. Отличное меню на базе JQuery

Не правда ли, очень симпатичное меню. И стильное, и современное. Будем делать его с помощью JQuery (точнее, плагин уже готов, скачать его можно по ссылке: lavalamp-0.2.0). Сейчас разберемся, что нужно для того, чтобы заставить его полноценно работать. А пока есть пара минут отвлечься, советую глянуть в китайский супермаркет копеечных гаджетов и взять там Chinabuye код.

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

Для начала подключим сам фреймворк и плагин. Делается это стандартно, в разделе head.

1
2
3
4
5
6
7
8
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
<!-- Optional -->
<script type="text/javascript" src="path/to/jquery.easing.js"></script>

<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

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

1
2
3
4
5
6
<ul class="lavaLamp">
            <li><a href="#">Home</a></li>
            <li><a href="#">Plant a tree</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Ride an elephant</a></li>
        </ul>

И опишем её в CSS

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
/* Styles for the entire LavaLamp menu */
.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background: url("../image/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("../image/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

Как говорится, кушать подано, садитесь жрать, пожалуйста!

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

Рубрики

Наши услуги

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