Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Горизонтальное меню,в окне аккордеона

Страница 2 из 2 Предыдущий  1, 2

Предыдущая тема Следующая тема Перейти вниз

Горизонтальное меню,в окне аккордеона

Сообщение автор RUNIA в Вс 20 Янв - 22:22

Первое сообщение в теме :

Здравствуйте! Пишу вам впервые.
Понравилась идея Аккордеон,что вы предлагаете:
Спойлер:
Но вот вопрос: Возможно-ли на фоновое изображение,что там открывается поставить горизонтальное меню?
Типа этого:
Спойлер:
Если да,то куда устанавливать код меню? Да и желательно,чтобы я смог настроить цвет,размер,названия,ссылки,кнопок меню. Не забывая и про фоновое изображение.
Вот к примеру так:

БЛАГАДАРЮ ЗА ПОНИМАНИЕ yes

RUNIA
 

Мужчина

Сообщения : 90
Регистрация : 2013-01-20
Благодарности : 5

Без предупреждений

http://seloforum.forum2x2.ru/

Вернуться к началу Перейти вниз


Re: Горизонтальное меню,в окне аккордеона

Сообщение автор RUNIA в Ср 23 Янв - 22:04

@Леший пишет:А если последнюю вкладку удалить попробовать ???
Не помогло... sad

RUNIA
 

Сообщения : 90
Регистрация : 2013-01-20

http://seloforum.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Горизонтальное меню,в окне аккордеона

Сообщение автор RUNIA в Ср 23 Янв - 22:23

Сейчас убрал код МЕНЮ. Всё работает на ура!
Но стоит его поставить аккордеон не правильно работает... unknown
Печально... но пока тема открыта,готов ждать совета! 12
Аккордион. создал два жава скрипта.
ПЕРВЫЙ:
Спойлер:
/*************************************************
*
* project: liteAccordion - horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin
* demo: http://www.nicolahibbert.com/demo/liteAccordion
*
* Version: 1.1.3
* Copyright: (c) 2010-2011 Nicola Hibbert
*
/*************************************************/
(function($) {

$.fn.liteAccordion = function(options) {

// defaults
var defaults = {
containerWidth : 730,
containerHeight : 295,
headerWidth : 48,

firstSlide : 1,
onActivate : function() {},
slideSpeed : 800,
slideCallback : function() {},

autoPlay : false,
pauseOnHover : false,
cycleSpeed : 6000,

theme : 'basic', // basic, light*, dark, stitch*
rounded : false,
enumerateSlides : false
},

// merge defaults with options in new settings object
settings = $.extend({}, defaults, options),

// define key variables
$accordion = this,
$slides = $accordion.find('li'),
slideLen = $slides.length,
slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
$header = $slides.children('h2'),

// core utility and animation methods
utils = {
getGroup : function(pos, index) {
if (this.offsetLeft === pos.left) {
return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
} else if (this.offsetLeft === pos.right) {
return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) });
}
},
nextSlide : function(slideIndex) {
var slide = slideIndex + 1 || settings.firstSlide;

// get index of next slide
return function() {
return slide++ % slideLen;
}
},
play : function(slideIndex) {
var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
start = function() {
$header.eq(getNext()).click();
};

utils.playing = setInterval(start, settings.cycleSpeed);
},
pause : function() {
clearInterval(utils.playing);
},
playing : 0,
sentinel : false
};

// set container heights, widths, theme & corner style
$accordion
.height(settings.containerHeight)
.width(settings.containerWidth)
.addClass(settings.theme)
.addClass(settings.rounded && 'rounded');

// set tab width, height and selected class
$header
.width(settings.containerHeight)
.height(settings.headerWidth)
.eq(settings.firstSlide - 1).addClass('selected');

// ie :(
if ($.browser.msie) {
if ($.browser.version.substr(0,1) > 8) {
$header.css('filter', 'none');
} else if ($.browser.version.substr(0,1) < 7) {
return false;
}
}

// set initial positions for each slide
$header.each(function(index) {
var $this = $(this),
left = index * settings.headerWidth;

if (index >= settings.firstSlide) left += slideWidth;

$this
.css('left', left)
.next()
.width(slideWidth)
.css({ left : left, paddingLeft : settings.headerWidth });

// add number to bottom of tab
settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');

});

// bind event handler for activating slides
$header.click(function(e) {
var $this = $(this),
index = $header.index($this),
$next = $this.next(),
pos = {
left : index * settings.headerWidth,
right : index * settings.headerWidth + slideWidth,
newPos : 0
},
$group = utils.getGroup.call(this, pos, index);

// set animation direction
if (this.offsetLeft === pos.left) {
pos.newPos = slideWidth;
} else if (this.offsetLeft === pos.right) {
pos.newPos = -slideWidth;
}

// check if animation in progress
if (!$header.is(':animated')) {

// activate onclick callback with slide div as context
if (e.originalEvent) {
if (utils.sentinel === this) return false;
settings.onActivate.call($next);
utils.sentinel = this;
} else {
settings.onActivate.call($next);
utils.sentinel = false;
}

// remove, then add selected class
$header.removeClass('selected').filter($this).addClass('selected');

// get group of tabs & animate
$group
.animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
.next()
.animate({ left : '+=' + pos.newPos }, settings.slideSpeed);

}
});

