RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Полноэкранное меню

Полноэкранное меню на css и JQuery
Просмотров: 2886  Скачан: 223 раз  Комментариев в теме: 0

Полноэкранное меню на css и Jquery, меню изначально создавалось для сайта ресторана, но его можно использовать и в других направлениях. При переходе по разделам меню, меняется и фоновая картинка ( в зависимости в каком вы разделе меню находитесь), это довольно привлекательный эффект. Если вы ищите новые идеи, то вам следует приглянуться к данному варианту.

Шаг 1 - создание разметки

 

HTML

<div id="ac_background" class="ac_background">
    <img class="ac_bgimage" src="images/Default.jpg" alt="Background"/>
    <div class="ac_overlay"></div>
    <div class="ac_loading"></div>
</div>
<div id="ac_content" class="ac_content">
    <h1><span>Cafe + Bar</span>Dhalia</h1>
    <div class="ac_menu">
        <ul>
            <li>
                <a href="images/Appetizers.jpg">Appetizers</a>
                <div class="ac_subitem">
                    <span class="ac_close"></span>
                    <h2>Appetizers</h2>
                    <ul>
                        <li>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</li>
                        <li>Lobster Bisque</li>
                        <li>Smoked Salmon Terrine</li>
                        <li>Tuna Ceviche</li>
                        <li>Wild Mushroom Flan</li>
                        <li>Almond Bruschetta</li>
                        <li>Green Chilli Canapee</li>
                        <li>Artichoke Rucula Salad</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="images/MainCourse.jpg">Main Course</a>
                <div class="ac_subitem">
                    <span class="ac_close"></span>
                    <h2>Main Course</h2>
                    <ul>
                        <li>Drops of rain could be heard hitting the pane, which made him feel quite sad.</li>
                        <li>Wild Sea Bass Filet</li>
                        <li>Linguini and Clams</li>
                        <li>Shrimp and Crabmeat Alfredo</li>
                        <li>Broiled Stuffed Flounder </li>
                        <li>Mussels Marinara</li>
                        <li>Grilled Mooloolaba Giant king prawns</li>
                        <li>Lobster Mornay</li>
                        <li>Fresh Shrimp Tart</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="images/Specials.jpg">Specials</a>
                <div class="ac_subitem">
                    <span class="ac_close"></span>
                    <h2>Specials</h2>
                    <ul>
                        <li>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</li>
                        <li>Ratatouille</li>
                        <li>Le Tourin</li>
                        <li>Wild Salmon Bruschetta</li>
                        <li>Sweet Mustard Gratin</li>
                        <li>Homemade Pizza Mediteranica</li>
                        <li>Spanakopita Speciale</li>
                        <li>Ricotta Spinach Cannelloni</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="images/Desserts.jpg">Desserts</a>
                <div class="ac_subitem">
                    <span class="ac_close"></span>
                    <h2>Desserts</h2>
                    <ul>
                        <li>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</li>
                        <li>New England Apple Crisp</li>
                        <li>Southern Pecan Pie</li>
                        <li>Brownie Fudge Sundae</li>
                        <li>Strawberry Mousse Cake</li>
                        <li>Lemon Sorbet</li>
                        <li>Crunchy Almond Cake</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="images/Wines.jpg">Wines</a>
                <div class="ac_subitem">
                    <span class="ac_close"></span>
                    <h2>Wines</h2>
                    <ul>
                        <li>A small river named Duden flows by their place and supplies it with the necessary regelialia.</li>
                        <li>CARM Douro Reserva</li>
                        <li>Fontodi Colli della Toscana Centrale Flaccianello</li>
                        <li>Alban Syrah Edna Valley Alban Estate Reva</li>
                        <li>Zaca Mesa Syrah Santa Ynez Valley</li>
                        <li>Quinta do Vallado Douro Reserva</li>
                        <li>Viticcio Chianti Classico Riserva</li>
                        <li>Avignonesi Vino Nobile di Montepulciano</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

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

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.slideControl').slideControl();
        prettyPrint();
    });
</script>
Материалы по теме:

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню ...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимис...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

Jquery меню горизонтальноеJquery меню горизонтальное с анимир...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

Горизонтальное мульти менюГоризонтальное мульти меню

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся мен...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......
Интересные публикации:

Шаблон Desire Night ClubШаблон Desire Night Club

HTML шаблон ночного клуба, на главной странице располагается привлекательный слайдер, есть галерея, видео проигрыватель, заготовлена контактная форма ...

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с помощ...

Красивое горизонтальное меню, используется изображения и анимация текста....

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить