Fatal编程技术网
  • jquery/
  • Jquery 菜单上的文本将不可见

Jquery 菜单上的文本将不可见

jquery html css menu

Jquery 菜单上的文本将不可见,jquery,html,css,menu,Jquery,Html,Css,Menu,我正在尝试将在上找到的菜单添加到我的站点。 出于某种原因，尽管控制台中没有错误，但我就是看不到菜单。我确实在页面的一角看到了菜单中的一些蓝色模糊，但是这些单词和条本身并没有出现-看起来像这样： 在像注释建议的那样更改Z索引之后，我得到了下面的菜单，它看起来很奇怪-一点也不像教程。 我的代码： <html> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content

我正在尝试将在上找到的菜单添加到我的站点。 出于某种原因，尽管控制台中没有错误，但我就是看不到菜单。我确实在页面的一角看到了菜单中的一些蓝色模糊，但是这些单词和条本身并没有出现-看起来像这样：

在像注释建议的那样更改Z索引之后，我得到了下面的菜单，它看起来很奇怪-一点也不像教程。

我的代码：

<html>

<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    (function($) {

        $.fn.menumaker = function(options) {

            var cssmenu = $(this),
                settings = $.extend({
                    title: "Menu",
                    format: "dropdown",
                    breakpoint: 768,
                    sticky: false
                }, options);

            return this.each(function() {
                cssmenu.find('li ul').parent().addClass('has-sub');
                if (settings.format != 'select') {
                    cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
                    $(this).find("#menu-button").on('click', function() {
                        $(this).toggleClass('menu-opened');
                        var mainmenu = $(this).next('ul');
                        if (mainmenu.hasClass('open')) {
                            mainmenu.hide().removeClass('open');
                        } else {
                            mainmenu.show().addClass('open');
                            if (settings.format === "dropdown") {
                                mainmenu.find('ul').show();
                            }
                        }
                    });

                    multiTg = function() {
                        cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
                        cssmenu.find('.submenu-button').on('click', function() {
                            $(this).toggleClass('submenu-opened');
                            if ($(this).siblings('ul').hasClass('open')) {
                                $(this).siblings('ul').removeClass('open').hide();
                            } else {
                                $(this).siblings('ul').addClass('open').show();
                            }
                        });
                    };

                    if (settings.format === 'multitoggle') multiTg();
                    else cssmenu.addClass('dropdown');
                } else if (settings.format === 'select') {
                    cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
                    var selectList = cssmenu.find('select');
                    selectList.append('<option>' + settings.title + '</option>', {
                        "selected": "selected",
                        "value": ""
                    });
                    cssmenu.find('a').each(function() {
                        var element = $(this),
                            indentation = "";
                        for (i = 1; i < element.parents('ul').length; i++) {
                            indentation += '-';
                        }
                        selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
                    });
                    selectList.on('change', function() {
                        window.location = $(this).find("option:selected").val();
                    });
                }

                if (settings.sticky === true) cssmenu.css('position', 'fixed');

                resizeFix = function() {
                    if ($(window).width() > settings.breakpoint) {
                        cssmenu.find('ul').show();
                        cssmenu.removeClass('small-screen');
                        if (settings.format === 'select') {
                            cssmenu.find('select').hide();
                        } else {
                            cssmenu.find("#menu-button").removeClass("menu-opened");
                        }
                    }

                    if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
                        cssmenu.find('ul').hide().removeClass('open');
                        cssmenu.addClass('small-screen');
                        if (settings.format === 'select') {
                            cssmenu.find('select').show();
                        }
                    }
                };
                resizeFix();
                return $(window).on('resize', resizeFix);

            });
        };
    })(jQuery);

    (function($) {
        $(document).ready(function() {

            $(document).ready(function() {
                $("#cssmenu").menumaker({
                    title: "Menu",
                    format: "dropdown"
                });

                $("#cssmenu a").each(function() {
                    var linkTitle = $(this).text();
                    $(this).attr('data-title', linkTitle);
                });
            });

        });
    })(jQuery);
