jquery - Text on a menu becomes invisible -
i'm trying add menu found on tutorial site. reason, despite no errors in console, can't see menu. of blue blur menu suppoused have in corner of page, words , bars themselvs not appear - looks this: 
after changing z index comments suggested, following menu, looks weird- nothing tutorial. 
my code:
<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 = ""; (i = 1; < 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 > { padding: 16px 20px; font-size: 14px; color: #ffffff; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; background: #3db2e1; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .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 > { 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> </i></div> phrase <br> <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> the oregon font , hurtmold font both working properly.
what doing wrong?
i updated jsfiddle can check if working you? maybe i'm missing looks more close tutorial.
the first element of "ul" tag must "li" element.
<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>
Comments
Post a Comment