用了popblue3c的主题,觉得导航太单调,想做个下拉菜单!
于是在网上找了制作下拉菜单的方法,据介绍可以用插件,和添加代码的方法来实现,我想通过代码来实现,下面是在网上找到添加代码的方法:
第一步：Html和Php代码
用下面的代码取代你在header.php中的导航菜单旧代码
<ul id=”nav” class=”clearfloat”>
<li><a href=”<?php echo get_option(’home’); ?>/” class=”on”>Home</a></li>
<?php wp_list_pages(’title_li=’); ?>
<li class=”cat-item”><a href=”#”>Categories</a>
<ul class=”children”>
<?php wp_list_categories(’orderby=name&title_li=’);
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != “”) {
echo “<ul>”;
wp_list_categories(’orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of=’.$this_category->cat_ID);
echo “</ul>”;
}
?>
</ul>
</li>
</ul>
=======================分格线=====================
第二步：设置CSS-
把下面的CSS代码复制到你的主题的css文件中.
#nav{
background:#222;
font-size:1.1em;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float: left;
list-style:none;
border-right:1px solid #a9a9a9;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #f5f5f4;
padding:6px 12px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
background:#000;
text-decoration:none
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 174px;
border-bottom: 1px solid #a9a9a9;
}
#nav li li {
width: 172px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #777;
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
a.main:hover {
background:none;
}
=======================分格线=====================
第三步：Javascript代码
把下面的js代码放在你的主题的<head></head>中.
<![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouSEOver=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouSEOut=function() {
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(”onload”, sfHover);
//–><!]]>
==================下面是popblue3c主题下面的 header.php 文件原内容==========================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="top">
<div id="header"><h1 class="blogtitle"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1></div>
</div>
<div id="nav">
<div id="nav2">
<ul class="nav2">
<li><a href="<?php bloginfo('url'); ?>">首页</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
</div>
<div id="main">
============================要解决的问题=============================
现在要解决的问题是要把第一步的代码,插入header.php文件中的相应位置,我放了好几个地方都不行:(
会弄的朋友帮忙搞一下,贴出来..先行谢过~~~ :)
[[i] 本帖最后由 yourpwt 于 2008-10-5 17:16 编辑 [/i]]