</script>
<style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Raleway);
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
        line-height: 1;
        display: block;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #cssmenu:after,
    #cssmenu > ul:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    #cssmenu #menu-button {
        display: none;
    }

    #cssmenu {
        width: auto;
        font-family: Raleway, sans-serif;
        line-height: 1;
    }

    #cssmenu > ul {
        background: #3db2e1;
    }

    #cssmenu > ul > li {
        float: left;
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        perspective: 1000px;
    }

    #cssmenu.align-center > ul {
        font-size: 0;
        text-align: center;
    }

    #cssmenu.align-center > ul > li {
        display: inline-block;
        float: none;
    }

    #cssmenu.align-right > ul > li {
        float: right;
    }

    #cssmenu > ul > li > a {
        padding: 16px 20px;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        background: #3db2e1;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    #cssmenu > ul > li.active > a {
        color: #dff2fa;
    }

    #cssmenu > ul > li:hover > a,
    #cssmenu > ul > li > a:hover {
        color: #dff2fa;
        -webkit-transform: rotateX(90deg) translateY(-23px);
        -moz-transform: rotateX(90deg) translateY(-23px);
        transform: rotateX(90deg) translateY(-23px);
        -ms-transform: none;
    }

    #cssmenu > ul > li > a::before {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: -1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 16px 20px;
        color: #dff2fa;
        background: #19799f;
        content: attr(data-title);
        -webkit-transition: background 0.3s;
        -moz-transition: background 0.3s;
        transition: background 0.3s;
        -webkit-transform: rotateX(-90deg);
        -moz-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -ms-transform: translateY(- -18px);
    }

    #cssmenu > ul > li:hover > a::before,
    #cssmenu > ul > li > a:hover::before {
        background: #3db2e1;
    }

    #cssmenu.small-screen {
        width: 100%;
    }

    #cssmenu.small-screen > ul,
    #cssmenu.small-screen.align-center > ul {
        width: 100%;
        text-align: left;
    }

    #cssmenu.small-screen > ul > li,
    #cssmenu.small-screen.align-center {
        float: none;
        display: block;
        border-top: 1px solid rgba(100, 100, 100, 0.1);
    }
    #cssmenu.small-screen > ul > li:hover > a,
    #cssmenu.small-screen > ul > li > a:hover {
        color: #dff2fa;
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
        -ms-transform: none;
    }

    #cssmenu.small-screen > ul > li > a::before {
        display: none;
    }

    #cssmenu.small-screen #menu-button {
        display: block;
        padding: 16px 20px;
        cursor: pointer;
        font-size: 14px;
        text-decoration: none;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: #3db2e1;
    }

    #cssmenu.small-screen #menu-button:after {
        content: "";
        position: absolute;
        right: 20px;
        top: 17px;
        display: block;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        border-top: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        width: 22px;
        height: 3px;
    }

    #cssmenu.small-screen #menu-button.menu-opened:after {
        border-top: 2px solid #dff2fa;
        border-bottom: 2px solid #dff2fa;
    }

    #cssmenu.small-screen #menu-button:before {
        content: "";
        position: absolute;
        right: 20px;
        top: 27px;
        display: block;
        width: 22px;
        height: 2px;
        background: #ffffff;
    }

    #cssmenu.small-screen #menu-button.menu-opened:before {
        background: #dff2fa;
    }

    @font-face {
        font-family: 'Oregon';
        src: url('OregonFont/Oregon LDO Medium Oblique.ttf');
        /* IE9 Compat Modes */
        src: url('OregonFont/Oregon LDO Medium Oblique.ttf') format('embedded-opentype'), /* IE6-IE8 */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf'), /* Super Modern Browsers */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf'), /* Pretty Modern Browsers */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('truetype'), /* Safari, Android, iOS */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf');
        /* Legacy iOS */
    }

    @font-face {
        font-family: 'HurtMold';
        src: url('HurtmoldFont/HURTM___.otf');
        /* IE9 Compat Modes */
        src: url('HurtmoldFont/HURTM___.otf') format('embedded-opentype'), /* IE6-IE8 */
        url('HurtmoldFont/HURTM___.otf') format('otf'), /* Super Modern Browsers */
        url('HurtmoldFont/HURTM___.otf') format('otf'), /* Pretty Modern Browsers */
        url('HurtmoldFont/HURTM___.otf') format('opentype'), /* Safari, Android, iOS */
        url('HurtmoldFont/HURTM___.otf') format('otf');
        /* Legacy iOS */
    }

    * {
        box-sizing: border-box;
    }

    .background-image {
        background-image: url('http://kormancommercial.com/images/property_type_images/display/6/retail-office.jpg?1300135482');
        background-size: cover;
        display: block;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        height: 800px;
        left: 0;
        position: fixed;
        right: 0;
        z-index: 1;
    }

    .Heading {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
        background: rgb(255, 255, 255) url('http://greenmediawebsites.com/index_files/Gray-Background-Gradient.jpg') no-repeat left top;
        border-radius: 3px;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        top: 12%;
        left: 40%;
        position: absolute;
        width: 500px;
        height: 300px;
        top: 10% right: 0;
        z-index: 2;
        padding: 0 10px;
        font-size: 72px;
    }

    .HurtMoldRight {
        font-family: 'HurtMold', Fallback, sans-serif;
        color: White;
        background-color: Black;
        margin-right: 10px;
        margin-left: 10px;
        float: right;
    }

    .HurtMoldLeft {
        font-family: 'HurtMold', Fallback, sans-serif;
        color: White;
        background-color: Black;
        float: left;
        margin-right: 10px;
        margin-left: 10px;
    }

    .Oregon {
        font-family: 'Oregon', Fallback, sans-serif;
    }
    *
    {
    overflow:auto;
    }
</style>
</head>

