Перейти к содержанию
Vadim455

[Решено] Раскрывающееся меню

Рекомендуемые сообщения

Ребята, кто может помочь? мне нужен раскрывающийся список, как здесь: ТЫЦ  (Курьерская доставка и т.д.)

Я скачал js и css с этого сайта, но не знаю как установить себе... 

мне нужно точно как на этом сайте... оранжевый блок, раскрывающаяся информация 

я не особо секу, поэтому если объясните как ребенку - буду весьма признателен... я прикрепил css файл и содержимое js файла. Помогите, пожалуйста

template_e18e5bf2cff9978a01492ea42aac06cd_2a63f024a7dc028e2c9cfcd8e7b3e9e4.css

js.txt

Изменено пользователем Vadim455

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

<input type="submit" onclick="$('div.nagato').toggle('normal');" value="раскрыть текст">
<div class="nagato" style="display:none;">Здесь текст, но сюда так же можно поставить любой скрипт или плеер...</div>
 
Вместо input можно так же использовать div, button, <a href="#">

пример http://adr.alexandrova.net/index.php?route=information/information&information_id=4

Изменено пользователем koreshok

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

<script>function showTooltip()
{
var myDiv = document.getElementById('tooltip');
var myLink = document.getElementById('link');
if(myDiv.style.display == 'none'){
myDiv.style.display = 'block';
myLink.style.display = 'none';
} else {
myDiv.style.display = 'none';
}
return false;
}</script>
<a href='javascript:;' onclick=showTooltip() id="link"> Показать </a>
<div id=tooltip style='display: none'>
Тут текст фыва фыва фыва
</div>

еще

<script>
 function collapsElement(id) {
 if ( document.getElementById(id).style.display != "none" ) {
 document.getElementById(id).style.display = 'none';
 }
 else {
 document.getElementById(id).style.display = '';
 }
 }
 </script>
<div><a href="javascript:collapsElement('identifikator')" title="" rel="nofollow">Текст ссылки</a>
<div id="identifikator" style="display: none">
<p>Текст текст текст текст</p>
</div>
</div>

 

<div><a href="#open1" onclick="show('hidden_1',200,5)">Ссылка 1</a></div>
<div id=hidden_1 style="display:none;height:200px;width:350px;background-color:#f0f0f0"> Тут вводим текст. </div>
<div><a href="#open2" onclick="show('hidden_2',200,3)">Ссылка 2</a></div>
<div id=hidden_2 style="display:none;height:200px;width:350px;background-color:#f0f0f0"> Тут вводим текст. </div>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/ var s=[],s_timer=[]; function show(id,h,spd) { s[id]= s[id]==spd? -spd : spd; s_timer[id]=setTimeout(function() { var obj=document.getElementById(id);
if(obj.offsetHeight+s[id]>=h){obj.style.height=h+"px";
obj.style.overflow="auto";} else if(obj.offsetHeight+s[id]<=0){obj.style.height=0+"px";
obj.style.display="none";} else {obj.style.height=(obj.offsetHeight+s[id])+"px";
obj.style.overflow="hidden"; obj.style.display="block";
setTimeout(arguments.callee, 10); } }, 10); } /*]]>*/ </script>
Изменено пользователем koreshok

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ну и последний вариант.. делал на быструю руку, так что особо не ругайте..

post-22469-0-40130400-1435409239_thumb.png

создаете статью, в не вставляете

<div id="demo-wrapper">
	<div class="akordeon" id="buttons">
		<div class="akordeon-item expanded">
			<div class="akordeon-item-head">
				<div class="akordeon-item-head-container">
					<div class="akordeon-heading">ССЫЛКА_01</div>
				</div>
			</div>
			<div class="akordeon-item-body">
				<div class="akordeon-item-content">
					это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
			</div>
		</div>
		<div class="akordeon-item">
			<div class="akordeon-item-head">
				<div class="akordeon-item-head-container">
					<div class="akordeon-heading">ССЫЛКА_02</div>
				</div>
			</div>
			<div class="akordeon-item-body">
				<div class="akordeon-item-content">
					это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
			</div>
		</div>
		<div class="akordeon-item">
			<div class="akordeon-item-head">
				<div class="akordeon-item-head-container">
					<div class="akordeon-heading">ССЫЛКА_03</div>
				</div>
			</div>
			<div class="akordeon-item-body">
				<div class="akordeon-item-content">
					это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
			</div>
		</div>
	</div>

