Jump to content
Sign in to follow this  
Vadim455

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

Recommended Posts

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

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

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

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

template_e18e5bf2cff9978a01492ea42aac06cd_2a63f024a7dc028e2c9cfcd8e7b3e9e4.css

js.txt

Edited by Vadim455

Share this post


Link to post
Share on other sites

<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

Edited by koreshok

Share this post


Link to post
Share on other sites

<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>
Edited by koreshok

Share this post


Link to post
Share on other sites

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

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

Edited by koreshok

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Edited by afwollis

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

<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 }
}
можете хоть сотню разместить Edited by koreshok

Share this post


Link to post
Share on other sites
<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 this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.