CSS3 Responsive Menu Dropdown are not working!

Asked

Viewed 179 times

2

Well, I want to use this menu here http://codepen.io/emredenx/pen/ojcxl

It does not work on blogger http://menuteste158.blogspot.com.br/ and I tried in several different templates too.

I downloaded the file and it worked perfectly... So I thought the problem would be in blogger.. then I went to test in jsfiddle to be sure ( https://jsfiddle.net/5f6s5tcz/ ) and also did not work, I put the same codes of the files I downloaded, and the result was the same with the blogger.

If it was just the blogger, it could be code conflicts, but I I tested in 4 different places, and the problem persists in two of them...

I put comments on blogger with the menu parts, to facilitate a little more. 

<!--menu-->

<!--script menu-->

<!--menu jquery-->

I already put jquery after <head> and before the </body> and there was no difference either, and another thing I changed just on the blogger,at the request of the blog, was this part of the code:

if ($(window).width() <= mediasize) {

Why is:

if ($(window).width() &lt;= mediasize) {

Now, I couldn’t be more confused... I don’t know what to change or why. are the same codes in different places.

Obs.: The error of this code in jsfiddle was because it needed to import jquery... As in the photo, although I thought I was already importing it in this code (which is the same that was downloaded along with the menu) <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>, apparently I wasn’t.

inserir a descrição da imagem aqui

However, despite the change in blog codes, nothing has changed.

javascript jquery html css css3

2 answers

2


The menu was not working in blogger, on account of this modification in javascript:

if ($(window).width() <= mediasize) { and if ($(window).width() &lt;= mediasize) {

The code was giving this error: error Uncaught Syntaxerror: Missing) after argument list

Despite having made the modification because of the error The content of elements must consist of well-formed character data or markup.that the blogger was giving, because some characters are not accepted in the xml code.

But there is a way to make them accept, which is by adding a Cdata section. Like this:

<script>
//<![CDATA[
(function($) {
  $.fn.menumaker = function(options) {
    var cssmenu = $(this),
      settings = $.extend({
        format: "dropdown",
        sticky: false
      }, options);
    return this.each(function() {
      $(this).find(".button").on('click', function() {
        $(this).toggleClass('menu-opened');
        var mainmenu = $(this).next('ul');
        if (mainmenu.hasClass('open')) {
          mainmenu.slideToggle().removeClass('open');
        } else {
          mainmenu.slideToggle().addClass('open');
          if (settings.format === "dropdown") {
            mainmenu.find('ul').show();
          }
        }
      });
      cssmenu.find('li ul').parent().addClass('has-sub');
      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').slideToggle();
          } else {
            $(this).siblings('ul').addClass('open').slideToggle();
          }
        });
      };
      if (settings.format === 'multitoggle') multiTg();
      else cssmenu.addClass('dropdown');
      if (settings.sticky === true) cssmenu.css('position', 'fixed');
      resizeFix = function() {
        var mediasize = 700;
        if ($(window).width() > mediasize) {
          cssmenu.find('ul').show();
        }
        if ($(window).width() <= mediasize) {
          cssmenu.find('ul').hide().removeClass('open');
        }
      };
      resizeFix();
      return $(window).on('resize', resizeFix);
    });
  };
})(jQuery);

(function($) {
  $(document).ready(function() {
    $("#cssmenu").menumaker({
      format: "multitoggle"
    });
  });
})(jQuery);
//]]>
</script>

And now the menu is working normally.

0

I downloaded the files and unzipped and worked on my machine using google Chrome and firefox. This example needs jquery to work. Make sure your application is "calling" jquery.

  • Take a look at my question now, I modified it... I believe I explained it better...

Browser other questions tagged javascript jquery html css css3

You are not signed in. Login or sign up in order to post.