</div>

в header.tpl подключаете

<script src="catalog/view/javascript/jquery.akordeon.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#buttons').akordeon();
             $('#button-less').akordeon({ buttons: true, toggle: true});
        });
    </script>

в стили добавляете

.akordeon{
    font-size: 12px;
}
.akordeon-item{
    position: relative;
}
.akordeon-item .akordeon-item-head{
    height: 18px;
    background: #0F8291;
    padding-top: 14px;
    border-bottom: solid 1px #fff;
}
.akordeon-item .akordeon-item-body{
    border-bottom: none;
    overflow: hidden;
}
.akordeon-icon{
    width: 36px;
    height: 31px;
    padding: 0;
    margin: 0px;
    margin-top: -14px;
    float: left;
    cursor: pointer;
}
.akordeon-heading{
    float: left;
    padding-left: 10px;
    padding-top: 0px;
    margin-top: -5px;
    text-transform: uppercase;
    color: #fff;
}
.akordeon-icon span{
    color: #fff;
    font-size: 36px;
    position: absolute;
    left: 6px;
    top: -18px;
    font-weight: bold;
    text-align: center;
}
.akordeon-item.expanded .akordeon-icon span{
    top: -20px;
}
.akordeon-item-head-container{
    width: 100%;
    position: absolute;
    left: 0px;
    cursor: pointer;
}
.akordeon-item.expanded .akordeon-item-body{
    width: 100%;
}
.akordeon-item.expanded .akordeon-heading{
    color: #fff;
}

.akordeon-item.expanded .akordeon-item-head{
    background: #16B4C8;
}
.akordeon-item-content{
    padding: 10px;
    overflow:auto;
}
.akordeon-border-bottom{
    border-bottom: solid 1px #fff;
}
.akordeon-border-top{
    border-top: solid 1px black;
}
.akordeon-item.expanded .akordeon-item-body.akordeon-border-bottom{
    border-bottom: solid 1px #fff;
}
.akordeon-item.akordeon-item-first .akordeon-item-head{
}

.akordeon-item.akordeon-item-last.collapsed .akordeon-item-head{
   border-bottom: none;
}
.akordeon-item.akordeon-item-last.expanded .akordeon-item-head{
    border-bottom: solid 1px #fff;
}
.akordeon-item.akordeon-item-last.expanded .akordeon-item-body{
}

ну и файл из архива .. на сервер..

jquery.akordeon.zip

Изменено пользователем koreshok

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо. Помогает))

Но вот код не корректен

<div><a href="#open1" onclick="show('hidden_1',200,5)">Ссылка 1</a></div>
<div id=hidden_1 style="display:none;height:200px;width:350px;background-color:#f0f0f0"> Тут вводим текст. </div>
<div><a href="#open2" onclick="show('hidden_2',200,3)">Ссылка 2</a></div>
<div id=hidden_2 style="display:none;height:200px;width:350px;background-color:#f0f0f0"> Тут вводим текст. </div>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/ var s=[],s_timer=[]; function show(id,h,spd) { s[id]= s[id]==spd? -spd : spd; s_timer[id]=setTimeout(function() { var obj=document.getElementById(id);
if(obj.offsetHeight+s[id]>=h){obj.style.height=h+"px";
obj.style.overflow="auto";} else if(obj.offsetHeight+s[id]<=0){obj.style.height=0+"px";
obj.style.display="none";} else {obj.style.height=(obj.offsetHeight+s[id])+"px";
obj.style.overflow="hidden"; obj.style.display="block";
setTimeout(arguments.callee, 10); } }, 10); } /*]]>*/ </script>

