当前位置:主页 > 网页教程 > 网站程序 > phpcms教程 > 内容欢迎大家投稿

PHP2008漂亮的蓝色导航下拉菜单

时间:2010-10-10 08:42来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

先看效果图   

  IE6下浏览 ie6.jpg

      IE7下浏览 ie7.jpg



  IE8下浏览 ie8.jpg

      火狐下浏览 firefox.jpg

opera浏览 opera.jpg

这是jquery代码  加到页头

 

  <script type="text/javascript">
$(document).ready(function(){
$("#menu ul li a").hover(function() {
$(this).parent().find("ul.nav").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.nav").slideUp('slow');
});

});
});

</script>

这是导航代码 把原先的div直接替换成下面的代码
<div id="menu">
<ul>
<li><a href="" id="menu_phpcms">首页</a></li>
{php $CATE = cache_read('category.php');}
<!--{loop $CATE $i $cat}-->
<!--{if !$cat['arrparentid']}-->
<!--{if $cat[module]!=ask}-->
<!--{if $cat['ismenu']}-->
<li><a href="{$r[url]}" id="menu_{$r[catid]}">{$cat[catname]}</a>
{if $CATEGORY[$cat[catid]][child] }
<ul class="nav">{get sql="select catname,url from phpcms_category where parentid='$i'" return="v"}
<p><a href="{$v[url]}">{$v[catname]}</a></p>{/get}</ul>
{/if}
</li>
<!--{/if}-->
<!--{/if}-->
<!--{/if}-->
<!--{/loop}-->
</ul>
</div> 

 

css是根据默认模板修改的 base.css

 

/*菜单*/
#menu{ background:url(images/bg_2.jpg) repeat-x 0 -5px;}

#menu ul li{ /*display:inline;*/ background:url(images/header_interval.gif) no-repeat 0 center; margin-left:-2px;float:left;/*position: relative;*/line-height: 30px; text-align:left}
#menu ul li a{ display:block; float:left;color:#fff; padding:0 1em; margin-left:2px; font-size:14px;}
/*#menu ul li a span{padding:4px 10px 0;}*/
#menu li a:hover, #menu li.hover a { background:url(images/topnav_hover.gif) no-repeat center top; }
#menu ul li a:hover span,#menu ul li a.selected span{ /*background: url(images/bg_menu_r.gif) no-repeat right 0; padding:4px 10px 0;*

(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接