Как Расширить Боковое Меню-Аккордеон В Шаблоне Осень?
#1
Отправлено 22 Февраль 2014 - 20:47
какое значение изменить чтобы увеличить ширину?
#2
Отправлено 22 Февраль 2014 - 21:16
sofgtteam86 (22 Февраль 2014 - 20:47) писал:
какое значение изменить чтобы увеличить ширину?
.block2 {margin-bottom: 20px;background: #fff;border-left: 1px solid #efefef;border-right: 1px solid #efefef;float:left;position: relative;width: 210px;}вместо 210px поставьте нужное значение ширины
#3
Отправлено 24 Февраль 2014 - 17:43
Теперь только надо блок с текстом подвинуть вправо или сделать уже.
Подскажите, где можно отредактировать размер?
заранее спасибо.
#4
Отправлено 24 Февраль 2014 - 20:40
sofgtteam86 (24 Февраль 2014 - 17:43) писал:
Теперь только надо блок с текстом подвинуть вправо или сделать уже.
Подскажите, где можно отредактировать размер?
заранее спасибо.
В шаблоне style.css найдите данный блок кода:
.two-third{width:930px;float:right}
измените значение параметра width на меньшее
#5
Отправлено 19 Октябрь 2014 - 15:20
Сижу и слюнками истекаю смотря на крупные проекты......
Хочется сделать меню аккордеон красивое, так сказать чёткое...... как здесь
Пытался сделать на подобии, все накрылось медным тазом......
на моем сайте хочется чтобы выглядело примерно так:
Буду очень признателен, мастерам, которые помогут мне это воплотить в реальность....
sofgtteam86 (19 Октябрь 2014 - 15:19) писал:
Сижу и слюнками истекаю смотря на крупные проекты......
Хочется сделать меню аккордеон красивое, так сказать чёткое...... как здесь
образец крутой акордеон.png
Пытался сделать на подобии, все накрылось медным тазом......
на моем сайте хочется чтобы выглядело примерно так:
Как хочется.png
Буду очень признателен, мастерам, которые помогут мне это воплотить в реальность....
#6
Отправлено 19 Октябрь 2014 - 16:33
sofgtteam86 (19 Октябрь 2014 - 15:20) писал:
Сижу и слюнками истекаю смотря на крупные проекты......
Хочется сделать меню аккордеон красивое, так сказать чёткое...... как здесь
образец крутой акордеон.png
Пытался сделать на подобии, все накрылось медным тазом......
на моем сайте хочется чтобы выглядело примерно так:
Как хочется.png
Буду очень признателен, мастерам, которые помогут мне это воплотить в реальность....
Аккаунт SL-217350
К сожалению Ваш способ отображения реализовать нельзя.
Раскрытыми можно отображать только все категории. С подобной реализацией отображения Вы можете ознакомится в этой теме http://forum.storela...ыпадающее-меню/
#8
Отправлено 21 Октябрь 2014 - 00:11
<div class="dropdown_4columns nav-sub">вставьте:
<img style="position:absolute;right:0;bottom:0;" src="ссылка на картинку" alt="" />
#9
Отправлено 21 Октябрь 2014 - 08:17
Vaccina (21 Октябрь 2014 - 00:11) писал:
<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
Отправлено 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; /* Поля вокруг текста */
}
Может скрипт переделать?
.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
Отправлено 21 Октябрь 2014 - 09:11
Ирина345 (21 Октябрь 2014 - 08:41) писал:
.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
Отправлено 23 Октябрь 2014 - 01:53
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных