Страница 1 из 1

Активная страница подсвечивающие меню в concrete 5

СообщениеДобавлено: 10 фев 2013, 12:30
wweebb
Всем привет, я в этом деле новичок, вот мучаюсь с активным подсвечивающим меню.

Подскажите пожалуйста как необходимо написать в css чтобы активная страница, на которой я нахожусь подсвечивалась?
При просмотре кода страницы в браузере, в данном моменте открыта главная страница:
Код: Выделить всё
<ul class="menu">
            
                  <ul class="nav"><li class="nav-selected nav-path-selected"><a href="/" target="_self" class="nav-selected nav-path-selected">Главная</a></li><li class=""><a href="/contacts/" target="_self" class="">Контакты</a></li></ul>               
                                    
                                                                                       
            <li class="expand"></li>
         </ul>            



Меню на сайте вывожу через вот этот код (подсмотрел в скаченном шаблоне) как можно вывести меню по другому не знаю:
Код: Выделить всё
                  <?php    $bt=BlockType::getByHandle('autonav'); $bt->controller->displayPages = 'top';
                  $bt->controller->orderBy = 'display_asc';                   
                  $bt->controller->displaySubPages = 'one';
                  $bt->controller->displaySubPageLevels = 'custom';
                  $bt->controller->displaySubPageLevelsNum = '3';   
                  $bt->render('templates/header_menu_dropdown');
               ?>               
            


CSS меню:
Код: Выделить всё
ul.menu {
   margin: 0;
   padding: 0;
   display: inline-block;
   background-color: #FFFF00;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFA500), to(#FFFF00));
    background-image: -webkit-linear-gradient(#FFA500, #FFFF00);
    background-image: -moz-linear-gradient(top, #FFA500, #FFFF00);
    background-image: -ms-linear-gradient(#FFA500, #FFFF00);
    background-image: -o-linear-gradient(#FFA500, #FFFF00);
    background-image: linear-gradient(#FFA500, #FFFF00);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA500', endColorstr='#FFFF00', GradientType=0);
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   width: 690px;
}

ul.menu li {
   float: left;
   list-style: none;
   border-right: 1px solid #FFA500;
   position: relative;
}

ul.menu li a {
   color: white;
   display: block;
   font-family: Arial;
   font-size: 13px;
   padding: 8px 40px 10px;
   text-decoration: none;
   border-right: 1px solid #FFFF00;
}

ul.menu li a:hover {
   background-color: #FFFF00;
}

ul.menu li:first-child a:hover {
   border-radius: 4px 0 0 4px;
   -webkit-border-radius: 4px 0 0 4px;
   -moz-border-radius: 4px 0 0 4px;
}


СПАСИБО ЗА ПОМОЩЬ!

Re: Активная страница подсвечивающие меню в concrete 5

СообщениеДобавлено: 10 фев 2013, 20:40
cmsservice
класс .nav-selected маркирует активный пункт меню
класс .nav-path-selected маркирует родительский пункт активного пункта меню, если в меню несколько уровней

Меню на сайте вывожу через вот этот код (подсмотрел в скаченном шаблоне) как можно вывести меню по другому не знаю

А сделать обычную глобальную позицию (GlobalArea) в шаблоне и в нее ручками вставить модуль не судьба? :)

Re: Активная страница подсвечивающие меню в concrete 5

СообщениеДобавлено: 10 фев 2013, 20:44
wweebb
Меню на сайте вывожу через вот этот код (подсмотрел в скаченном шаблоне) как можно вывести меню по другому не знаю
А сделать обычную глобальную позицию (GlobalArea) в шаблоне и в нее ручками вставить модуль не судьба? :)



Точно, не догадался, Спасибки :)

Re: Активная страница подсвечивающие меню в concrete 5

СообщениеДобавлено: 10 фев 2013, 20:49
wweebb
cmsservice писал(а):класс .nav-selected маркирует активный пункт меню
класс .nav-path-selected маркирует родительский пункт активного пункта меню, если в меню несколько уровней


Меню одно уровня.
То есть вот так:
Код: Выделить всё
ul.menu li {
   float: left;
   list-style: none;
   border-right: 1px solid #FFA500;
   position: relative;
}

ul.menu li a {
   color: white;
   display: block;
   font-family: Arial;
   font-size: 13px;
   padding: 8px 40px 10px;
   text-decoration: none;
   border-right: 1px solid #FFFF00;
}

ul.menu li a:nav-selected {
   background-color: #FFFF00;
}

ul.menu li:nav-selected a:hover {
   border-radius: 4px 0 0 4px;
   -webkit-border-radius: 4px 0 0 4px;
   -moz-border-radius: 4px 0 0 4px;
}

Re: Активная страница подсвечивающие меню в concrete 5

СообщениеДобавлено: 10 фев 2013, 21:13
cmsservice
nav-selected это класс, а не селектор, соответственно пишется через точку. через двоеточие пишутся только селекторы.

Подучите матчасть прежде чем делать, а то много времени впустую потратите.

Re: Активная страница подсвечивающие меню в concrete 5

СообщениеДобавлено: 10 фев 2013, 22:23
Count_Raven
Короче говоря:

Код: Выделить всё
ul.menu li.nav-selected, ul.menu li.nav-path-selected {
background: red;
}

Можно через "a" вместо "li"
Код: Выделить всё
ul.menu li a.nav-selected, ul.menu li a.nav-path-selected {
background: green;
}


Этот CSS выделит цветом пункт меню для текущей страницы. Также nav-path-selected, присутствующий тут, выделит пункт меню даже в том случае, если вы не именно на этой странице, но на какой-то из дочерних страниц для нее.

Re: Активная страница подсвечивающие меню в concrete 5

СообщениеДобавлено: 29 дек 2014, 16:46
Akashjohni
Это очень приятно и прохладно почтовые Спасибо за размещение его .... !!!

Re: Активная страница подсвечивающие меню в concrete 5

СообщениеДобавлено: 29 дек 2014, 17:09
guyasyou
Akashjohni писал(а):Это очень приятно и прохладно почтовые Спасибо за размещение его .... !!!

Эээ... Что!?

Re: Активная страница подсвечивающие меню в concrete 5

СообщениеДобавлено: 29 дек 2014, 21:56
wweebb
Akashjohni писал(а):Это очень приятно и прохладно почтовые Спасибо за размещение его .... !!!

О чем ты?