<body>
<div class="background-image"></div>
<div class="Heading">
    <div class="Oregon">
        <div class="HurtMoldLeft"><i> Your </i></div> Phrase
        <br> With a
        <div class="HurtMoldRight"><i> Display. </i></div>
    </div>
</div>
    <div id='cssmenu' >
    <ul>
    <h2>
        <li class='active'><a href='#'>Home</a></li>
        <li><a href='#'>Products</a></li>
        <li><a href='#'>Company</a></li>
        <li><a href='#'>Contact</a></li>
        </h2>
    </ul>
</div>
</body>

</html>


（函数（$）{
$.fn.menumaker=函数（选项）{
var cssmenu=$（此），
设置=$.extend({
标题：“菜单”，
格式：“下拉列表”，
断点：768，
粘性：假
}，选项）；
返回此值。每个（函数（）{
cssmenu.find（'li-ul'）.parent（）.addClass（'has-sub'）；
如果（settings.format！=“选择”）{
cssmenu.prepend（“”+settings.title+“”）；
$（this）.find（#菜单按钮”）.on（'click'，function（）{
$（this.toggleClass（'menu-opened'）；
var mainmenu=$（this.next（'ul'）；
if（mainmenu.hasClass（'open'））{
main menu.hide（）.removeClass（'open'）；
}否则{
main menu.show（）.addClass（'open'）；
如果（settings.format==“下拉列表”）{
main menu.find（'ul'）.show（）；
}
}
});
multiTg=函数（）{
cssmenu.find（“.has sub”）.prepend（“”）；
cssmenu.find（“.submenu button”）。在（'click'，function（）上{
$（this.toggleClass（'submenu-opened'）；
if（$（this）.sibbins（'ul'）.hasClass（'open'））{
$（this）.sides（'ul'）.removeClass（'open'）.hide（）；
}否则{
$（this）.this（'ul'）.addClass（'open'）.show（）；
}
});
};
如果（settings.format==='multitogle'）multiTg（）；
else cssmenu.addClass（'dropdown'）；
}else if（settings.format==='select'）{
cssmenu.append（“”）.addClass（'select-list'）；
var selectList=cssmenu.find（'select'）；
selectList.append（“”+settings.title+“”）{
“已选定”：“已选定”，
“值”：”
});
cssmenu.find（'a'）。每个（函数（）{
变量元素=$（此），
缩进=”；
对于（i=1；i选择list.append（“”+indentation+element.text（）+”尝试给
#cssmenu
一个大约5%的页边距顶部。
尝试给
#cssmenu
一个大约5%的页边距顶部。
我更新了JSFIDLE。你能检查一下它是否对你有用吗？也许我遗漏了一些东西，但现在看起来更接近教程

“ul”标签的第一个元素必须是“li”元素


    

  • 

  • 

  • 

  • 





我更新了JSFIDLE，你能检查一下它是否适合你吗？也许我遗漏了一些东西，但现在看起来更接近教程

“ul”标签的第一个元素必须是“li”元素


    

  • 

  • 

  • 

  • 





我更新了您的代码。现在菜单出现了，并且工作正常

问题是，你在ul之后添加了一个h2标签

只有李可以在ul之后出现。这就是菜单没有正确初始化的原因

更新后的代码




@导入url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu，
#cssmenu ul，
#cssmenu ul li，
#cssmenu ul li a，
#cssmenu#菜单按钮{
保证金：0；
填充：0；
边界：0；
列表样式：无；
线高：1；
显示：块；
位置：相对位置；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
#cssmenu：之后，
#cssmenu>ul:之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
#cssmenu#菜单按钮{
显示：无；
}
#cssmenu{
宽度：自动；
字体系列：Raleway，无衬线；
线高：1；
}
#cssmenu>ul{
背景#3db2e1；
}
#cssmenu>ul>li{
浮动：左；
-webkit透视图：1000px；
-moz透视图：1000px；
透视图：1000px；
}
#cssmenu.align-center>ul{
字号：0；
文本对齐：居中；
}
#cssmenu.align-center>ul>li{
显示：内联块；
浮动：无；
}
#cssmenu.align-right>ul>li{
浮动：对；
}
#cssmenu>ul>li>a{
填充：16px 20px；
字体大小：14px；
颜色：#ffffff；
字母间距：1px；
文本转换：大写；
文字装饰：无；
背景#3db2e1；
-webkit转换：all.3s；
-moz转换：all.3s；
-o-transition:all.3s；
过渡：全部3秒；
-webkit转换来源：50%0；
-moz变换原点：50%0；
变换原点：50%0；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
变换样式：保留-3d；
}
#cssmenu>ul>li.active>a{
颜色：#dff2fa；
}
#cssmenu>ul>li:悬停

<ul>
    <li class='active'><a href='#'>Home</a></li>
    <li><a href='#'>Products</a></li>
    <li><a href='#'>Company</a></li>
    <li><a href='#'>Contact</a></li>
</ul>