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

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

ОБСУЖДЕНИЕ

Меню с фоновым изображением

Меню с фоновым изображением
Просмотров: 1117  Скачан: 168 раз  Комментариев в теме: 0

Меню с фоновым изображением реализованое на css с красивой анимацией. При переходе по разделам меню, выбранный вами раздел выдвигается вверх с его описанием, по истечению времени, раздел автоматически возвращается в исходное положение.

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

 

HTML

<div id="accordion"> 
    <a href="#">  
    <div class="panel_container" id="panel1">
        <h3 id="visible">Panel 1</h3>
        <div id="panel1-body" class="panel_body">
            <div>
                This is the contents of this panel.
            </div>
        </div>
    </div>
    </a>
    <a href="#">
    <div class="panel_container" id="panel2">
        <h3>Panel 2</h3>
        <div id="panel2-body" class="panel_body">
            <div>
                This is the contents of this panel.
            </div>
        </div>
    </div>
    </a>
    <a href="#">
    <div class="panel_container" id="panel3">
        <h3>Panel 3</h3>
        <div id="panel3-body" class="panel_body">
            <div>
                This is the contents of this panel.
            </div>
        </div>
    </div>
    </a>
    <a href="#">
    <div class="panel_container" id="panel4">
        <h3>Panel 4</h3>
        <div id="panel4-body" class="panel_body">
            <div>
                This is the contents of this panel.
            </div>
        </div>
    </div>
    </a>
    <a href="#">
    <div class="panel_container" id="panel5">
        <h3>Panel 5</h3>
        <div id="panel5-body" class="panel_body">
            <div>
                This is the contents of this panel.
            </div>
        </div>
    </div>
    </a>
</div>

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

 

CSS

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

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

 

JS

<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/tabslide.js" type="text/javascript"></script>
Материалы по теме:

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

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

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

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

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

Выпадающее меню в темном стиле, реализованное полностью на css...

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню ...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бум...

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

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

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

HTML шаблон ImagoHTML шаблон Imago

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....

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

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

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

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

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....

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

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

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бумаги

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

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

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......
  • Текущий 1.50/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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