Как сделать «Accordion» на Joomla сайте

Для того чтобы сделать собственный сайт привлекательным в глазах посетителей, нам приходится создавать парой сложные, но в тоже время интересные элементы дизайна. К тому же они иногда имеют весьма практичный смысл, к примеру, экономят места. Конечно, многие из нас предпочитают сторонние шаблоны для Joomla, так как они уже содержать красивый внешний вид. Но сегодня, мы не станем искать лёгких путей. В этой статье мы рассмотрим три способа создания Аккордеона.

Accordion - это один из элементов визуального оформления, его задача скрыть контент, а после нажатия на заголовок пункта открыть его. На самом деле способов создание аккордеона огромное множество, но мы разделили их на три основных. Первый основан на современной таблице стилей - CSS3. Второй предполагает подключение JavaScript. Ну а третьим способом станут стандартные средства Joomla. У каждого из них будет плавная анимация, а первые два можно установить на любой сайт, при этом неважно какой движок вы используете.

«Accordion» на Joomla Демо

1 способ - CSS3

Для того чтобы понять как всё работает, мы начнём с самого простого варианта. Здесь нам понадобиться создать всего два файла HTML и CSS, а после положить их в одну папку вместе.

1. На рабочем столе создайте папку MySite.

2. Откройте Notepad++ и нажмите Ctrl+Alt+S. Введите название index, а тип файла выберите HTML.

Создание файла index.html

Сохраните этот файл в нашу папку MySite.

3. После сохранения файл index.html будет открыт в редакторе, туда необходимо вставить вот этот код:

HTML код:
<!DOCTYPE html>
<html>
<head>
    <title>Accordion CSS3</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
</head>
<body>
 
<!------------ Аккордеон на CSS3 ------------>
<div>
    <section>
        <div>
            <input id="ac-1" name="accordion-1" type="checkbox" />
            <label for="ac-1">О нас</label>
            <article>
                <p>Наша компания занимается разработкой...</p>
            </article>
        </div>
        <div>
            <input id="ac-2" name="accordion-1" type="checkbox" />
            <label for="ac-2">Коллектив</label>
            <article>
                <p>У нас самые лучшие программисты...</p>
            </article>
        </div>
        <div>
            <input id="ac-3" name="accordion-1" type="checkbox" />
            <label for="ac-3">Контакты</label>
            <article>
                <p>Вы можете связаться с нами по телефонам...</p>
            </article>
        </div>
    </section>
</div>
<!------------ Аккордеон на CSS3 ------------>
 
</body>
</html>

4. После того как у нас полностью готов первый файл, нам необходимо прописать стили для визуального оформления вкладок и текста внутри. Вновь при помощи Notepad++ создаём «style» с типом CSS как показано на картинке ниже:

Создаем файл style.css

Положите его в туже папку.

5. Вставляем в style.css вот этот код:

CSS код:
.ac-container{
    width: 600px;
    margin: 50px auto 30px auto;
    text-align: left;
    background: #eee;
}
.ac-container label{
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 17px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
    background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #D0D8E8;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container input{
    display: none;
}
.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
    height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 180px;
}
.ac-container input:checked ~ article.ac-large{
    height: 230px;
}

6. Теперь заходим в MySite, где два файла и открываем index.html в браузере. Вот что должно получиться:

1 способ - CSS3

Стили, которые мы использовали для создания анимации в выпадающих вкладках, работают только на современных браузерах. Это связано с тем, что мы используем CSS3. Посмотреть ДЕМО (http://websitek.ru/demo/Accordion-CSS3/).

2 способ - JavaScript

Второй способ заключается в создании тех же файлов, но с подключением дополнительных скриптов. Один будет автоматически загружаться браузером с сервера Google во время открытия страницы, а второй будет прописан в самом файле, он станет отвечать за действия мышкой. В нём я подписал значения, которые можно изменить.

1. На рабочем столе создайте вторую папку с именем MySite2.

2. В ней при помощи всё той же программы Notepad++ создаём два файла index.html и style.css. Всё как мы делали до этого.

Создаём два файла index.html и style.css

3. В index.html вставляем вот этот код:

HTML код:
<!DOCTYPE html>
<html>
<head>
    <title>Accordion jQuery</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
</head>
<body>
 
<!------------ Аккордеон на jQuery ------------>
<div>
    <div>О нас</div>
        <div>
            <p>Наша компания занимается разработкой...</p>
        </div>
 
    <div>Коллектив</div>
        <div>
            <p>У нас самые лучшие программисты...</p>
        </div>
 
    <div>Контакты</div>
        <div>
            <p>Вы можете связаться с нами по телефонам...</p>
        </div>    
</div>
 
<!-- Подключаем скрипты -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".accordion .accord-header").click(function() {
if($(this).next("div").is(":visible")){
$(this).next("div").slideUp(700); // Скорость "ЗАКРЫТИЯ" (если нажал на ТУЖЕ вкладку)
} else {
$(".accordion .accord-content").slideUp(700); // Скорость "ЗАКРЫТИЯ" (если нажал на ДРУГУЮ вкладку)
$(this).next("div").slideToggle(700); // Скорость "ОТКРЫТИЯ" (100-быстро, 2000-медленно)
}
});
});
</script>
<!------------ Аккордеон на jQuery ------------>
 
</body>
</html>

4. А в style.css вот это:

CSS код:
.accordion{
    width: 600px;
    margin: 50px auto 30px auto;
    text-align: left;
    background: #eee;
}
 
