CSS3 Responsive Menu Dropdown are not working!

Navigation
2

Well, I want to use this menu here link

It does not work in blogger link and I have tried in several different templates as well.

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

  

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

I've put comments on the blogger with the parts of the menu, to make it a little easier. 

<!--menu-->

<!--script menu-->

<!--menu jquery-->

I already put jquery after <head> and before </body> and it did not make any difference either, and another thing I just changed in blogger, at the request of the blog, was this part of the code: 

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

For this reason: 

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

Now, I could not be more confused ... I do not know what to change or why. are the same codes in different places.

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

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

    
asked by anonymous 12.03.2016 / 12:15

2 answers

2

The menu was not working on blogger, because of this change 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

In spite of having made the modification due to 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 get them accepted, 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.

    
25.04.2016 / 09:40
0

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

    
12.03.2016 / 16:16
WebMethod with Data Model Inheritance X Composition - MySQL C # Entity