// pause on hover
if (settings.pauseOnHover) {
$accordion.hover(function() {
utils.pause();
}, function() {
utils.play($header.index($header.filter('.selected')));
});
}

// start autoplay, call utils with no args = start from firstSlide
settings.autoPlay && utils.play();

return $accordion;

};

})(jQuery);
ВТОРОЙ:
Спойлер:
$(document).ready(function(){
$('#one').liteAccordion({
onActivate : function() {
this.find('figcaption').fadeOut();
},
slideCallback : function() {
this.find('figcaption').fadeIn();
},
autoPlay : true,
pauseOnHover : true,
theme : 'dark',
rounded : true,
enumerateSlides : true
}).find('figcaption:first').show();
});
В CSS:
Спойлер:
.accordion {
text-align:left;
font:'Helvetica Neue', Verdana, Arial, sans-serif;
}
.accordion ol {
position: relative;
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
.accordion li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%\9; left: 10%; left: 5%\9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }

/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }

/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #353535\9; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark h2.selected b { background: #434343\9; }
.dark li > div { background: #030303; margin-left: 5px; }

/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/***************************************** Light */
/**************************************** Stitch */

#s1 {
background:url("http://url_image_1") no-repeat #030303;
}
#s2 {
background:url("http://url_image_2") no-repeat #030303;
}
#s3 {
background:url("http://url_image3") no-repeat #030303;
}
В ПРИВЕТСТВИЕ:
Спойлер:
<div id="one" class="accordion">
<ol>
<li>
<h2><span>САДОВОДСТВО</span></h2>
<div id="s1"></div>
</div></li>

<li>
<h2><span>ОГОРОДНИЧЕСТВО</span></h2>
<div id="s2"></div>
</li>
<li>
<h2><span>КУЛИНАРИЯ</span></h2>
<div id="s3"></div>
</li>
<li>
<h2><span>ЖИЗНЬ ЗА ГОРОДОМ</span></h2>
<div id="s4"></div>
</li>
<li>
<h2><span>ДОМ И УСАДЬБА</span></h2>
<div id="s5"></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
Аккордеон работает на ура! :

ВСТАВЛЯЮ КОД МЕНЮ В ПРИВЕТСТВИЕ:
Спойлер:
<div id="one" class="accordion">
<ol>
<li>
<h2><span>САДОВОДСТВО</span></h2>
<div id="s1"><div id='cssmenu'>
<ul>
<li class='active'><a href='/page1.html' target='_blank'><span>Главная</span></a></li>
<li><a href='/page2.html' target='_blank'><span>HTML уроки</span></a></li>
<li><a href='/page3.html' target='_blank'><span>CSS уроки</span></a></li>
<li class='last'><a href='/page4.html' target='_blank'><span>Справочник</span></a></li>
</ul>
</div>
</div>
</li>

<li>
<h2><span>ОГОРОДНИЧЕСТВО</span></h2>
<div id="s2"></div>
</li>
<li>
<h2><span>КУЛИНАРИЯ</span></h2>
<div id="s3"></div>
</li>
<li>
<h2><span>ЖИЗНЬ ЗА ГОРОДОМ</span></h2>
<div id="s4"></div>
</li>
<li>
<h2><span>ДОМ И УСАДЬБА</span></h2>
<div id="s5"></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
КАРТИНКА СЛЕДУЮЩАЯ:

Я не понимаю в кодах,может быть что лишнее,а что не хватает. scratch
thank thank thank

RUNIA
 

Мужчина

Сообщения : 90
Регистрация : 2013-01-20
Благодарности : 5

Без предупреждений

http://seloforum.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Горизонтальное меню,в окне аккордеона

Сообщение автор magnika в Чт 24 Янв - 11:33

вот что я сделал, на фоне под текстом поставил переключатель, без всяких прибамбас, простой и на мой взгляд удобный. а тот код меню, явно не подходит для phpbb2 и phpbb3.



если понравился, поставь между <div id="s1"> и </div>

Спойлер:

<p class="sld_txt">ваш текст</p>

<p class="sld_txt"><b>ваш текст</b></p>

<a href="http://адрес ссылки/" target="_blank"><size=40><b>название ссылки</b></size></a>

magnika
 

Сообщения : 117
Регистрация : 2011-11-07
Благодарности : 0

Без предупреждений

http://magnika.org

Вернуться к началу Перейти вниз

Re: Горизонтальное меню,в окне аккордеона

Сообщение автор RUNIA в Пт 25 Янв - 7:40

Всем привет! Ребята я придумал,как сделать меню в Аккордеоне.
Поставил картинки в виде кнопок и привязал к ним ссылки!
Можно закрывать тему. yes
Вот наглядно:

RUNIA
 

Мужчина

Сообщения : 90
Регистрация : 2013-01-20
Благодарности : 5

Без предупреждений

http://seloforum.forum2x2.ru/

Вернуться к началу Перейти вниз

Страница 2 из 2 Предыдущий  1, 2

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения