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

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

ОБСУЖДЕНИЕ

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

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

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

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

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню н...

Горизонтальное многоуровневое фиксированного меню в темном стиле...

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

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

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

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

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

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

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

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

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

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

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню на css

Горизонтальное многоуровневое фиксированного меню в темном стиле...

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

LibertyLiberty

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

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....
  • Текущий 1.22/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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