Перейти к содержимому


Как Расширить Боковое Меню-Аккордеон В Шаблоне Осень?

Автор sofgtteam86, 22 февр. 2014 20:47

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 11

#1 sofgtteam86

sofgtteam86

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 85 сообщений

Отправлено 22 Февраль 2014 - 20:47

Здравствуйте, подскажите пожалуйста как расширить боковое меню?

какое значение изменить чтобы увеличить ширину?

#2 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 22 Февраль 2014 - 21:16

Просмотр сообщенияsofgtteam86 (22 Февраль 2014 - 20:47) писал:

Здравствуйте, подскажите пожалуйста как расширить боковое меню?

какое значение изменить чтобы увеличить ширину?
Здравствуйте, в style.css найдите строчку
.block2 {margin-bottom: 20px;background: #fff;border-left: 1px solid #efefef;border-right: 1px solid #efefef;float:left;position: relative;width: 210px;}
вместо 210px поставьте нужное значение ширины

#3 sofgtteam86

sofgtteam86

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 85 сообщений

Отправлено 24 Февраль 2014 - 17:43

Спасибо, сделал))

Теперь только надо блок с текстом подвинуть вправо или сделать уже.
Подскажите, где можно отредактировать размер?

заранее спасибо.Изображение

#4 Alexey11

Alexey11

    Активный участник

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 24 Февраль 2014 - 20:40

Просмотр сообщенияsofgtteam86 (24 Февраль 2014 - 17:43) писал:

Спасибо, сделал))

Теперь только надо блок с текстом подвинуть вправо или сделать уже.
Подскажите, где можно отредактировать размер?

заранее спасибо.Изображение

В шаблоне style.css найдите данный блок кода:

.two-third{width:930px;float:right}

измените значение параметра width на меньшее

#5 sofgtteam86

sofgtteam86

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 85 сообщений

Отправлено 19 Октябрь 2014 - 15:20

Здравствуйте.

Сижу и слюнками истекаю смотря на крупные проекты......

Хочется сделать меню аккордеон красивое, так сказать чёткое...... как здесь
образец крутой акордеон.png

Пытался сделать на подобии, все накрылось медным тазом......
на моем сайте хочется чтобы выглядело примерно так:
Как хочется.png

Буду очень признателен, мастерам, которые помогут мне это воплотить в реальность.... :)

Просмотр сообщенияsofgtteam86 (19 Октябрь 2014 - 15:19) писал:

Здравствуйте.

Сижу и слюнками истекаю смотря на крупные проекты......

Хочется сделать меню аккордеон красивое, так сказать чёткое...... как здесь
Прикрепленный файл образец крутой акордеон.png

Пытался сделать на подобии, все накрылось медным тазом......
на моем сайте хочется чтобы выглядело примерно так:
Прикрепленный файл Как хочется.png

Буду очень признателен, мастерам, которые помогут мне это воплотить в реальность.... :)
Аккаунт SL-217350

#6 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 19 Октябрь 2014 - 16:33

Просмотр сообщенияsofgtteam86 (19 Октябрь 2014 - 15:20) писал:

Здравствуйте.

Сижу и слюнками истекаю смотря на крупные проекты......

Хочется сделать меню аккордеон красивое, так сказать чёткое...... как здесь
Прикрепленный файл образец крутой акордеон.png

Пытался сделать на подобии, все накрылось медным тазом......
на моем сайте хочется чтобы выглядело примерно так:
Прикрепленный файл Как хочется.png

Буду очень признателен, мастерам, которые помогут мне это воплотить в реальность.... :)


Аккаунт SL-217350
Здравствуйте.
К сожалению Ваш способ отображения реализовать нельзя.
Раскрытыми можно отображать только все категории. С подобной реализацией отображения Вы можете ознакомится в этой теме http://forum.storela...ыпадающее-меню/

#7 sofgtteam86

sofgtteam86

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 85 сообщений

Отправлено 20 Октябрь 2014 - 22:45

Здравствуйте.
Сделал, но есть моменты которые мне не под силу, не могу привязать фото категории в выпадающее меню.....Безымянный.png

Аккаунт SL-311331

Заранее спасибо

#8 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Октябрь 2014 - 00:11

В шаблоне HTML после:
<div class="dropdown_4columns nav-sub">
вставьте:
<img style="position:absolute;right:0;bottom:0;" src="ссылка на картинку" alt="" />

#9 sofgtteam86

sofgtteam86

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 85 сообщений

Отправлено 21 Октябрь 2014 - 08:17

Просмотр сообщенияVaccina (21 Октябрь 2014 - 00:11) писал:

В шаблоне HTML после:
<div class="dropdown_4columns nav-sub">
вставьте:
<img style="position:absolute;right:0;bottom:0;" src="ссылка на картинку" alt="" />

Я сделал, но там появился пустой блок.
При наведении курсором мышки на категорию картинка  все равно отображается вне блока меню, как и раньше.
может, нужно что то прописать в style.css?
Для отображения картинки, я вставлял скрипт:

