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

Вопросы и проблемы, касающиеся верстки и дизайна

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

Сообщение wweebb » 10 фев 2013, 12:30 ,  »  Сообщение:#1

Всем привет, я в этом деле новичок, вот мучаюсь с активным подсвечивающим меню.

Подскажите пожалуйста как необходимо написать в 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;
}


СПАСИБО ЗА ПОМОЩЬ!
wweebb
 
Сообщения: 20
Зарегистрирован: 13 янв 2013, 16:36

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

Сообщение cmsservice » 10 фев 2013, 20:40 ,  »  Сообщение:#2

класс .nav-selected маркирует активный пункт меню
класс .nav-path-selected маркирует родительский пункт активного пункта меню, если в меню несколько уровней

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

А сделать обычную глобальную позицию (GlobalArea) в шаблоне и в нее ручками вставить модуль не судьба? :)
С уважением, Константин
http://Переделка-сайтов.РФ
Индивидуальные решения на платформе Concrete5 для театров и производственно-торговых компаний.
Аватара пользователя
cmsservice
 
Сообщения: 763
Зарегистрирован: 10 окт 2010, 00:10
Откуда: Москва

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

Сообщение wweebb » 10 фев 2013, 20:44 ,  »  Сообщение:#3

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



Точно, не догадался, Спасибки :)
wweebb
 
Сообщения: 20
Зарегистрирован: 13 янв 2013, 16:36

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

Сообщение wweebb » 10 фев 2013, 20:49 ,  »  Сообщение:#4

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;
}
wweebb
 
Сообщения: 20
Зарегистрирован: 13 янв 2013, 16:36

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

Сообщение cmsservice » 10 фев 2013, 21:13 ,  »  Сообщение:#5

nav-selected это класс, а не селектор, соответственно пишется через точку. через двоеточие пишутся только селекторы.

Подучите матчасть прежде чем делать, а то много времени впустую потратите.
С уважением, Константин
http://Переделка-сайтов.РФ
Индивидуальные решения на платформе Concrete5 для театров и производственно-торговых компаний.
Аватара пользователя
cmsservice
 
Сообщения: 763
Зарегистрирован: 10 окт 2010, 00:10
Откуда: Москва

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

Сообщение Count_Raven » 10 фев 2013, 22:23 ,  »  Сообщение:#6

Короче говоря:

Код: Выделить всё
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, присутствующий тут, выделит пункт меню даже в том случае, если вы не именно на этой странице, но на какой-то из дочерних страниц для нее.
Country Amiant - Regno All Rianto
Аватара пользователя
Count_Raven
Супермодератор
 
Сообщения: 1156
Зарегистрирован: 06 окт 2010, 15:00
Откуда: Country Amiant

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

Сообщение Akashjohni » 29 дек 2014, 16:46 ,  »  Сообщение:#7

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

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

Сообщение guyasyou » 29 дек 2014, 17:09 ,  »  Сообщение:#8

Akashjohni писал(а):Это очень приятно и прохладно почтовые Спасибо за размещение его .... !!!

Эээ... Что!?
www.pure-web.ru - fullstack разработка сайтов и веб-приложений
Аватара пользователя
guyasyou
Администратор
 
Сообщения: 559
Зарегистрирован: 05 янв 2012, 12:29
Откуда: Новосибирск

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

Сообщение wweebb » 29 дек 2014, 21:56 ,  »  Сообщение:#9

Akashjohni писал(а):Это очень приятно и прохладно почтовые Спасибо за размещение его .... !!!

О чем ты?
wweebb
 
Сообщения: 20
Зарегистрирован: 13 янв 2013, 16:36


Вернуться в Верстка и дизайн

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron