WordPress导航栏添加CSS滑动门效果.docVIP

WordPress导航栏添加CSS滑动门效果 Deloz,2009年04月11日23时20分,WordPress,评论(1),阅读(740),Via 本站原创 导航栏一般做法是这样: ul id=navlia href=/link2.php?site=#target=_blankspanlink n°1/span/a/lilia href=/link2.php?site=#target=_blankspanlink n°2/span/a/lilia href=/link2.php?site=#target=_blankspanlink n°3/span/a/li/ul 然后添加样式 #nav a, #nav a:visited {display:block;}#nav a:hover, #nav a:active {background:url(images/tab-right.jpg) no-repeat 100% 1px;float:left;}#nav a span {float:left;display:block;}#nav a:hover span {float:left;display:block;background: url(images/tab-left.jpg) no-repeat 0 1px;} WordPress的wp_list_pages生成的列表格式是 lia页面/a/li 这样的形式,而我们有时需要做的滑动门并不是这样,而是像下面这样, liab页面/b/a/li ??可以修改WordPress的原生函数,但这样比较麻烦,版本升级又要修改... 下面有简单的方法, 导航列表为页面时, ul id=navli class=?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists(is_tag) and is_tag()) ) { ?current_page_item?php } else { ?page_item?php } ?a href=/link2.php?site=?php echo get_settings(home); ?target=_blankb?php _e(Home); ?/b/a/li?php echo preg_replace(@\li([^]*)\a([^]*)(.*?)\\/a@i’, ‘li$1a$2b$3/b/a’, wp_list_pages(echo=0orderby=nametitle_li=depth=1′)); ?/ul 如果列表是分类的,就使用下面的替换方式,其实就是更换那个列表函数... ul id=navli class=?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists(is_tag) and is_tag()) ) { ?current_page_item?php } else { ?page_item?php } ?a href=/link2.php?site=?php echo get_settings(home); ?target=_blankb?php _e(Home); ?/b/a/li?php echo preg_replace(@\li([^]*)\a([^]*)(.*?)\\/a@i’, ‘li$1a$2b$3/b/a’, wp_list_categories(’echo=0orderby=nametitle_li=depth=1′)); ?/ul 代码解释: wp_list_pages() 和 wp_list_categories()这2 个函数的echo=0获得返回值,并把此返回值传递给preg_replace函数,进行替换工作,即嵌入b标签... wp_list_pages()函数会生成一个current_page_item表示当前页面,利用上面的代码,然后在style.css添加样式,即可高亮显示当前页面的选项了. 参考:/sliding-doors-wordpress-navigation-css-technique