Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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

Vadim455

Автор: ,
в Песочница

 Share

Recommended Posts

Vadim455 Contributor

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

Змінено користувачем Гість
Надіслати
Поділитися на інших сайтах
Гість

Гість

Опубліковано:
Опубліковано: (змінено) 

<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>
Змінено користувачем Гість
Надіслати
Поділитися на інших сайтах
Гість

Гість

Опубліковано:
Опубліковано: (змінено)

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

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

Змінено користувачем Гість
Надіслати
Поділитися на інших сайтах
  • 3 months later...
Inan2015 Rookie

Inan2015

Опубліковано:
Опубліковано:

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

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

<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 через секунду перекидывает на главную страницу. Что делать?

Надіслати
Поділитися на інших сайтах

  • 3 weeks later...
masterlog Contributor

masterlog

Опубліковано:
Опубліковано:

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

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

Надіслати
Поділитися на інших сайтах

Гість

Гість

Опубліковано:
Опубліковано: (змінено) 

<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 }
}
можете хоть сотню разместить Змінено користувачем Гість
Надіслати
Поділитися на інших сайтах
masterlog Contributor

masterlog

Опубліковано:
Опубліковано: 
<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 }
}
можете хоть сотню разместить

 

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

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду