Re: Как создать выпадающее меню в дефолтной теме
попробуйте прописать свойства для класса current или active, в зависимости от того, какие классы используют активные ссылки вашего меню
Форум для разработчиков сайтов на GetSimple CMS
Регистрация прекращена. Пожалуйста, зарегистрируйтесь на новом форуме.
GetSimple CMS по-русски → PHP, HTML, CSS, jQuery → Как создать выпадающее меню в дефолтной теме
Чтобы отправить ответ, вы должны войти или зарегистрироваться
попробуйте прописать свойства для класса current или active, в зависимости от того, какие классы используют активные ссылки вашего меню
попробуйте прописать свойства для класса 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;
}
nav ul li ul li.current > a {
color:#4878A1;
font-weight:800;
background-color : здесь цвет используйте !important;
}
nav ul li ul li.current > a { color:#4878A1; font-weight:800; background-color : здесь цвет используйте !important; }
Использовал цвет, но к сожалению ничего не изменилось. Специально использовал ярко-красный, но ни где он не проявился.
Если не трудно посмотрите как работает меню http://z91391kb.bget.ru/ - может я как то неверно описал суть проблемы )
в вашем меню работают классы currentpath и current - они выделяются зеленым
я бы рекомендовал использовать такой код
#navigation li.current > a {
}
и
#navigation li.currentpath > a {
}
вместо
#navigation .current a {
}
и для ссылок в выпадающем меню display:block; пропишите, а то у них ширина разная
в вашем меню работают классы currentpath и current - они выделяются зеленым
я бы рекомендовал использовать такой код#navigation li.current > a {
}
и
#navigation li.currentpath > a {
}
вместо
#navigation .current a {
}
и для ссылок в выпадающем меню display:block; пропишите, а то у них ширина разная
Спасибо огромное ))) С раскраской сработало ... а вот куда поставить display:block - так и не сообразил )))
#navigation ul#nav ul li a {
display:block;
}
#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 - но если его включить, то все меню сразу раскрываются и так и висят (
а вы попробуйте добавить эти свойства, в html они у вас есть не понравится, так уберете
а вы попробуйте добавить эти свойства, в html они у вас есть не понравится, так уберете
Поставил в CSS в раздел NAvigation - ничего не поменялось (
так попробуйте
#navigation ul#nav ul li a {
display:block !important;
}
так попробуйте
#navigation ul#nav ul li a { display:block !important; }
Так ))) Ну вот в таком варианте сработало, в одной из менюшек встали в столбик пункты, хотя раньше хаотично разбросаны были, однако зеленая подсветка по прежнему по ширине надписи, а не по ширине выпадающего меню )
Это возможно как то изменить ?
P.S. Заранее спасибо за помощь )
еще добавьте такой код
#navigation ul#nav ul li {
float:none;
}
еще добавьте такой код
#navigation ul#nav ul li { float:none; }
Спасибо ВАМ огромное !!! Все получилось !!!
Здравствуйте Олег,
Сделал по приведенному Вами примеру многоуровневое меню. Все хорошо, но есть одна "заковыка": в выпадающем списке "дочек" ширина кнопки самой нижней получается чуть шире остальных (вправо), причем независимо от длины пункта меню...
Может быть подскажете, какова причина и как ее устранить?
причину ищите в CSS
причину ищите в CSS
Мдя-а-а...
Вот уж пришлось "потанцевать с бубном" методом проб и ошибок, ведь в используемой мной теме также уже были параметры, влияющие на меню!
Зато, в конце-концов, получилось!
Мало того, я даже досконально разобрался: какой параметр на что влияет, и ненужное удалил.
Спасибо, Олег, за то, что не сюсюкались со мной, а "бросили в воду, сказав:"Плыви"!!!
то есть направление, куда плыть, я указал верно
Чтобы отправить ответ, вы должны войти или зарегистрироваться
GetSimple CMS по-русски → PHP, HTML, CSS, jQuery → Как создать выпадающее меню в дефолтной теме
Форум работает на PunBB, при поддержке Informer Technologies, Inc