Я использую CSS-спрайты для навигации по wordpress, и для того, чтобы заставить их работать, мне нужно было использовать php для отображения текущей страницы раздела.
CSS:
#sidebarnav ul#sidenav li.visionside a {width:204px; height:53px; background:url(http://img.ruphp.com/php/vision2.png) 0px 0} #sidebarnav ul#sidenav li.visionside a:hover {background-position:0px -53px} #sidebarnav ul#sidenav li.teamside a {width:204px; height:53px; background:url(http://img.ruphp.com/php/team2.png) 0px 0} #sidebarnav ul#sidenav li.teamside a:hover {background-position:0px -53px} #sidebarnav ul#sidenav li.mtlside a {width:204px; height:53px; background:url(http://img.ruphp.com/php/mtl2.png) 0px 0} #sidebarnav ul#sidenav li.mtlside a:hover {background-position:0px -53px} #sidebarnav ul#sidenav li.blogside a {width:204px; height:53px; background:url(http://img.ruphp.com/php/content2.png) 0px 0} #sidebarnav ul#sidenav li.blogside a:hover {background-position:0px -53px} #sidebarnav ul#sidenav li.orgside a {width:204px; height:53px; background:url(http://img.ruphp.com/php/org2.png) 0px 0} #sidebarnav ul#sidenav li.orgside a:hover {background-position:0px -53px} CSS в заголовке для запуска PHP:
#sidebarnav ul#sidenav li.<?php echo $current1; ?> { background:url(http://img.ruphp.com/php/vision2.png) 0px -106px; } #sidebarnav ul#sidenav li.<?php echo $current2; ?> { background:url(http://img.ruphp.com/php/team2.png) 0px -106px; } #sidebarnav ul#sidenav li.<?php echo $current3; ?> { background:url(http://img.ruphp.com/php/content2.png) 0px -106px; } #sidebarnav ul#sidenav li.<?php echo $current4; ?> { background:url(http://img.ruphp.com/php/org2.png) 0px -106px; }
PHP:
<?php if ( is_page('vision') ) { $current1 = 'visionside a'; } elseif ( is_page('team') ) { $current2 = 'teamside a'; } elseif ( is_page('commentary') ) { $current3 = 'blogside a'; } elseif ( is_page('organizations') ) { $current4 = 'orgside a'; } ?>
Но когда пользователь нависает над навигацией, элемент показывает состояние зависания, а не активное состояние, как следует.
URL: http://jumpthru.net/newsite/vision/
Это потрясающе плохой способ сделать это. Игнорирование здравого смысла:
Вы можете просто добавить !important для каждого из ваших свойств background , например:
background:url(http://img.ruphp.com/php/vision2.png) 0px -106px !important;
Вы делаете это тонкость, отличную от того, как WordPress предлагает:
http://codex.wordpress.org/Dynamic_Menu_Highlighting
Я думаю, вы должны внимательно прочитать этот учебник и повторить это.
Я согласен в основном с тем, что @thirtydot говорит, поскольку, вероятно, есть более простой способ WP, чтобы добавить класс к активной ссылке. Но чтобы следовать вашей логике, вы можете сделать все это намного проще.
Сначала CSS. хотя я скопировал немного больше из файла вашей страницы, вы можете удалить много повторяющихся деклараций, так что единственное, что требуется каждой конкретной ссылке, – это фоновое изображение. Исходный размер, фоновая позиция и т. д. не изменяется поэтому что-то вроде этого облегчает чтение:
#sidenav { width:204px; list-style:none; margin:0; padding: 0; padding-bottom:40px; float:left; } #sidenav li { float:left; width: 100%; } #sidenav li a { display: block; height:53px; background-repeat: no-repeat; background-position: 0 0; text-indent: -9999px; } #sidenav li a:hover { background-position: 0 -53px; } #sidenav li.visionside a {background-image : url(http://img.ruphp.com/php/vision2.png);} #sidenav li.teamside a {background-image : url(http://img.ruphp.com/php/team2.png);} #sidenav li.mtlside a {background-image : url(http://img.ruphp.com/php/mtl2.png);} #sidenav li.blogside a {background-image: url(http://img.ruphp.com/php/content2.png);} #sidenav li.orgside a {background-image: url(http://img.ruphp.com/php/org2.png);}
теперь вашему «активному» состоянию требуется только одна соответствующая ссылка, чтобы изменить background-position на 0 -106px – нет необходимости повторно объявлять изображение снова
поэтому ваша логика PHP может быть такой (возможно, даже более простой), но я пытаюсь использовать то, что у вас есть:
<?php if ( is_page('vision') ) { $current = 'visionside'; } elseif ( is_page('team') ) { $current = 'teamside'; } elseif ( is_page('???') ) { $current = 'mtlside'; } elseif ( is_page('commentary') ) { $current = 'blogside'; } elseif ( is_page('organizations') ) { $current = 'orgside'; } ?>
Примечание: используется одна и та же переменная (и вопросительные знаки нуждаются в замене для вашей ссылки mtlside) .., а затем строка в стилях <head> только тогда должна быть прочитана:
#sidenav li.<?php echo $current ?> a { background-position: 0px -106px; }
Таким образом, это будет только одна ссылка, которая становится более конкретной, показывающей фоновое положение «активной страницы».
Я не уверен, что вы на самом деле хотите, чтобы ваш hover делал, но правило a:hover не будет переопределять новый «активный» селектор, потому что правило в стилях <head> выше является более конкретным, если вы действительно хотите, чтобы активный чтобы показать то же самое :hover состояние :hover как обычно вам нужно сделать правило a:hover в таблице стилей, более конкретно, что вы можете сделать следующим образом:
#sidebarnav #sidenav li a:hover { background-position: 0 -53px; }
Заметьте, что я удалил двойные ID из селекторов стилей, поскольку им не нужно, один идентификатор достаточно уникален. Но тогда вы можете использовать второй идентификатор (#sidebarnav), если требуется, чтобы последнее правило «взвешивало» больше если тогда требуется специфика.