Лента этого топика

LiveStreet - Навигация в Sidebar с использованием плагина ThreeBlogs.

(Ответов: 3, Просмотров: 877)
  1. 29.07.2014 19:13
    #1
    Exitos вне форума
    Exitos
    Новичок Аватар для Exitos
    • Регистрация: 24.07.2014
    • Сообщений: 12
    • Репутация: 1
    Здравствуйте. Вообщем уже все перепробовал, и даже уже не знаю к кому обратится за помощью. Сделал навигацию для сайта, а вот подключить её к LiveStreet - не получается.

    Первый способ как это я делаю:

    1. Открываю Sidebar.tpl и вставляю вот это:
    Код HTML: 
    <div class="container-sidebar-nav"> <ul> <li class="dropdown-sidebar"> <a href="#" data-toggle="dropdown">Отношения <i class="icon-arrow"></i></a> <ul class="dropdown-menu"> <li><a href="#">Знакомства</a></li> <li><a href="#">Любовь</a></li> <li><a href="#">Секс</a></li> <li><a href="#">Семья</a></li> <li><a href="#">Дети</a></li> <li><a href="#">Психология</a></li> </ul> </li> </ul> </div>
    Открываю mod.css и вставляю вот это:
    Код: 
    .text-center {
  text-align: center;
}

*, *:before, *:after {
  -webkit-border-sizing: border-box;
  -moz-border-sizing: border-box;
  border-sizing: border-box;
}

.container-sidebar-nav {
  width: 200px;
  text-shadow: none;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
}
.container-sidebar-nav > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.title {
  font-family: 'Pacifico';
  font-weight: norma;
  font-size: 40px;
  text-align: center;
  line-height: 1.4;
  color: #f66a8e;
}

.dropdown-sidebar a {
  text-decoration: none;
}
.dropdown-sidebar [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: white;
  background: #f66a8e;
  -moz-box-shadow: 0 1px 0 #f99ab2 inset, 0 -1px 0 #f33a6a inset;
  -webkit-box-shadow: 0 1px 0 #f99ab2 inset, 0 -1px 0 #f33a6a inset;
  box-shadow: 0 1px 0 #f99ab2 inset, 0 -1px 0 #f33a6a inset;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
  background: #f77899;
}
.dropdown-sidebar .icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
}
.dropdown-sidebar .icon-arrow.open {
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown-sidebar .icon-arrow.close {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown-sidebar .icon-arrow:before {
  content: '\25BC';
}
.dropdown-sidebar .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown-sidebar .dropdown-menu li {
  padding: 0;
}
.dropdown-sidebar .dropdown-menu li a {
  display: block;
  text-shadow: none;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  background: #f05980;
  -moz-box-shadow: 0 1px 0 #f488a4 inset, 0 -1px 0 #ec2a5c inset;
  -webkit-box-shadow: 0 1px 0 #f488a4 inset, 0 -1px 0 #ec2a5c inset;
  box-shadow: 0 1px 0 #f488a4 inset, 0 -1px 0 #ec2a5c inset;
  padding: 10px 10px;
}
.dropdown-sidebar .dropdown-menu li a:hover {
  background: #f1678b;
}
.dropdown-sidebar .show, .dropdown-sidebar .hide {
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.dropdown-sidebar .show {
  display: block;
  max-height: 9999px;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  -moz-animation: showAnimation 0.5s ease-in-out;
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-transition: max-height 1s ease-in-out;
  -o-transition: max-height 1s ease-in-out;
  -webkit-transition: max-height 1s ease-in-out;
  transition: max-height 1s ease-in-out;
}
.dropdown-sidebar .hide {
  max-height: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
}

@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }

  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }

  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }

  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
    Открываю templates.js и вставляю вот это:
    Код: 
    // Dropdown Menu
var dropdown = document.querySelectorAll('.dropdown-sidebar');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
	var button = el.querySelector('a[data-toggle="dropdown"]'),
			menu = el.querySelector('.dropdown-menu'),
			arrow = button.querySelector('i.icon-arrow');

	button.onclick = function(event) {
		if(!menu.hasClass('show')) {
			menu.classList.add('show');
			menu.classList.remove('hide');
			arrow.classList.add('open');
			arrow.classList.remove('close');
			event.preventDefault();
		}
		else {
			menu.classList.remove('show');
			menu.classList.add('hide');
			arrow.classList.remove('open');
			arrow.classList.add('close');
			event.preventDefault();
		}
	};
})

Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
    А в итоге получаю вот это:
    Нажмите на изображение для увеличения.  Название: 03bb9f.png  Просмотров: 4  Размер: 9.6 Кб  ID: 15144

    Создал тему на LiveStreet, сказали там, что проблема в том, что шаблон сайта на Bootstrap. Возможно есть тут люди, которые подскажут, что можно сделать, что бы меню нормально отображалось? Пример меню можно посмотреть здесь. По аналогии пробовал и шаблоне самого модуля ThreeBlogs, такая же ситуация происходит.
    • 0
  2. Значок / Очков: 5 Значок / Очков: 5 Значок / Очков: 5 Значок / Очков: 5
    29.07.2014 19:37
    #2
    OneShot вне форума
    OneShot
    Banned
    • Регистрация: 24.02.2013
    • Сообщений: 1,219
    • Записей в дневнике: 1
    • Репутация: 332
    • Webmoney BL: ?
    Что не так? Как оно вообще должно выглядеть? Не понятен ваш вопрос
    • 0
  3. 29.07.2014 19:47
    #3
    Exitos вне форума
    Exitos
    Новичок Аватар для Exitos
    • Регистрация: 24.07.2014
    • Сообщений: 12
    • Репутация: 1
    OneShot,
    Пример меню можно посмотреть здесь. А у меня меню совсем не разворачивается, точнее развертывается, только выглядит все ужасно. Попробовал менять название классов, думал, что берет другие классы, но проблема так и осталась.
    • 0
  4. Значок / Очков: 5 Значок / Очков: 5 Значок / Очков: 5 Значок / Очков: 5
    29.07.2014 20:15
    #4
    OneShot вне форума
    OneShot
    Banned
    • Регистрация: 24.02.2013
    • Сообщений: 1,219
    • Записей в дневнике: 1
    • Репутация: 332
    • Webmoney BL: ?
    Exitos,
    Покажите сайт в личку где оно установлено
    • 0

Тэги топика:

« DLE + Opencart = ? | Странная индексация страниц магазина на Опенкарте. Нужна помощь. »

Похожие темы

Темы Раздел Ответов Последний пост
Навигация
 DLE 7 23.03.2014 23:55
[Конкурсная статья] Оптимизация сайта с использованием Яндекс.Метрики
 Оптимизация, SEO 11 10.03.2014 10:41
20 сайтов с использованием инфографики
 Дайджест блогосферы 5 20.04.2012 18:11
Навигация VM 1,1,9
 Joomla 4 18.03.2012 02:16
(добавить баннер)

Баннеры



(добавить ссылку)

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Или перенести аккаунт с других форумов

Золотые темы форума

Все золотые темы

Популярные темы

Информеры