Форум
Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» ВПНавтор Danny_Marcelo Сегодня в 07:47
» Пропала вкладка "Обработка пользователей"
автор Svet007 Вчера в 07:39
» Как найти администратора?
автор PushPayer Ноябрь 21st 2024, 00:58
» Не корректное отображение картинок
автор VENEFICA. Ноябрь 15th 2024, 14:46
» Не меняется название форума
автор Aviator Ноябрь 14th 2024, 15:40
» Дублируется ссылка на форум в боковом меню
автор Чистый сталкер Октябрь 26th 2024, 21:13
» совет админам
автор лексей2222 Октябрь 23rd 2024, 05:45
» Проблема с гугл из-за Hitskin
автор Вултур Октябрь 21st 2024, 15:43
» [решено]Редактирвоание темы
автор AlexDarkTech Октябрь 13th 2024, 08:14
» Пропали иконки редактирования - HEEELP
автор Archaea Сентябрь 23rd 2024, 18:11
Горизонтальное меню,в окне аккордеона
Участников: 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- Администратор
- Сообщения : 22996
Регистрация : 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
ВКонтакте
