学做网站培训课程介绍

当前位置:

wordpress如何制作bootstarp响应式二级下拉菜单

本课程视频是VIP会员课程,学习请进入VIP学习区

bootstarp是一个特别棒的前端开发框架,在自适应手机网站制作课程中,我们讲了怎么使用bootstarp框架去制作各类响应式网站。使用bootstarp框架和wordpress配合建网站时,比较麻烦的就是制作响应式二级下拉菜单。

bootstarp响应式二级下拉菜单

下面学做网站就来介绍一下wordpress如何制作bootstarp响应式二级下拉菜单。

方法/步骤

  1. 首先在导航菜单位置,使用以下的代码进行替换;
    
    
    <nav class="mainmenu-area stricky">
            <div class="container">
                <div class="navigation pull-left">
                    <div class="nav-header">
                    <?php wp_nav_menu( array( 'container' => '','menu_class' => 'topmeau','menu_id' => "nav_top",'depth' => 2, ) ); ?>          
                    </div>
                    <div class="nav-footer">
                        <button><i class="fa fa-bars"></i></button>
                    </div>
                </div>
                <div class="search-box pull-right">
                    <form action="#">
                        <input type="text" placeholder="Search...">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </form>
                </div>
            </div>
        </nav>
  2. 将以下的CSS代码加到style.css中,用于控制bootstarp响应式二级下拉菜单的样式;
    
    
    /* 5 .mainmenu-area styles */

    .mainmenu-area {
        background: #262F36;
        border-bottom: 4px solid #186AAB;
    }
    .mainmenu-area.stricky-fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99999;
    }
    .navigation .nav-footer {
        display: none;
    }
    .navigation .nav-header > ul {
        padding: 0;
        margin: 0;
    }
    .navigation .nav-header > ul > li {
        display: inline-block;
        position: relative;
    }
    .navigation .nav-header > ul > li:first-child > a {
        padding-left: 0;
    }
    .navigation .nav-header > ul > li > a {
        display: block;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        color: #FFFFFF;
        padding: 23px 19px;
        transition: all .3s ease;
    }
    .navigation .nav-header > ul > li:hover > a {
        color: #186AAB;
    }
    .navigation .nav-header > ul > li:hover > ul {
        opacity: 1;
        visibility: visible;
    }
    .navigation .nav-header > ul > li > ul {
        position: absolute;
        top:100%;
        left:0;
        z-index: 999;
        background: #fff;
        width: 240px;
        margin: 0;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        box-shadow: 2px 0 11px -3px rgba(0,0,0,.2);
        transition: all .5s ease;
    }
    .navigation .nav-header > ul > li > ul > li {
        display: block;
        position: relative;
    }
    .navigation .nav-header > ul > li > ul > li:last-child > a {
        border-bottom: 0;
    }
    .navigation .nav-header > ul > li > ul > li > a {
        display: block;
        font-size: 14px;
        font-weight: 500;
        text-transform: capitalize;
        color: #2B2B2B;
        padding: 14px 19px;
        border-bottom: 1px solid #E9E9E9;
        transition: all .3s ease;
    }
    .navigation .nav-header > ul > li > ul > li:hover > a {
        background: #186AAB;
        color: #fff;
        border-color: 0;
    }
    .navigation .nav-header > ul > li > ul > li:hover > ul {
        opacity: 1;
        visibility: visible;
    }
    .navigation .nav-header > ul > li > ul > li > ul {
        position: absolute;
        top:0;
        left:100%;
        width: 240px;
        margin: 0;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        z-index: 999;
        background: #fff;
        box-shadow: 2px 0 11px -3px rgba(0,0,0,.2);
        transition: all .5s ease;
    }
    .navigation .nav-header > ul > li > ul > li > ul > li {
        display: block;
        position: relative;
    }
    .navigation .nav-header > ul > li > ul > li > ul > li:last-child > a {
        border-bottom: 0;
    }
    .navigation .nav-header > ul > li > ul > li > ul > li > a {
        display: block;
        font-size: 14px;
        font-weight: 500;
        text-transform: capitalize;
        color: #2B2B2B;
        padding: 14px 19px;
        border-bottom: 1px solid #E9E9E9;
        transition: all .3s ease;
    }
    .navigation .nav-header > ul > li > ul > li > ul > li:hover > a {
        background: #186AAB;
        color: #fff;
        border-color: 0;
    }
    .navigation .nav-header .dropdown a button {display: none;}

    .mainmenu-area .search-box {
        width: 280px;
        height: 66px;
        background: #2D373F;
        padding: 0 25px;
    }
    .mainmenu-area .search-box input {
        background-color: transparent;
        border: none;
        outline: none;
        color: #DAD9D9;
        font-size: 13px;
        line-height: 65px;
        width: calc(100% - 31px);
    }
    .mainmenu-area .search-box button {
        background-color: transparent;
        border: none;
        outline: none;
        font-size: 15px;
        line-height: 65px;
        color: #DAD9D9;
    }
  3. 将以下的代码放到JS里,并且在代码中引用;
    
    
    // 12 mobileMenu
    function mobileMenu () {
        if ($('.navigation .nav-footer button').length) {
            $('.navigation .nav-footer button').on('click', function () {
                $('.navigation .nav-header').slideToggle();
                $('.navigation .nav-header').find('.dropdown').children('a').append(function () {
                    return '<button><i class="fa fa-bars"></i></button>';
                });
                $('.navigation .nav-header .dropdown a button').on('click', function () {
                    $(this).parent().parent().children('ul.sub-menu').slideToggle();
                    return false;
                });
            });
        };
    }
  4. 然后通过后台菜单设置导航菜单项,在设置带有二级导航的一级导航时,需要添加一个class类,名为:dropdown 如下图:
  5. 这样就可以制作出带有二级下拉菜单的bootstarp响应式二级下拉菜单了。

发表评论

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

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (110997 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • bootstarp是一个特别棒的前端开发框架,在自适应手机网站制作课程中,我们讲了怎么使用bootstarp框架去制作各类响应式网站。使用bootstarp框架和wordp
  • 网页http请求头部信息是网页代码零入门知识,网页http请求头部信息解释:1. Accept:告诉WEB服务器自己接受什么介质类型,*/* 表示任意类型,type/
  • 这是学做网站论坛的一个响应式外贸英文网站制作案例,网站采用WORDPRESS程序+BOOTSTRAP框架制作,网站采用载入动画,使整个网站动感十足。网站首
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 在学做网站时,网站导航上经常有下拉菜单,这样可以在有限的导航上呈现出更多的栏目。如何在做网站时,能够制作出下拉菜单呢?【相关知识:如
  • 在制作DEDECMS织梦网站的模板和学习仿站教程时,特别头痛的莫过于去制作网站的多级菜单导航了,很多时候制作出来的下拉菜单导航很多都会移位,使用固
  • Dreamweaver跳转菜单制作 视频教程 (1123693 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web