При нажатии на ссылка1 или сылка2 через секунду перекидывает на главную страницу. Что делать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Если можно, то поподробней. У меня ничего не получилось(((

Помогите разобраться..

Изменено пользователем afwollis

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

что конкретно вам не понятно?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

"Ну и файл из архива на сервер"

А куда конкретно этот файл закачать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А все, увидел. Благодарю. Нормальная вещь.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Покажите..хотя бы скрин..

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Покажите..хотя бы скрин..

Посмотрите сылку http://guardgsm.ru/

 

Видите, внизу второй список, но он уже не раскрывается.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вото скриншот

могу предложить вариант на чистом ccs

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

<ul class="accordion">
    <li class="accordion_item">
        <label class="accordion_trigger" for="toggle-01">Заголовок панели 1</label>
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-01" checked />
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <label class="accordion_trigger" for="toggle-02">Заголовок панели 2</label>
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-02" />
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <label class="accordion_trigger" for="toggle-03">Заголовок панели 3</label>
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-03" />
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <label class="accordion_trigger" for="toggle-04">Заголовок панели 4</label>
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-04" />
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
</ul>

в стили это

/**
 * Компоненты аккордеона.
 */
.accordion {
  margin: 0;
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
}
.accordion_item {
  border-bottom: 1px solid #5a95fd;
}
.accordion_item:last-of-type {
  border-bottom: none;
}
/**
* Элемент label который запускает открыть/закрыть.
*/
.accordion_trigger {
  display: block;
  background-color: #007ccf;
  color: #ddd;
  font-weight: bold;
  cursor: pointer;
  padding: 1.5rem;
}
/**
* элементы radio/checkbox всегда должны быть скрыты 
* c помощью нулевых значений свойства clip 
*/
.accordion_toggle {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/**
* скрытое содержание аккордеона
* c помощью нулевых значений свойства clip
*/
.accordion_target {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  background-color: #ddd;
  color: #444;
}
/**
* когда переключатель checked на radio/checkbox, показать содержимое аккордеона.
*/
.accordion_toggle:checked + .accordion_target {
  position: static;
  overflow: visible;
  width: auto;
  height: auto;
  margin: auto;
  clip: auto;
  padding: 1.5rem;
 /* задержка появления  функция анимации */
 -webkit-animation:fadeIn ease-in 0.7s; 
 -moz-animation:fadeIn ease-in 0.7s;
 animation:fadeIn ease-in 0.7s; 
}
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
можете хоть сотню разместить Изменено пользователем koreshok

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<ul class="accordion">
    <li class="accordion_item">
        <label class="accordion_trigger" for="toggle-01">Заголовок панели 1</label>
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-01" checked />
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <label class="accordion_trigger" for="toggle-02">Заголовок панели 2</label>
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-02" />
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <label class="accordion_trigger" for="toggle-03">Заголовок панели 3</label>
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-03" />
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <label class="accordion_trigger" for="toggle-04">Заголовок панели 4</label>
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-04" />
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
</ul>

в стили это

/**
 * Компоненты аккордеона.
 */
.accordion {
  margin: 0;
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
}
.accordion_item {
  border-bottom: 1px solid #5a95fd;
}
.accordion_item:last-of-type {
  border-bottom: none;
}
/**
* Элемент label который запускает открыть/закрыть.
*/
.accordion_trigger {
  display: block;
  background-color: #007ccf;
  color: #ddd;
  font-weight: bold;
  cursor: pointer;
  padding: 1.5rem;
}
/**
* элементы radio/checkbox всегда должны быть скрыты 
* c помощью нулевых значений свойства clip 
*/
.accordion_toggle {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/**
* скрытое содержание аккордеона
* c помощью нулевых значений свойства clip
*/
.accordion_target {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  background-color: #ddd;
  color: #444;
}
/**
* когда переключатель checked на radio/checkbox, показать содержимое аккордеона.
*/
.accordion_toggle:checked + .accordion_target {
  position: static;
  overflow: visible;
  width: auto;
  height: auto;
  margin: auto;
  clip: auto;
  padding: 1.5rem;
 /* задержка появления  функция анимации */
 -webkit-animation:fadeIn ease-in 0.7s; 
 -moz-animation:fadeIn ease-in 0.7s;
 animation:fadeIn ease-in 0.7s; 
}
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
можете хоть сотню разместить

 

Благодарю! Нормальный вариант.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.