Настроить вертикальное меню.

Решено

(@drugman2)

Настроить vmenu, что бы ширина выпадающего меню подстраивалась под ширину строки

.art-vmenublock
{
   background: #1B232D;
   -webkit-border-radius:8px;
   -moz-border-radius:8px;
   border-radius:8px;
   border:1px solid #D74B04;
   padding:5px;
   margin:7px;
}
div.art-vmenublock img
{
   margin: 0;
}

.art-vmenublockcontent
{
   margin:0 auto;
}

ul.art-vmenu, ul.art-vmenu ul
{
   list-style: none;
   display: block;
}

ul.art-vmenu, ul.art-vmenu li
{
   display: block;
   margin: 0;
   padding: 0;
   width: auto;
   line-height: 0;
}

ul.art-vmenu
{
   margin-top: 0;
   margin-bottom: 0;
   position: relative;
}

ul.art-vmenu>li>a
{
   -webkit-border-radius:6px;
   -moz-border-radius:6px;
   border-radius:6px;
   border:1px solid transparent;
   margin:0 auto;
   color: #FFFFFF;
   min-height: 30px;
   line-height: 30px;
}
ul.art-vmenu a
{
   display: block;
   cursor: pointer;
   z-index: 1;
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   font-variant: normal;
   text-align: left;
   position:relative;
}

ul.art-vmenu ul, ul.art-vmenu li{
   position:relative;
}

ul.art-vmenu>li
{
   margin-top: 2px;
}
ul.art-vmenu>li:first-child
{
   margin-top:0;
}

ul.art-vmenu>li>a:hover, ul.art-vmenu>li>a.active:hover
{
   border:1px solid #D74B04;
   margin:0 auto;
}
ul.art-vmenu>li>a:hover, ul.art-vmenu>li>a.active:hover
{
   text-decoration: none;
}

ul.art-vmenu a:hover, ul.art-vmenu a.active:hover
{
   color: #FA681E;
}

ul.art-vmenu>li>a.active:hover>span.border-top, ul.art-vmenu>li>a.active:hover>span.border-bottom
{
   background-color: transparent;
}

ul.art-vmenu>li:hover>a
{
   color: #FA681E;
}

ul.art-vmenu>li>a.active
{
   margin:0 auto;
   text-decoration: none;
   color: #FFFFFF;
}

ul.art-vmenu ul:before
{
   background: #1B232D;
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   -webkit-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.4);
   -moz-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.4);
   box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.4);
   border:1px solid #D74B04;
   margin:0 auto;
   display: block;
   position: absolute;
   content: ' ';
   z-index: -1;
   top: 30px;
   right: 30px;
   bottom: 30px;
   left: 12px;
}
ul.art-vmenu ul
{
   padding: 43px 43px 43px 25px;
   margin: -43px 0 0 2px;
   visibility: hidden;
   position: absolute;
   z-index: 10;
   background: none;
   min-height: 0;
   background-image: url('images/spacer.gif');
   /* left to right by default */
  left: 0;
   top:0;
}
ul.art-vmenu>li>ul
{
   padding-left: 24px;
   margin-left: -10px;
   padding-top: 43px;
   margin-top: -30px;
   top: 2px;
}
ul.art-vmenu ul.art-vmenu-left-to-right
{
   right: auto;
   left: 0;
   padding: 43px 43px 43px 25px;
   margin: -43px 0 0 2px;
}
ul.art-vmenu>li>ul.art-vmenu-left-to-right
{
   padding-left: 24px;
   margin-left: -10px;
   padding-top: 43px;
   margin-top: -30px;
   width: 250px;
}
ul.art-vmenu ul.art-vmenu-right-to-left
{
   left: auto;
   right: 0;
   padding: 43px 25px 43px 43px;
   margin: -43px 2px 0 0;
}
ul.art-vmenu>li>ul.art-vmenu-right-to-left
{
   padding-right: 24px;
   margin-right: -10px;
   padding-top: 43px;
   margin-top: -30px;
}

ul.art-vmenu>li>ul:before
{
   top: 30px;
   right: 30px;
   bottom: 30px;
   left: 11px;
}
ul.art-vmenu ul ul.art-vmenu-left-to-right:before {
   right: 30px;
   left: 12px;
}
ul.art-vmenu ul ul.art-vmenu-right-to-left:before {
   right: 12px;
   left: 30px;
}
ul.art-vmenu>li>ul.art-vmenu-left-to-right:before {
   right: 30px;
   left: 11px;
}
ul.art-vmenu>li>ul.art-vmenu-right-to-left:before {
   right: 11px;
   left: 30px;
}

ul.art-vmenu li li a
{
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   margin:0 auto;
}

ul.art-vmenu ul a
{
   display: block;
   position: relative;
   min-height: 22px;
   overflow: visible;
   padding: 0;
   padding-left: 0;
   min-width: 7em;
   z-index: 0;
   line-height: 22px;
   color: #FFFFFF;
   font-size: 12px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   font-variant: normal;
   text-align: left;
   text-indent: 0;
   word-spacing: 0;
   margin-left: 0;
   margin-right: 0;
   padding-right: 0;
}

ul.art-vmenu ul a:visited, ul.art-vmenu ul a.active:hover, ul.art-vmenu ul a:hover, ul.art-vmenu ul a.active
{
   line-height: 22px;
   color: #FFFFFF;
   font-size: 12px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   font-variant: normal;
   text-align: left;
   text-indent: 0;
   word-spacing: 0;
   margin-left: 0;
   margin-right: 0;
}

ul.art-vmenu li li
{
   position: relative;
   margin-top: 3px;
}

ul.art-vmenu li li:first-child
{
   margin-top: 0;
}

ul.art-vmenu li  {
   position: relative;
}

ul.art-vmenu:after, ul.art-vmenu ul:after
{
   content: ".";
   height: 0;
   display: block;
   visibility: hidden;
   overflow: hidden;
   clear: both;
}

ul.art-vmenu li:hover
{
   z-index: 10000;
   white-space: normal;
}
ul.art-vmenu li:hover>ul
{
   visibility: visible;
   /* left to right by default */
  left: 100%;
}

ul.art-vmenu li:hover>ul.art-vmenu-left-to-right
{
   right: auto;
   left: 100%;
}
ul.art-vmenu li:hover>ul.art-vmenu-right-to-left
{
   left: auto;
   right: 100%;
}

ul.art-vmenu ul>li>a:hover, ul.art-vmenu ul>li>a.active:hover, ul.art-vmenu ul>li:hover>a
{
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   margin:0 auto;
}
ul.art-vmenu ul li a:hover, ul.art-vmenu ul li a.active:hover
{
   text-decoration: none;
   color: #FA681E;
}

ul.art-vmenu ul a:hover:after
{
   background-position: center ;
}
ul.art-vmenu ul a.active:hover:after
{
   background-position: center ;
}
ul.art-vmenu ul a.active:after
{
   background-position: bottom ;
}

ul.art-vmenu ul li:hover>a
{
   color: #FA681E;
}

ul.art-vmenu ul>li>a.active
{
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   margin:0 auto;
}
ul.art-vmenu ul a.active, ul.art-vmenu ul a:hover, ul.art-vmenu ul a.active:hover
{
   text-decoration: none;
   color: #FFFFFF;
}

ul.art-vmenu li li:after
{
   display: block;
   position: absolute;
   content: ' ';
   height: 1px;
   top: -3px;
   left: 0;
   right: 0;
   z-index: 1;
   border-bottom: 1px solid #872F03;
}

ul.art-vmenu li li:before
{
   display: block;
   position: absolute;
   content: ' ';
   left: 0;
   right: 0;
   top: -3px;
   z-index: 0;
   height: 3px;
}
ul.art-vmenu li li:first-child:before, ul.art-vmenu li li:first-child:after
{
   display: none;
}

Просмотр 12 ответов — с 1 по 12 (всего 12)

Автор Drugman2
(@drugman2)

12 лет, 11 месяцев назад

Надеюсь вопрос правильно сформулировал

skodnik
(@skodnik)

12 лет, 11 месяцев назад

Надеюсь вопрос правильно сформулировал

Скорее нет чем да.

В чем вопрос? Рулон стилей без разметки — чуть больше чем ничего, нужны детали, как узнать какой селектор за что отвечает?

Автор Drugman2
(@drugman2)

12 лет, 11 месяцев назад

Вот сайт.

Когда наводишь мышку на категорию, выпадает меню, его выставили по ширине так, что бы длинные строки выводились в одну строку, но хотелось бы настроить так, что бы менюшка выпадала по ширине текста каждой из категорий, а не по ширине максимальной длинны строки. А как это сделать я не знаю.

skodnik
(@skodnik)

12 лет, 11 месяцев назад

что бы длинные строки выводились в одну строку,
Посмотрел, фиксированная ширина, длинные строки режутся на две.

Автор Drugman2
(@drugman2)

12 лет, 11 месяцев назад

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

skodnik
(@skodnik)

12 лет, 11 месяцев назад

потому что ширина выставлена 250px

Убрать, или заменить. Мне это кажется очевидным.

Автор Drugman2
(@drugman2)

12 лет, 11 месяцев назад

Если я уберу 250, строка начнет складываться в столбик. Вопрос в том, что бы ширина менюшки была по ширине строки и длинные строки при этом не складывала в столбик. У меня в выпадающих меню строки разной ширины, хотелось бы что бы там, где категория из одного слова, ширина меню подстраивалась по ширине этого слова. А там где несколько слова что бы они тоже выводились в одну строку.
Artem Frolov
(@dikiy_forester)

12 лет, 11 месяцев назад
Привет!

Собственно теперь нужно убрать определение ширины, которое было добавлено. Верните код в исходное состояние.

Попробуйте следующее:

Дополните этот код:
```
ul.art-vmenu li li a
{
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   margin:0 auto;
}
```
так:
```
ul.art-vmenu li li a
{
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   margin:0 auto;
   white-space: nowrap;
}
```
Artem Frolov
(@dikiy_forester)

12 лет, 11 месяцев назад

Кстати, могу посоветовать ресурс, который поможет вам разобраться в CSS и HTML. Добавьте этот правильный сайт себе в избранное http://htmlbook.ru/

Автор Drugman2
(@drugman2)

12 лет, 11 месяцев назад

Спасибо. Все работает. Отдельное спасибо за ссылку, то что нужно.

Artem Frolov
(@dikiy_forester)

12 лет, 11 месяцев назад

Удачи вам! 😉

Автор Drugman2
(@drugman2)

12 лет, 11 месяцев назад

Всем спасибо.

Просмотр 12 ответов — с 1 по 12 (всего 12)

Тема «Настроить вертикальное меню.» закрыта для новых ответов.

Настроить вертикальное меню.

Метки

Темы

Самые популярные темы

Темы без ответов

Без вопроса

Решённые

Нерешённые

Все темы