.accord-header{
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 17px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
}
.accord-header:hover{
    background: #fff;
}
.accord-content {
    display: none;
}
.accord-content p{
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

5. Заходим в нашу папку MySite2 и открываем index.html в браузере. Должно получиться так:

2 способ - JavaScript

Посмотреть ДЕМО (http://websitek.ru/demo/Accordion-jQuery/).

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

3 способ - Bootstrap Joomla

Настало время поговорить о последнем варианте создания аккордеона. Он основан на Bootstrap Framework. Это своего рода библиотека, которая устанавливается в шаблон и облегчает создание элементов на сайте. Нам достаточно написать небольшие команды на PHP для того чтобы получить желаемое. Устанавливать сам Bootstrap не станем, мы воспользуемся стандартным шаблоном «protostar» из Joomla, в нём уже есть всё, что нам надо. Данный способ работает, начиная от Joomla 3.2 и выше.

Рассматривать таблицу стилей в этом примере не станем.

Для того чтобы создать «Accordion» нам понадобиться вот этот код:

PHP код:
<?php echo JHtml::_('bootstrap.startAccordion', 'slide-example', array('active' => 'slide1')); ?>
 
    <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'О нас', 'slide1'); ?>
        <p>Наша компания занимается разработкой...</p>
    <?php echo JHtml::_('bootstrap.endSlide'); ?>
 
    <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'Коллектив', 'slide2'); ?>
        <p>У нас самые лучшие программисты...</p>
    <?php echo JHtml::_('bootstrap.endSlide'); ?>
 
    <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'Контакты', 'slide3'); ?>
        <p>Вы можете связаться с нами по телефонам...</p>
    <?php echo JHtml::_('bootstrap.endSlide'); ?>
 
<?php echo JHtml::_('bootstrap.endAccordion'); ?>

Вставьте его в файл index.php между тегами <body></body> нашего шаблона. Аккордеон получился весьма простой, а при редактировании придётся каждый раз лесть в php и править вручную. Такой способ подходит разве что для сайта-визитки. Вот что получилось:

Аккордеон Bootstrap

Признаться честно, таким положением дел я лично не доволен, поэтому предлагаю создать Accordion, внутри которого будут располагаться позиции под модули. Это даст нам возможность быстро редактировать контент внутри вкладок посредством панели управления. К тому же, сможем установить туда любой тип модуля, а это практически безграничные возможности.

1. Скачиваем на компьютер с сервера два файла index.php и templateDetails.xml. Оба открываем в Notepad++.

Редактируем index.php и templateDetails.xml

2. Для начала в templateDetails.xml прописываем это:

XML код:
<position>Accordion1</position>
<position>Accordion2</position>
<position>Accordion3</position>

Так как показано на следующей картинке:

Редактирование templateDetails.xml

3. Теперь переходим к редактированию index.php. Я выбрал место перед подвалом нашего сайта. Вставляем этот код:

PHP код:
<?php if ($this->countModules('Accordion1 or Accordion2 or Accordion3')) : ?>
<?php echo JHtml::_('bootstrap.startAccordion', 'slide-example', array('active' => 'slide1')); ?>
 
    <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'О нас', 'slide1'); ?>
        <p><jdoc:include type="modules" name="Accordion1" style="xhtml" /></p>
    <?php echo JHtml::_('bootstrap.endSlide'); ?>
 
    <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'Коллектив', 'slide2'); ?>
        <p><jdoc:include type="modules" name="Accordion2" style="xhtml" /></p>
    <?php echo JHtml::_('bootstrap.endSlide'); ?>
 
    <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'Контакты', 'slide3'); ?>
        <p><jdoc:include type="modules" name="Accordion3" style="xhtml" /></p>
    <?php echo JHtml::_('bootstrap.endSlide'); ?>
 
<?php echo JHtml::_('bootstrap.endAccordion'); ?>
<?php endif; ?>

Делаем это внизу файла, вот тут:

Редактирование index.php

4. После всех этих действий, бросаем наши файлы обратно на сервер, откуда мы их скачивали. Если сейчас открыть сайт, то нечего не произойдёт. Это нормально, аккордеон покажется только при условии заполнения хотя бы одной вкладки. А для того чтобы заполнить их потребуется создать модули.

5. Бежим «Панель управлений-->Расширения-->Менеджер модулей». Вверху нажимаем «Создать». Я выбрал «HTML-код». А после вводим название, скрываем заголовок, пишем текст в редакторе и справа выбираем позицию Accordion1 [Accordion1]. Нажимаем «Сохранить и закрыть».

Модуль аккордеон

6. Аналогично пункту 5 необходимо создать ещё два модуля на ваше усмотрение. В каждом из них обязательно отключить заголовок и выбрать позицию Accordion2 [Accordion2] для второй вкладки, а так же Accordion3 [Accordion3] соответственно для третьей.

Остаётся открыть наш сайт и посмотреть на результат.

Аккордеон Bootstrap Joomla

В заключении

Все представленные варианты в статье работают по разным принципам. Поэтому, если вам не подошел один способ, вы всегда сможете использовать другой.

4.5201612903226 1 1 1 1 1 (Оценок: 248)

Опубликовано: 28-05-2016

Соседние материалы
	7 вещей, о которых нужно знать перед запуском сайта на Joomla		Как добавить собственную позицию для модулей в Joomla

На первый взгляд процедура может выглядит сложно,но если разобраться то лаже школьник сможет это сделать!Также мне кажется,что 2 способ самый легкий и достаточно быстро можно создать"Accordi on".

Обновить список комментариев

Вы не зарегистрированы, чтобы оставлять комментарии.

Создаём «Accordion» на Joomla своими руками

1 способ - CSS3

2 способ - JavaScript

3 способ - Bootstrap Joomla

В заключении

Соседние материалы

Комментарии

Документация

Информация

Войти

Создаём «Accordion» на Joomla своими руками

1 способ - CSS3

2 способ - JavaScript

3 способ - Bootstrap Joomla

В заключении

Соседние материалы

Комментарии

Документация

Информация