Post by Niomi on Aug 30, 2017 10:16:17 GMT -8
So I have a code on my site for a push out menu. However every time I update the code and save, it works fine but seems to break the preview for the advanced style. Some previews will work, like the wrapper, if I add a background color to that, the preview works. However if I work from the visual editor and try to change the title bar colors to say.. green, it doesn't update at all.
site link
here's the code itself:
site link
here's the code itself:
<nav id="slide_menu">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</nav><button id="button">Open</button>#slide_menu {
position: fixed;
top: 0;
left: -240px;
width: 240px;
height: 100%;
background: #E87272;
}
#slide_menu ul {
padding: 0;
margin: 0;
}
#slide_menu li + li { border-top: solid 1px #f39191; }
#slide_menu li {
border-bottom: solid 1px #d56767;
list-style: none;
}
#slide_menu li a {
display: block;
padding: 20px 0;
color: #fff;
text-align: center;
text-decoration: none;
}<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
var menu = $('#slide_menu'),
menuBtn = $('#button'),
body = $(document.body),
menuWidth = menu.outerWidth();
menuBtn.on('click', function(){
body.toggleClass('open');
if(body.hasClass('open')){
body.animate({'left' : menuWidth }, 300);
menu.animate({'left' : 0 }, 300);
} else {
menu.animate({'left' : -menuWidth }, 300);
body.animate({'left' : 0 }, 300);
}
});
}); </script>
