Проблема с Меню

  • astre

    (@astre)


    12 лет, 8 месяцев назад


    Вот так выглядит меню.

    /* The <i> tag are inserted with Javascript.
The <i> tags allows adding background images from a "sprite" image =
background-image with  */
#menu1 > li > a > i {
	display:					block;
	width: 					24px;
	height: 					24px;
	margin: 					0 auto 5px auto;
	background: 			transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 0 no-repeat;
}

#menu1 > li:hover > a > i {
	background: 			transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px 0 no-repeat;
}

/* Part 1- for default state: */
#menu1 .cat-?cat=1&lang=RU > a > i { background-position: 0px 0px; }
#menu1 .page-?page_id=28&lang=RU > a > i { background-position: 0px -24px; }
#menu1 .page-?page_id=24&lang=RU > a > i { background-position: 0px -48px; }
#menu1 .page-?page_id=2&lang=RU > a > i { background-position: 0px -72px; }
#menu1 .item-?p=59&lang=RU > a > i { background-position: 0px -96px; }
/* Part 2 - for hover state: */
#menu1 .cat-?cat=1&lang=RU:hover > a > i, #menu1 .cat-?cat=1&lang=RU.active > a > i { background-position: -24px 0px; }
#menu1 .page-?page_id=28&lang=RU:hover > a > i, #menu1 .page-?page_id=28&lang=RU.active > a > i { background-position: -24px -24px; }
#menu1 .page-?page_id=24&lang=RU:hover > a > i, #menu1 .page-?page_id=24&lang=RU.active > a > i { background-position: -24px -48px; }
#menu1 .page-?page_id=2&lang=RU:hover > a > i, #menu1 .page-?page_id=2&lang=RU.active > a > i { background-position: -24px -72px; }
#menu1 .item-?p=59&lang=RU:hover > a > i, #menu1 .item-?p=59&lang=RU.active > a > i { background-position: -24px -96px; }

    Вот так стил. Проблема в том что Он не использует координаты иконок для меню что я задал. Проблема в <li class:> ?

Просмотр 12 ответов — с 1 по 12 (всего 12)
  • Автор astre

    (@astre)

    12 лет, 8 месяцев назад

    Ой с ссылкой на касипорил. Нажав на текст увидите меню.

    Автор astre

    (@astre)

    12 лет, 8 месяцев назад

    Или это может из за того что у меня 3 языка на сайте и li class не правильно распознается?

    skodnik

    (@skodnik)

    12 лет, 8 месяцев назад

    А правда классы у Вас именно так именуются — «page-?page_id=24&lang=RU»? Сейчас точных правил не вспомню, но практически уверен, что если это всеже имя класса, а не ссылка, то написано оно не верно.

    Автор astre

    (@astre)

    12 лет, 8 месяцев назад

    Вот тут посмотри.

    skodnik

    (@skodnik)

    12 лет, 8 месяцев назад

    Ок, тогда и ты посмотри img-fotki.yandex.ru/get/6610/106485324.2/0_90a6c_ce7de91_orig.

    А вот правила именования:
    In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier «B&W?» may be written as «B\&W\?» or «B\26 W\3F»..
    Источник w3.org/TR/CSS21/syndata.html.

    Автор astre

    (@astre)

    12 лет, 8 месяцев назад

    Хорошо теперь хоть ясно в чем дело, огромное тебе спасибо. Попробую это как то исправить.

    Автор astre

    (@astre)

    12 лет, 8 месяцев назад

    Меню класс он делается автоматом, как мне тогда определить новое название класса без «?» итд.. ?

    skodnik

    (@skodnik)

    12 лет, 8 месяцев назад

    По-умолчанию класс формируется верно, думаю, стоит посмотреть используемые плагины и тему.

    Автор astre

    (@astre)

    12 лет, 8 месяцев назад

    Montezuma название темы. Она очень проста и удобна. Там есть встроенный урок по меню и даже готовый код для меню который формулируется автоматом после того как создаешь меню в админки. Проблема и есть в том что него о классах там нет а этот готовый код уже с «?».

    Автор astre

    (@astre)

    12 лет, 8 месяцев назад

    Montezuma replaces the ID based CSS classes that WordPress provides as a means for styling individual menu items, with more intuitive «slug» based CSS classes. So if you look at your CSS or HTML and see .cat-uncategorized you actually know that this is about the category «Uncategorized», whereas .cat-item-48 doesn’t tell you much. Also, when you move your site with Wp’s export/import the slugs stay the same and the CSS stays valid whereas item ID’s change after a WP export/import. Montezuma also removes quite a bit of unnecessary CSS classes for lighter code and adds these short, meaningful and useful CSS classes across all menu types (custom, fallback page, fallback category):

    .active: The current item gets <li class="active">
.ancestor: All parents and grand parents of the current item get <li class="ancestor"> (Per default WordPress does not add "ancestor" classes to category menus).
.parent: The direct parent of the current item gets "parent" in addition to "ancestor" <li class="parent ancestor">
.sub-menu: All sub menu UL's get <ul class="sub-menu"> (Per default WordPress is inconsistent here and uses "children" for fallback menus and "sub-menu" for custom menus which means you'd have to account for both in your CSS or else the styles would break when a custom menu gets assigned or un-assigned.).
.has-sub-menu: All items that have children get <li class="has-sub-menu"> (Useful for adding those arrow or whatever icons that indicate that sub menus exist below an item. WordPress does not add this at all).
.cat-item-48 becomes .cat-uncategorized in category menus and custom menus
.page-item-174 becomes .page-our-products in page menus and custom menus
custom links get .item-link-text-here
    skodnik

    (@skodnik)

    12 лет, 8 месяцев назад

    Если я верно понял суть, надо сделать настройку ЧПУ соответственно. Тогда слаг не будет содержать знак вопроса, следовательно и класс не будет.

    Автор astre

    (@astre)

    12 лет, 8 месяцев назад

    Вот как решил проблему.

    Очень просто оказалось.

Просмотр 12 ответов — с 1 по 12 (всего 12)
  • Тема «Проблема с Меню» закрыта для новых ответов.