I'm trying to add a menu I found on a tutorial to my site.
For some reason, despite no errors in the console, I just can't see the menu. I do get some of the blue blur the menu is suppoused to have in the corner of the page, but the words and bars themselvs do not appear - It looks like this:
After changing the Z index like the comments suggested, I get the following menu, which looks weird- nothing like the 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 = "";
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>
The oregon font and hurtmold font are both working properly.
What am I doing wrong?
I updated the jsfiddle can you check if is working for you? maybe i'm missing something but now looks more close to the tutorial.
The first element of "ul" tag must be a "li" element.
link to jsfiddle