Difference between revisions of "Template:ICT-Mumbai/basic"

Line 567: Line 567:
 
           else {
 
           else {
 
             mainmenu.show().addClass('open');
 
             mainmenu.show().addClass('open');
−
             if (settings.format
+
             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').hide();
 +
            }
 +
            else {
 +
              $(this).siblings('ul').addClass('open').show();
 +
            }
 +
          });
 +
        };
 +
 
 +
        if (settings.format === 'multitoggle') multiTg();
 +
        else cssmenu.addClass('dropdown');
 +
 
 +
        if (settings.sticky === true) cssmenu.css('position', 'fixed');
 +
 
 +
        resizeFix = function() {
 +
          if ($( window ).width() > 768) {
 +
            cssmenu.find('ul').show();
 +
          }
 +
 
 +
          if ($(window).width() <= 768) {
 +
            cssmenu.find('ul').hide().removeClass('open');
 +
          }
 +
        };
 +
        resizeFix();
 +
        return $(window).on('resize', resizeFix);
 +
 
 +
      });
 +
  };
 +
})(jQuery);
 +
 
 +
(function($){
 +
$(document).ready(function(){
 +
 
 +
$(document).ready(function() {
 +
  $("#cssmenu").menumaker({
 +
    title: "Menu",
 +
    format: "multitoggle"
 +
  });
 +
 
 +
  $("#cssmenu").prepend("<div id='menu-line'></div>");
 +
 
 +
var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;
 +
 
 +
$("#cssmenu > ul > li").each(function() {
 +
  if ($(this).hasClass('active')) {
 +
    activeElement = $(this);
 +
    foundActive = true;
 +
  }
 +
});
 +
 
 +
if (foundActive === false) {
 +
  activeElement = $("#cssmenu > ul > li").first();
 +
}
 +
 
 +
defaultWidth = lineWidth = activeElement.width();
 +
 
 +
defaultPosition = linePosition = activeElement.position().left;
 +
 
 +
menuLine.css("width", lineWidth);
 +
menuLine.css("left", linePosition);
 +
 
 +
$("#cssmenu > ul > li").hover(function() {
 +
  activeElement = $(this);
 +
  lineWidth = activeElement.width();
 +
  linePosition = activeElement.position().left;
 +
  menuLine.css("width", lineWidth);
 +
  menuLine.css("left", linePosition);
 +
},
 +
function() {
 +
  menuLine.css("left", defaultPosition);
 +
  menuLine.css("width", defaultWidth);
 +
});
 +
 
 +
});
 +
 
 +
 
 +
});
 +
})(jQuery);
 +
</script>
 +
</head>
 +
 
 +
<body>
 +
 
 +
<div id='cssmenu'>
 +
<ul>
 +
  <li><a href='#'>Home</a></li>
 +
  <li class='active has-sub'><a href='#'>Products</a>
 +
      <ul>
 +
        <li class='has-sub'><a href='#'>Product 1</a>
 +
            <ul>
 +
              <li><a href='#'>Sub Product</a></li>
 +
              <li><a href='#'>Sub Product</a></li>
 +
            </ul>
 +
        </li>
 +
        <li class='has-sub'><a href='#'>Product 2</a>
 +
            <ul>
 +
              <li><a href='#'>Sub Product</a></li>
 +
              <li><a href='#'>Sub Product</a></li>
 +
            </ul>
 +
        </li>
 +
      </ul>
 +
  </li>
 +
  <li><a href='#'>About</a></li>
 +
  <li><a href='#'>Contact</a></li>
 +
</ul>
 +
</div>
 +
 
 +
</body>
 +
</html>

Revision as of 12:14, 19 September 2018

Simply