qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Полноэкранное меню на css и JQuery
Просмотров: 2966  Скачан: 229 раз  Комментариев в теме: 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>
Материалы по теме:

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

Отличное горизонтальное меню с большое количество пунктов....

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

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

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu...

Стильное горизонтальное меню с выдвижными иконками

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

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

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

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

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....
Интересные публикации:

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

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

ElliotElliot

Неплохой html шаблон.сделанный с уклоном на вывод изображения, имеется два стиля (светлый и тёмный), на главной странице расположена карусель......

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

Стильная форма пошаговой установкиСтильная форма пошаговой установки

Это комплект пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей....

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi-Item...

Стильный мульти слайдер с красивым эффектом, отлично подойдёт для интернет магазина, несомненно идея при создании этого слайдера, была взята в Aplle.....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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