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

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

ОБСУЖДЕНИЕ

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

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

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

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

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.

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

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

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

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....

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

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

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фо...

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

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

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

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

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jquery

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Lotus Flower v1.2Lotus Flower v1.2

Lotus Flower - это современный универсальный шаблон для WordPress с адаптивной вёрсткой и большим функционалом....

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

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

Футер на cssФутер на css

Красивый и в тоже время довольно оригинальный футер на css, он же подвал сайта....

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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