学做网站培训课程介绍

当前位置:

wordpress下拉菜单,二级菜单制作

在之前的建网站的教程中,我们给大家讲了如何制作网站导航的二级导航,通过DIV+CSS的方式,可以制作出网站的二级菜单。这种方法是可能帮助我们去制作出内容固定的二级菜单出来,需要手动的修改二级导航里面的内容,才能变成属于我们自己需要的二级导航栏。

今天给广大学习如何做网站的学员介绍另一种更加方便快捷的wordpress下拉菜单制作的方法,它的内容是自动显示我们后台的菜单设置的内容。

wordpress下拉菜单,二级菜单制作

wordpress下拉菜单制作步骤

  1. 放一个jquery-xl.js到主题文件夹下的images文件夹;下载地址:https://pan.baidu.com/s/1eQH7EP8
  2. 将以下的代码放到自己网站模板头部文件header.php的</head>标签的上方。
    <script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory'); ?>/images/jquery-xl.js"></script>
  3. 删除原有的网站导航的整个DIV框,这个DIV框可以通过火狐浏览器的“审查元素”来找到;
  4. 将以下的HTML代码放在上一步删除的导航的位置;(相关教程:html视频教程
    <div id="navnew">
    <?php wp_nav_menu( array( 'container' => '','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 5, ) ); ?>
    </div>
    <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>
  5. 将以下的CSS样式加入到自己网站模板的style.css的底部。
    /*wordpress下拉菜单,二级菜单制作 https://www.xuewangzhan.net/*/
    #navnew {line-height: 60px; width: 100%; background: #3598db; height: 60px}
    #navnew .navigation {margin:0 auto;width:980px;height:100%;}
    #navnew .navigation li {height:60px;line-height:60px;width:100px; z-index: 100; POSITION: relative;text-align:center; FLOAT: left;border-right:1px solid #2f89c5;}
    #navnew .navigation li A {display: block; height: 100%;width:100%; TEXT-DECORATION: none;color: #ffffff;font-size:16px;}
    #navnew .navigation li:hover{background: #2f89c5;}
    #navnew .navigation li ul li,#navnew .navigation li ul li ul li,#navnew .navigation li ul li ul li ul li{border-right:none;border-top:1px solid #2f89c5;}
    #navnew .navigation ul {display: none}
    #navnew .navigation ul li {line-height: 60px; width: 101px;background: #3598db; height: 60px;}
    #navnew .navigation li ul {z-index: 999; POSITION: absolute; width: 100px; display: none; background: #0099ff; TOP: 60px;}
    #navnew .navigation li ul ul {z-index: 999; TOP: 0px; left: 101px}
  6. 进入网站后台,在左侧有一个菜单的选项,可以创建菜单,通过拖拉就可以随意的修改自己网站的导航和二级导航内容。
  7. 有些学习如何做网站的学员使用的主题可能没有开启后台菜单功能,如果你进入网站后台后没有“菜单”选项的话,可以在自己网站的模板函数functions.php中加入以下的函数来开启菜单。
    //添加菜单功能
    if (function_exists('add_theme_support')) {
    add_theme_support('nav-menus');
    register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'primary' ) ) );
    }

通过以上的步骤,我们可以在自己建网站时创建一个wordpress下拉菜单,如果你想制作三级,四级菜单,方法可以参考网站三级菜单、四级菜单制作

《“wordpress下拉菜单,二级菜单制作”》 有 1 条评论

  1. 学习建网站学员 罗渊说道:

    第十步中模板函数在哪

发表评论

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

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (111027 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • 在学做网站时,网站导航上经常有下拉菜单,这样可以在有限的导航上呈现出更多的栏目。如何在做网站时,能够制作出下拉菜单呢?【相关知识:如
  • 在制作DEDECMS织梦网站的模板和学习仿站教程时,特别头痛的莫过于去制作网站的多级菜单导航了,很多时候制作出来的下拉菜单导航很多都会移位,使用固
  • Dreamweaver跳转菜单制作 视频教程 (1123736 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