/*Всплывающий скриншот*/
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{ /*CSS for enlarged image*/  
position: absolute;  
background-color: #E3B053;
padding: 0px;  
left: -1000px;  
border: 0px solid white;  
visibility: hidden;  
color: Yellow;  
text-decoration: none;  
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}  
.thumbnail span img{ /*CSS for enlarged image*/  
border-width: 0;  
padding: 0px;  
}  
.thumbnail:hover span { /*CSS for enlarged image on hover*/  
visibility: visible;  
position: fixed; /* Абсолютное позиционирование */
    left: 855px; /* Положение от левого края */
    top: 650px; /* Положение от верхнего края */
    width: 200px; /* Ширина блока */
    background: #FFFFFF; /* Цвет фона */
    border: 2px solid #E3B053; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */

}  


Может  скрипт переделать?

#10 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 21 Октябрь 2014 - 08:41

Просмотр сообщенияsofgtteam86 (21 Октябрь 2014 - 08:17) писал:

Я сделал, но там появился пустой блок.
При наведении курсором мышки на категорию картинка  все равно отображается вне блока меню, как и раньше.
может, нужно что то прописать в style.css?
Для отображения картинки, я вставлял скрипт:

/*Всплывающий скриншот*/
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{ /*CSS for enlarged image*/  
position: absolute;  
background-color: #E3B053;
padding: 0px;  
left: -1000px;  
border: 0px solid white;  
visibility: hidden;  
color: Yellow;  
text-decoration: none;  
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}  
.thumbnail span img{ /*CSS for enlarged image*/  
border-width: 0;  
padding: 0px;  
}  
.thumbnail:hover span { /*CSS for enlarged image on hover*/  
visibility: visible;  
position: fixed; /* Абсолютное позиционирование */
left: 855px; /* Положение от левого края */
top: 650px; /* Положение от верхнего края */
width: 200px; /* Ширина блока */
background: #FFFFFF; /* Цвет фона */
border: 2px solid #E3B053; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */

}  


Может  скрипт переделать?
Здравствуйте, найдите в style.css

.thumbnail:hover span { /*CSS for enlarged image on hover*/  
visibility: visible;  
position: fixed; /* Абсолютное позиционирование */
	left: 855px; /* Положение от левого края */
	top: 650px; /* Положение от верхнего края */
	width: 200px; /* Ширина блока */
	background: #FFFFFF; /* Цвет фона */
	border: 2px solid #E3B053; /* Параметры рамки */
	padding: 5px; /* Поля вокруг текста */
   
}
замените на

.thumbnail:hover span { /*CSS for enlarged image on hover*/  
visibility: visible;  
position: fixed; /* Абсолютное позиционирование */
	left: 1352px; /* Положение от левого края */
	top: 700px; /* Положение от верхнего края */
	width: 200px; /* Ширина блока */
	background: #FFFFFF; /* Цвет фона */
	border: 2px solid #E3B053; /* Параметры рамки */
	padding: 5px; /* Поля вокруг текста */
   
}

#11 sofgtteam86

sofgtteam86

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 85 сообщений

Отправлено 21 Октябрь 2014 - 09:11

Просмотр сообщенияИрина345 (21 Октябрь 2014 - 08:41) писал:

Здравствуйте, найдите в style.css

.thumbnail:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
position: fixed; /* Абсолютное позиционирование */
left: 855px; /* Положение от левого края */
top: 650px; /* Положение от верхнего края */
width: 200px; /* Ширина блока */
background: #FFFFFF; /* Цвет фона */
border: 2px solid #E3B053; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */

}
замените на

.thumbnail:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
position: fixed; /* Абсолютное позиционирование */
left: 1352px; /* Положение от левого края */
top: 700px; /* Положение от верхнего края */
width: 200px; /* Ширина блока */
background: #FFFFFF; /* Цвет фона */
border: 2px solid #E3B053; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */

}

Я попробовал, но это не помогло.
Дело в том, что написанный скрипт в style.css надо ориентировать на тот встроенный блок в меню, а сейчас блок при прокрутке или смене разрешения экрана гуляет, он не закреплен в одном месте.

Просмотр сообщенияsofgtteam86 (21 Октябрь 2014 - 09:09) писал:

Я попробовал, но это не помогло.
Дело в том, что написанный скрипт в style.css надо ориентировать на тот встроенный блок в меню, а сейчас блок при прокрутке или смене разрешения экрана гуляет, он не закреплен в одном месте.
Фото находится в верхнем слое сайта, а надо чтобы оно было именно в меню.

#12 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 23 Октябрь 2014 - 01:53

попробуйте откатить изменения, так как где-то нарушен синтаксис, на странице каталога, стили отсутствуют
Обратно в Изменение общей стилистики


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Осень
  5. → Изменение общей стилистики
  6. Privacy Policy