26

Re: Как создать выпадающее меню в дефолтной теме

попробуйте прописать свойства для класса current или active, в зависимости от того, какие классы используют активные ссылки вашего меню

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

27 (2016-05-18 13:30:37 отредактировано scooternsk)

Re: Как создать выпадающее меню в дефолтной теме

olsv64 пишет:

попробуйте прописать свойства для класса current или active, в зависимости от того, какие классы используют активные ссылки вашего меню

Я нашел в блоке /Navigation/ три параметра с #fff пробовал менять все по очереди на #000 ни один из них не меняет на черный цвет то что нужно.
Вот блок navigation из моего css, подскажите где ковырять ?

/* --- navigation -------------------------*/

nav {
    background-color : White;
}
nav .col-12 {
    margin-bottom : 0px;
}
#navigation {
    background: #303030;
    display: block;
    width: 100%;
    float: left;
    max-height: 120px;
    position : relative;
    border-radius: 3px;
}
#navigation ul, #navigation li {
    list-style:none;
    padding:0;
    margin:0;
    /* display:inline; */
}
#navigation ul li{
    float:left;
    position:relative;
    padding-left : 0px;
    background: url(../images/navigation-border.png) no-repeat right 50%;
}
#navigation ul li a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    padding: 15px 10px;
}
#navigation ul li a:before {
    content:' '!important;
}
#navigation ul li a:hover {
    background-color: #72b626;
    color: #fff;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    border-radius: 3px;
}
#navigation .current a {
    background-color: #72b626 !important;
    color: #fff !important;
    border-radius: 3px;

И вот блок который для выпадающего меню:

/* --- dropdown ---- */

nav ul li{
position:relative;
}
nav ul li.currentpath > a {
    color:#000;
    background:#7096B6;
    background:rgba(255,255,255,.2);
    text-decoration:none;
    border-radius:3px;
    -moz-border-radius:40px;
    -khtml-border-radius:40px;
    -webkit-border-radius:40px;
}
nav ul li ul {
position:absolute;
background: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 3px;
z-index: 9999;
min-width: 150px;
display:none;
padding: 5px 10px 5px 0;
border: 1px solid #DCDCDC;
}
nav ul li ul li ul{
    left: 99%;
    top: -5px;
}
nav ul li ul li{
float:none; 
}
nav ul li ul li+li{
    border-top : 1px dashed #4878A1;
}
nav ul li ul li a:link,
nav ul li ul li a:visited{
    background-color: transparent;
    color: Black;
    text-shadow: 0px 0px 0px rgba(0,0,0, .3);
    padding-top: 5px;
    padding-bottom: 5px;
}
nav ul li:hover ul {
display:block;
}
nav ul li:hover ul li ul{
display: none;
}
nav ul li ul li:hover ul{
display: block;
}
nav ul li ul li:hover ul li ul{
display: none;
}
nav ul li ul li ul li:hover ul{
display: block;
}
nav ul li ul li.current > a {
color:#4878A1;
font-weight:800;
background-color : transparent!important;
}

Поделиться

28

Re: Как создать выпадающее меню в дефолтной теме

nav ul li ul li.current > a { 
color:#4878A1; 
font-weight:800;
background-color : здесь цвет используйте !important;
}
Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

29

Re: Как создать выпадающее меню в дефолтной теме

olsv64 пишет:
nav ul li ul li.current > a { 
color:#4878A1; 
font-weight:800;
background-color : здесь цвет используйте !important;
}

Использовал цвет, но к сожалению ничего не изменилось. Специально использовал ярко-красный, но ни где он не проявился.

Если не трудно посмотрите как работает меню http://z91391kb.bget.ru/  - может я как то неверно описал суть проблемы )

Поделиться

30

Re: Как создать выпадающее меню в дефолтной теме

в вашем меню работают классы currentpath и current - они выделяются зеленым
я бы рекомендовал использовать такой код

#navigation li.current > a {

}

и

#navigation li.currentpath > a {

}

вместо

#navigation .current a {

}
и для ссылок в выпадающем меню display:block; пропишите, а то у них ширина разная

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

31

Re: Как создать выпадающее меню в дефолтной теме

olsv64 пишет:

в вашем меню работают классы currentpath и current - они выделяются зеленым
я бы рекомендовал использовать такой код

#navigation li.current > a {

}

и

#navigation li.currentpath > a {

}

вместо

#navigation .current a {

}
и для ссылок в выпадающем меню display:block; пропишите, а то у них ширина разная


