学做网站培训课程介绍

当前位置:

网站二级下拉菜单导航制作方法

网站二级下拉菜单在很多网站上都有这样的功能,下面学做网站论坛介绍一下网站二级下拉菜单导航制作方法:

网站二级下拉菜单

1、下载网站特效功能万能JS插件包(解决网站大部分特效);

将插件包里的JS文件上传到自己的网站主机下,然后放以下的代码到</head>标签上方; (注意修改路径)


<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.SuperSlide.2.1.3.js"></script>

2、删除原来的菜单的DIV,放下面的代码来调用后台菜单:


<nav class="xf_meau">
<?php wp_nav_menu( array( 'container' => '','menu_class' => 'xf_meau_list clearfix','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>
</nav>
<script type="text/javascript">
var topMenuNum = 0;
$("#nav_sgBhgn li").hover(
function(){
topMenuNum++;
$(this).attr("id","kindMenuHover"+topMenuNum);
$("#kindMenuHover" + topMenuNum + " > ul").show();
$(this).parent().addClass("hover");
},
function(){
$("#"+$(this).attr("id")+" > ul").hide();
$(this).attr("id","");
$(this).parent().removeClass("hover");
}
);
</script></div>

3、在style.css中放入以下代码:


.xf_meau{width:100%;height:56px;background:#017ED2}
.xf_meau_list{width:1180px;margin:0 auto;}
.xf_meau_list>li{width:10%;line-height:55px;float:left;text-align:center;position:relative;}
.xf_meau_list a{font-size:1.2em;color:#fff;}
.xf_meau_list li.current-menu-item {background:#0c619a;}
.xf_meau_list li:hover{background:#0c619a;}
.xf_meau_list li:hover a{text-decoration:none;}</p><p>.xf_meau_list li UL {Z-INDEX: 8; POSITION: absolute; display: none; BaCKGROUND: #017ED2; TOP: 55px;width:100%; }
.xf_meau_list li UL UL {Z-INDEX: 200; TOP: 0px; LEFT: 90px}
.xf_meau_list li UL li {height:45px;line-height:45px;border-top:1px solid #017ED2;}
.xf_meau_list li UL li:hover {BaCKGROUND: #0c619a;}
.xf_meau_list li.current-menu-item { BaCKGROUND: #0c619a; }

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 在学做网站时,网站导航上经常有下拉菜单,这样可以在有限的导航上呈现出更多的栏目。如何在做网站时,能够制作出下拉菜单呢?【相关知识:如
  • 在制作DEDECMS织梦网站的模板和学习仿站教程时,特别头痛的莫过于去制作网站的多级菜单导航了,很多时候制作出来的下拉菜单导航很多都会移位,使用固
  • Dreamweaver跳转菜单制作 视频教程 (1123732 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 很多网站都有对联广告,当我们打开它的网站的时候,会在屏幕的两边自动的出现二个对联广告,显的很醒目。网站对联广告对于做cpa,cps的朋友有很大