12 июля 2007 в 2:28
Привет!
Обьясните пожалуйста, как с помощью css стилизовать меню...
структура меню:
Контакты
---Карта проезда
Когда нажали на контакты, друпал в соурсе пишет следующие.
< li class="last menu-1-4-2-active">< a href="/contacts" class="menu-1-4-2-active active">Контакты< /a>< /li>
и это я стилизую с помощью:
ul.primary-links li a.active {
color: #0A314F;
}
А при нажатие на под меню, друпал выдает такой код:
< li class="last menu-1-4-2-active">< a href="/contacts" class="menu-1-4-2-active">Контакты< /a>< /li>
Как мне с помощью CSS до него добраться?
хелп...
Комментарии
Вообще все еще зависит от более обширного окружение.
Допустим какой класс, а лучше id у Вашего списка?
И еще стилизовать указанным образом вы ничего не можете т.к. в стилях указываете класс "active" а в тексте страницы у Вас класс "menu-1-4-2-active"
Разница есть?
Советую почитать спецификацию CSS.
Прикрепляю ее тут (на русском).
Спасибо за книгу, с удовольствием "полистаю".
В данный момент у моего списка id нет воовсе, но если я не путаю ничего, добавить id довольно просто. Надо в page.tpl.php при вызове функции для отображения primary menu через запятую указать ещё один параметр - id.
А код, что приведен выше это тот, что мне друпал выдает. Меня очень смущает, что каждому элементу меню ( li- узлам и a href-ам), друпал присваивает свой уникальный класс.
< ul class="links primary-links">
< li class="first menu-1-1-2-active">< a href="/about" class="menu-1-1-2-active active">Обо мне< /li>
< li class="menu-1-2-2">< a href="/articles" title="Интересные статьи" class="menu-1-2-2">Интересные статьи< /li>
< li class="menu-1-3-2">< a href="/download" class="menu-1-3-2">Download< /li>
< li class="last menu-1-4-2">< a href="/contacts" class="menu-1-4-2">Контакты< /li>
< /ul>
Есть какие-нибудь идеи?
Какая тема? Это классы не специфичные для Друпал. Скорее всего это генерится в теме. Посмотрите файл template.php
тема "своя" в файле template.php нет ничего такого...только код который добавляет новый регион.
< ?php print theme('links', $primary_links, array('class' =>'links', 'id' => 'navlist')) ? > вот так вот вызываю меню.
UPD: только что проверил. bluemarine и garland выдают точно такой же код
Свое ID вставлять не обязательно. Главное отследить, не перектываются ли ваши стили системными, для этих целей id имеют больший вес. Или скажем использовать более точные определения, они тоже имеют больший вес.
Например:
ul.primary-links li { } // имеет меньший вес
При этом контейнер класса nav должен заключать в себе список ссылок
Пусть это Вас не смущает, подобраться можно не только по классу, а еще и то тэгам HTML
ul.primary-links li a.active { } // - стили для активных ссылок
"ul.primary-links li a { } // - стили для не активных ссылок
ul.primary-links li a.active { } // - стили для активных ссылок"
То что Вы написали работает, но только в случае когда нажата ссылка верхнего уровня (< li class="last menu-1-4-2-active">< a href="/contacts" class="menu-1-4-2-active active">Контакты< /a>< /li>)
А при нажатии на подменю "контактов" html source совсем другой
(< li class="last menu-1-4-2-active">< a href="/contacts" class="menu-1-4-2-active">Контакты< /a>< /li>) т.е. menu-уникальный-номер-ТИРЕ-active
И соответственно
ul.primary-links li a.active { } // - стили для активных ссылок
перестает работать
UPD: Выяснилось, что такой вид меню принимает в том случае если для навигации использовать только Primary Links.
Т.е. я создал новое МЕНЮ, куда переместил все свои ссылки и друпал начал выдавать удобный для CSS код.
А вот у меня тоже вопрос. Но полегче. Primary links выделяет ...active если ссылка указана не полная, т.е. trip_search a не www.site.ru/trip_search
Вот, а как мне показать ему главную страницу. Т.е. у меня есть главная страница, а в primary-links я пробовал и "front" и ничего не писать, а он все рано не понимает, где он. И не делает ссылку активной, если я нахожусь на главной странице.