Спасибо огромное ))) С раскраской сработало ... а вот куда поставить display:block - так и не сообразил )))

Поделиться

32

Re: Как создать выпадающее меню в дефолтной теме

#navigation ul#nav ul li a {
    display:block;
}
Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

33 (2016-05-19 08:33:21 отредактировано scooternsk)

Re: Как создать выпадающее меню в дефолтной теме

olsv64 пишет:
#navigation ul#nav ul li a {
    display:block;
}

Олег, прошу прощения за мою глупость, но я не нашел таких тегов в своем CSS (

/* --- navigation -------------------------*/

nav {
    background-color : white;
}
nav .col-12 {
    margin-bottom : 0px;
}
#navigation {
    background: #303030;
    display: block;
    width: 100%;
    float: left;
    max-height: 120px;
    position : relative;
    border-radius: 3px;
}
#navigation ul, #navigation li {
    list-style:none;
    background: #5f5c4a;
    padding:0;
    margin:0;
    /* display:block; */
}
#navigation ul li{
    float:left;
    position:relative;
    padding-left : 0px;
    background: url(../images/navigation-border.png) no-repeat right 50%;
}
#navigation ul li a { 
    display: inline-block;
    color: #fff;
    text-decoration: none;
    padding: 15px 10px;
}
#navigation ul li a:before {
    content:' '!important;
}
#navigation ul li a:hover {
    background-color: #72b626;
    color: #fff;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    border-radius: 3px;
    
}

#navigation li.current > a {
    background-color: #72b626 !important;
    color: #fff !important;
    border-radius: 3px;
}

#navigation li.currentpath > a {
    background-color: #72b626 !important;
    color: #fff !important;
    border-radius: 3px;
}

Вот есть задокументированный display:block - но если его включить, то все меню сразу раскрываются и так и висят (

Поделиться

34

Re: Как создать выпадающее меню в дефолтной теме

а вы попробуйте добавить эти свойства, в html они у вас есть smile не понравится, так уберете

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

35

Re: Как создать выпадающее меню в дефолтной теме

olsv64 пишет:

а вы попробуйте добавить эти свойства, в html они у вас есть smile не понравится, так уберете

Поставил в CSS в раздел NAvigation - ничего не поменялось (

Поделиться

36

Re: Как создать выпадающее меню в дефолтной теме

так попробуйте

#navigation ul#nav ul li a {
    display:block !important;
}
Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

37

Re: Как создать выпадающее меню в дефолтной теме

olsv64 пишет:

так попробуйте

#navigation ul#nav ul li a {
    display:block !important;
}

Так ))) Ну вот в таком варианте сработало, в одной из менюшек встали в столбик пункты, хотя раньше хаотично разбросаны были, однако зеленая подсветка по прежнему по ширине надписи, а не по ширине выпадающего меню )
Это возможно как то изменить ?

P.S. Заранее спасибо за помощь )

Поделиться

38

Re: Как создать выпадающее меню в дефолтной теме

еще добавьте такой код

#navigation ul#nav ul li {
    float:none;
}
Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

39

Re: Как создать выпадающее меню в дефолтной теме

olsv64 пишет:

еще добавьте такой код

#navigation ul#nav ul li {
    float:none;
}

Спасибо ВАМ огромное !!! Все получилось !!!

Поделиться

40

Re: Как создать выпадающее меню в дефолтной теме

Здравствуйте Олег,
Сделал по приведенному Вами примеру многоуровневое меню. Все хорошо, но есть одна "заковыка": в выпадающем списке "дочек" ширина кнопки самой нижней получается чуть шире остальных (вправо), причем независимо от длины пункта меню...
Может быть подскажете, какова причина и как ее устранить?

Поделиться

41

Re: Как создать выпадающее меню в дефолтной теме

причину ищите в CSS

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

42

Re: Как создать выпадающее меню в дефолтной теме

olsv64 пишет:

причину ищите в CSS

Мдя-а-а...
Вот уж пришлось "потанцевать с бубном" методом проб и ошибок, ведь в используемой мной теме также уже были параметры, влияющие на меню!
Зато, в конце-концов, получилось!
Мало того, я даже досконально разобрался: какой параметр на что влияет, и ненужное удалил.
Спасибо, Олег, за то, что не сюсюкались со мной, а "бросили в воду, сказав:"Плыви"!!!

Поделиться

43

Re: Как создать выпадающее меню в дефолтной теме

то есть направление, куда плыть, я указал верно smile

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться