Форум
Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Пакеты Forum 2x2автор Dana Domirani Май 6th 2024, 14:11
» Как поменять вид нумерации страниц тем?
автор Goodmonday Апрель 18th 2024, 21:04
» Форум не корректно загружается.
автор anna4842 Апрель 12th 2024, 23:48
» Не корректное отображение картинок
автор Красноперова О.А. Апрель 12th 2024, 15:49
» Ошибка на форуме: Could not obtain topic posts informations
автор fatalone Апрель 9th 2024, 13:43
» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Март 28th 2024, 12:13
» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31
» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43
» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37
» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26
Горизонтальное меню,в окне аккордеона
Участников: 5
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 2 из 2
Страница 2 из 2 • 
1, 2
Горизонтальное меню,в окне аккордеона
автор RUNIA Январь 20th 2013, 22:22
Первое сообщение в теме :
Здравствуйте! Пишу вам впервые.
Понравилась идея Аккордеон,что вы предлагаете:
Типа этого:
Вот к примеру так:
БЛАГАДАРЮ ЗА ПОНИМАНИЕ
Здравствуйте! Пишу вам впервые.
Понравилась идея Аккордеон,что вы предлагаете:
- Спойлер:
Типа этого:
- Спойлер:
Вот к примеру так:
БЛАГАДАРЮ ЗА ПОНИМАНИЕ
RUNIA-
-
Сообщения : 90
Регистрация : 2013-01-20
Благодарности : 5
-
Re: Горизонтальное меню,в окне аккордеона
автор Dana Domirani Январь 22nd 2013, 22:06
Смотрим код меню:
Теперь смотрим Ваши коды CSS (фрагмент):
В коде Вашего меню нет элемента с классом has-sub. Соответственно, настройки для этого элемента бесполезны. Можете их выкинуть, оформление не изменится.
Чтобы изменить вид меню из этого поста Вам надо отредактировать на свой вкус коды CSS из этого же поста.
Выделенное зеленым — это идентификаторы (id и классы) элементов. Именно к ним в определенном виде должны применяться персональные настройки CSS.<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>
Теперь смотрим Ваши коды CSS (фрагмент):
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
В коде Вашего меню нет элемента с классом has-sub. Соответственно, настройки для этого элемента бесполезны. Можете их выкинуть, оформление не изменится.
Чтобы изменить вид меню из этого поста Вам надо отредактировать на свой вкус коды CSS из этого же поста.
Dana Domirani- Администратор
- Сообщения : 22995
Регистрация : 2008-04-18 -
Re: Горизонтальное меню,в окне аккордеона
автор magnika Январь 23rd 2013, 00:09
все ровно не получается оставлю так, спасибо Dana за ответ и за поддержку 
magnika-
- Сообщения : 115
Регистрация : 2011-11-07
Благодарности : 0
-
Re: Горизонтальное меню,в окне аккордеона
автор RUNIA Январь 23rd 2013, 01:27
УДАЛИЛ. ВСЁ КАК И БЫЛО... 
А главное не возможно поставить меню на пару вкладок и пр.
Начинают пропадать фоновые изображения и вкладки работать в обратную сторону....
Народ,присоединяйтесь! Помогите реализовать меню в слайдере (аккордеон) .
А главное не возможно поставить меню на пару вкладок и пр.
Начинают пропадать фоновые изображения и вкладки работать в обратную сторону....
Народ,присоединяйтесь! Помогите реализовать меню в слайдере (аккордеон) .
RUNIA-
-
Сообщения : 90
Регистрация : 2013-01-20
Благодарности : 5
-
Re: Горизонтальное меню,в окне аккордеона
автор RUNIA Январь 23rd 2013, 20:46
Dana Domirani пишет:Runia, если вот этот код (первый этап, само меню без ничего) добавляете — слайдер не перекашивает?
- Код:
<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>
Всё тоже самое. Ставил разные коды меню.Найдя их в интернете. Может и не подходящие,но картина повторялась. Я уже думаю,что не в меню дело,а в скриптах? там их 2 .
Картина всё та-же... http://seloforum-2.forum2x2.ru/forum.htm
А всего-то нужно,вот так:
RUNIA-
-
Сообщения : 90
Регистрация : 2013-01-20
Благодарности : 5
-
Re: Горизонтальное меню,в окне аккордеона
автор Леший Январь 23rd 2013, 20:52
А если последнюю вкладку удалить попробовать ???
Леший-
-
Сообщения : 2143
Регистрация : 2012-10-05
Благодарности : 349
-
Re: Горизонтальное меню,в окне аккордеона
автор RUNIA Январь 23rd 2013, 22:04
Не помогло...Леший пишет:А если последнюю вкладку удалить попробовать ???
RUNIA-
-
Сообщения : 90
Регистрация : 2013-01-20
Благодарности : 5
-
Re: Горизонтальное меню,в окне аккордеона
автор RUNIA Январь 23rd 2013, 22:23
Сейчас убрал код МЕНЮ. Всё работает на ура!
Но стоит его поставить аккордеон не правильно работает...
Печально... но пока тема открыта,готов ждать совета!
Аккордион. создал два жава скрипта.
ПЕРВЫЙ:
ВСТАВЛЯЮ КОД МЕНЮ В ПРИВЕТСТВИЕ:
Я не понимаю в кодах,может быть что лишнее,а что не хватает.
Но стоит его поставить аккордеон не правильно работает...
Печально... но пока тема открыта,готов ждать совета!
Аккордион. создал два жава скрипта.
ПЕРВЫЙ:
- Спойлер:
- /*************************************************
*
* 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();
});
- Спойлер:
- .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>
Я не понимаю в кодах,может быть что лишнее,а что не хватает.
RUNIA-
-
Сообщения : 90
Регистрация : 2013-01-20
Благодарности : 5
-
Re: Горизонтальное меню,в окне аккордеона
автор magnika Январь 24th 2013, 11:33
вот что я сделал, на фоне под текстом поставил переключатель, без всяких прибамбас, простой и на мой взгляд удобный. а тот код меню, явно не подходит для phpbb2 и phpbb3.
если понравился, поставь между <div id="s1"> и </div>
если понравился, поставь между <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-
- Сообщения : 115
Регистрация : 2011-11-07
Благодарности : 0
-
Re: Горизонтальное меню,в окне аккордеона
автор RUNIA Январь 25th 2013, 07:40
Всем привет! Ребята я придумал,как сделать меню в Аккордеоне.
Поставил картинки в виде кнопок и привязал к ним ссылки!
Можно закрывать тему.
Вот наглядно:
Поставил картинки в виде кнопок и привязал к ним ссылки!
Можно закрывать тему.
Вот наглядно:
RUNIA-
-
Сообщения : 90
Регистрация : 2013-01-20
Благодарности : 5
-
Страница 2 из 2 • 1, 2
Похожие темы» Горизонтальное меню
» как убрать такое горизонтальное меню
» Основное меню форума с разворачиающимися меню для отдельных пунктов
» Как заменить стандартное меню навигации на разворачивающееся меню?
» Как можно закруглить углы у панели меню и выровнять разделы меню по одинаковой ширине?
» как убрать такое горизонтальное меню
» Основное меню форума с разворачиающимися меню для отдельных пунктов
» Как заменить стандартное меню навигации на разворачивающееся меню?
» Как можно закруглить углы у панели меню и выровнять разделы меню по одинаковой ширине?
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 2 из 2
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
Facebook
ВКонтакте
