前一章小V把主要框架布局完成，在这章小V来制作左侧菜单导航栏。在菜单导航栏加入logo、搜索还有站长联系方式。在菜单导航中只制作了一级导航和二级导航，具体效果如下图片。
——这是菜单导航栏的，一级导航。
——这是浏览器显示代码。
——后台导航栏设置。
——index.php主页代码，header.php文件没有修改。
PHP
{template:header}<body><div class="wrapper"><div class="header">
<div class="logo"><h1><a href="{$host}">{$name}</a></h1><samp>{$subname}</samp></div>
<div class="search"><form name="search" method="post" action="{$host}zb_system/cmd.php?act=search"><span><input type="text" name="q" size="11" class="search-text" placeholder="输入搜索内容"/></span><input type="submit" class="search-submit" value=""/></form></div>
<div class="nav"><ul>{module:navbar}</ul></div>
<div class="social-links"><a href="http://wpa.qq.com/msgrd?v=3&uin=813721535&site=qq&menu=yes" class="qq" target="_blank"></a></div></div><!--header .End-->
<div class="main">
<div class="center"></div><!--center .End-->
</div><!--main .End-->
<div class="sidebar"></div><!--sidebar .End--></div><!--wrapper .End--></body></html>
——这是菜单导航栏/logo/搜索，CSS控制样式。
CSS
h1,h2,h3,h4,h5,h6,ul,ol{margin:0px;padding:0px;display:block;}li{list-style-type:none;}a{text-decoration:none;color:#444;font-size:16px;}a:hover{text-shadow:0 0 1px #000;}.logo{background:#26A6F2;text-align:center;height:110px;width:180px;overflow:hidden;padding:5px;}.logo a{font-size:32px;color:#444;font-weight:bold;line-height:70px;display:block;height:70px;text-shadow:0 0 3px #fff;}.logo samp{font-size:14px;color:#fff;line-height:18px;display:block;height:30px;overflow:hidden;}.search{background:#fff;text-align:center;width:178px;border:solid 1px #ddd;margin:10px 5px 5px 5px;border-radius:5px;overflow:hidden;}.search span{float:left;padding-left:5px;}.search-text{border:none;font-size:16px;width:153px;height:25px;outline:0 none;margin:3px 0;}.search-submit{border:none;cursor:pointer;background-image:url(images/search.gif);background-repeat:no-repeat;width:16px;height:16px;margin-top:10px;right:7px;}.nav{padding-top:10px;margin-top:10px;border-top:solid 1px #ddd;}.nav ul{width:100%;}.nav ul li{width:100%;height:40px;border-bottom:solid 1px #f7f7f7;}.nav ul li a{font-size:18px;line-height:40px;padding-left:20px;display:block;color:#444;}.nav ul li:hover{background:#fff;border-bottom:solid 1px #26A6F2;}.nav ul ul{margin:20px 0 0 0;opacity:0;visibility:hidden;left:190px;z-index:1;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;position:absolute;}.nav li:hover > ul{background:#fff;opacity:1;visibility:visible;margin:-40px 0 0 0;}.nav li li{border-bottom:solid 1px #ddd;}.social-links{width:100%;text-align:center;border-top:solid 1px #ddd;border-bottom:solid 1px #ddd;margin-top:10px;display:block;background-color:#ddd;}.social-links a{height:37px;width:37px;margin:5px 5px 0px 5px;border-radius:5px;background-color:#ddd;display:inline-block;background-image:url(images/qq.png);background-repeat:no-repeat;}
