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

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

ОБСУЖДЕНИЕ

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

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

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

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

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией н...

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

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

Горизонтальное меню на css3 с замечательным эффектом....

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

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

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

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

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

Меню с выпадающими пунктами на css

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

Полно-экранное меню на css и Jquery с меняющимся фоном....
Интересные публикации:

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

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

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

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

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

Max Mag v1.0.9Max Mag v1.0.9

Max Mag - это адаптивный широкоформатный шаблон для WordPress....

CharismaCharisma

Профессиональный шаблон административной панели, построенный на HTML5, в шаблоне имеются: закладки, меню, галерея, набор кнопок......
  • Текущий 1.22/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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