javascript - CSS Menu - Submenu on click (JS) -
i downloaded this menu. seems work good. when shrink page menu appears when click button. same subitems. subitems extends when click "+" , not "products". want make extend both li (products) , + symbol.
the problem in .js file can't make work.
(function($) { $.fn.menumaker = function(options) { var cssmenu = $(this), settings = $.extend({ title: "menu", format: "dropdown", sticky: false }, options); return this.each(function() { 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(); } } }); 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(){ $("#cssmenu").menumaker({ title: "menu", format: "multitoggle" }); }); })(jquery);@import url(http://fonts.googleapis.com/css?family=montserrat:400,700); #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 { font-family: montserrat, sans-serif; background: #333333; } #cssmenu > ul > li { float: left; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-center ul ul { text-align: left; } #cssmenu.align-right > ul > li { float: right; } #cssmenu > ul > li > { padding: 17px; font-size: 12px; letter-spacing: 1px; text-decoration: none; color: #dddddd; font-weight: 700; text-transform: uppercase; } #cssmenu > ul > li:hover > { color: #ffffff; } #cssmenu > ul > li.has-sub > { padding-right: 30px; } #cssmenu > ul > li.has-sub > a:after { position: absolute; top: 22px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu > ul > li.has-sub > a:before { position: absolute; top: 19px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } #cssmenu > ul > li.has-sub:hover > a:before { top: 23px; height: 0; } #cssmenu ul ul { position: absolute; left: -9999px; } #cssmenu.align-right ul ul { text-align: right; } #cssmenu ul ul li { height: 0; -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } #cssmenu li:hover > ul { left: auto; } #cssmenu.align-right li:hover > ul { left: auto; right: 0; } #cssmenu li:hover > ul > li { height: 35px; } #cssmenu ul ul ul { margin-left: 100%; top: 0; } #cssmenu.align-right ul ul ul { margin-left: 0; margin-right: 100%; } #cssmenu ul ul li { border-bottom: 1px solid rgba(150, 150, 150, 0.15); padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #dddddd; font-weight: 400; background: #333333; } #cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > { border-bottom: 0; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover { color: #ffffff; } #cssmenu ul ul li.has-sub > a:after { position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu.align-right ul ul li.has-sub > a:after { right: auto; left: 11px; } #cssmenu ul ul li.has-sub > a:before { position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } #cssmenu.align-right ul ul li.has-sub > a:before { right: auto; left: 14px; } #cssmenu ul ul > li.has-sub:hover > a:before { top: 17px; height: 0; } @media , (max-width: 768px), screen , (-webkit-min-device-pixel-ratio: 2) , (max-width: 1024px), screen , (min--moz-device-pixel-ratio: 2) , (max-width: 1024px), screen , (-o-min-device-pixel-ratio: 2/1) , (max-width: 1024px), screen , (min-device-pixel-ratio: 2) , (max-width: 1024px), screen , (min-resolution: 192dpi) , (max-width: 1024px), screen , (min-resolution: 2dppx) , (max-width: 1024px) { #cssmenu { width: 100%; } #cssmenu ul { width: 100%; display: none; } #cssmenu.align-center > ul { text-align: left; } #cssmenu ul li { width: 100%; border-top: 1px solid rgba(120, 120, 120, 0.2); } #cssmenu ul ul li, #cssmenu li:hover > ul > li { height: auto; } #cssmenu ul li a, #cssmenu ul ul li { width: 100%; border-bottom: 0; } #cssmenu > ul > li { float: none; } #cssmenu ul ul li { padding-left: 25px; } #cssmenu ul ul ul li { padding-left: 35px; } #cssmenu ul ul li { color: #dddddd; background: none; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > { color: #ffffff; } #cssmenu ul ul, #cssmenu ul ul ul, #cssmenu.align-right ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left; } #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before { display: none; } #cssmenu #menu-button { display: block; padding: 17px; color: #dddddd; cursor: pointer; font-size: 12px; text-transform: uppercase; font-weight: 700; } #cssmenu #menu-button:after { position: absolute; top: 22px; right: 17px; display: block; height: 4px; width: 20px; border-top: 2px solid #dddddd; border-bottom: 2px solid #dddddd; content: ''; } #cssmenu #menu-button:before { position: absolute; top: 16px; right: 17px; display: block; height: 2px; width: 20px; background: #dddddd; content: ''; } #cssmenu #menu-button.menu-opened:after { top: 23px; border: 0; height: 2px; width: 15px; background: #ffffff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #cssmenu #menu-button.menu-opened:before { top: 23px; background: #ffffff; width: 15px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #cssmenu .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid rgba(120, 120, 120, 0.2); height: 46px; width: 46px; cursor: pointer; } #cssmenu .submenu-button.submenu-opened { background: #262626; } #cssmenu ul ul .submenu-button { height: 34px; width: 34px; } #cssmenu .submenu-button:after { position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu ul ul .submenu-button:after { top: 15px; right: 13px; } #cssmenu .submenu-button.submenu-opened:after { background: #ffffff; } #cssmenu .submenu-button:before { position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; } #cssmenu ul ul .submenu-button:before { top: 12px; right: 16px; } #cssmenu .submenu-button.submenu-opened:before { display: none; } }<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>css menumaker</title> </head> <body> <div id='cssmenu'> <ul> <li><a href='#'>home</a></li> <li class='active'><a href='#'>products</a> <ul> <li><a href='#'>product 1</a> <ul> <li><a href='#'>sub product</a></li> <li><a href='#'>sub product</a></li> </ul> </li> <li><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>i sub-items centered.
ps: menu have 1 sublevel. eg: products > product 1.
i have removed sub-menu items of individual products in html since there 1 sub-level.
relevant js:
multitg = function () { cssmenu.find(".has-sub") .prepend('<span class="submenu-button"></span>') .on("click", function () { submenubutton = $(this).find("span:first"); submenubutton.toggleclass('submenu-opened'); if (submenubutton.siblings('ul').hasclass('open')) { submenubutton.siblings('ul').removeclass('open').hide(); } else { submenubutton.siblings('ul').addclass('open').show(); } }); /* 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(); } }); */ }; to center submenu items
#cssmenu > ul > li.has-sub > ul > li > { text-align: center; } (function($) { $.fn.menumaker = function(options) { var cssmenu = $(this), settings = $.extend({ title: "menu", format: "dropdown", sticky: false }, options); return this.each(function() { 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(); } } }); cssmenu.find('li ul').parent().addclass('has-sub'); multitg = function() { cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>') .on("click", function () { var submenubutton = $(this).find("span:first"); submenubutton.toggleclass('submenu-opened'); if (submenubutton.siblings('ul').hasclass('open')) { submenubutton.siblings('ul').removeclass('open').hide(); } else { submenubutton.siblings('ul').addclass('open').show(); }; }); /* 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(){ $("#cssmenu").menumaker({ title: "menu", format: "multitoggle" }); }); })(jquery);@import url(http://fonts.googleapis.com/css?family=montserrat:400,700); #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 { font-family: montserrat, sans-serif; background: #333333; } #cssmenu > ul > li { float: left; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-center ul ul { text-align: left; } #cssmenu.align-right > ul > li { float: right; } #cssmenu > ul > li > { padding: 17px; font-size: 12px; letter-spacing: 1px; text-decoration: none; color: #dddddd; font-weight: 700; text-transform: uppercase; } #cssmenu > ul > li:hover > { color: #ffffff; } #cssmenu > ul > li.has-sub > { padding-right: 30px; } #cssmenu > ul > li.has-sub > a:after { position: absolute; top: 22px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu > ul > li.has-sub > a:before { position: absolute; top: 19px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } #cssmenu > ul > li.has-sub:hover > a:before { top: 23px; height: 0; } #cssmenu > ul > li.has-sub > ul > li > { text-align: center; } #cssmenu ul ul { position: absolute; left: -9999px; } #cssmenu.align-right ul ul { text-align: right; } #cssmenu ul ul li { height: 0; -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } #cssmenu li:hover > ul { left: auto; } #cssmenu.align-right li:hover > ul { left: auto; right: 0; } #cssmenu li:hover > ul > li { height: 35px; } #cssmenu ul ul ul { margin-left: 100%; top: 0; } #cssmenu.align-right ul ul ul { margin-left: 0; margin-right: 100%; } #cssmenu ul ul li { border-bottom: 1px solid rgba(150, 150, 150, 0.15); padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #dddddd; font-weight: 400; background: #333333; } #cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > { border-bottom: 0; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover { color: #ffffff; } #cssmenu ul ul li.has-sub > a:after { position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu.align-right ul ul li.has-sub > a:after { right: auto; left: 11px; } #cssmenu ul ul li.has-sub > a:before { position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } #cssmenu.align-right ul ul li.has-sub > a:before { right: auto; left: 14px; } #cssmenu ul ul > li.has-sub:hover > a:before { top: 17px; height: 0; } @media , (max-width: 768px), screen , (-webkit-min-device-pixel-ratio: 2) , (max-width: 1024px), screen , (min--moz-device-pixel-ratio: 2) , (max-width: 1024px), screen , (-o-min-device-pixel-ratio: 2/1) , (max-width: 1024px), screen , (min-device-pixel-ratio: 2) , (max-width: 1024px), screen , (min-resolution: 192dpi) , (max-width: 1024px), screen , (min-resolution: 2dppx) , (max-width: 1024px) { #cssmenu { width: 100%; } #cssmenu ul { width: 100%; display: none; } #cssmenu.align-center > ul { text-align: left; } #cssmenu ul li { width: 100%; border-top: 1px solid rgba(120, 120, 120, 0.2); } #cssmenu ul ul li, #cssmenu li:hover > ul > li { height: auto; } #cssmenu ul li a, #cssmenu ul ul li { width: 100%; border-bottom: 0; } #cssmenu > ul > li { float: none; } #cssmenu ul ul li { padding-left: 25px; } #cssmenu ul ul ul li { padding-left: 35px; } #cssmenu ul ul li { color: #dddddd; background: none; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > { color: #ffffff; } #cssmenu ul ul, #cssmenu ul ul ul, #cssmenu.align-right ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left; } #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before { display: none; } #cssmenu #menu-button { display: block; padding: 17px; color: #dddddd; cursor: pointer; font-size: 12px; text-transform: uppercase; font-weight: 700; } #cssmenu #menu-button:after { position: absolute; top: 22px; right: 17px; display: block; height: 4px; width: 20px; border-top: 2px solid #dddddd; border-bottom: 2px solid #dddddd; content: ''; } #cssmenu #menu-button:before { position: absolute; top: 16px; right: 17px; display: block; height: 2px; width: 20px; background: #dddddd; content: ''; } #cssmenu #menu-button.menu-opened:after { top: 23px; border: 0; height: 2px; width: 15px; background: #ffffff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #cssmenu #menu-button.menu-opened:before { top: 23px; background: #ffffff; width: 15px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #cssmenu .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid rgba(120, 120, 120, 0.2); height: 46px; width: 46px; cursor: pointer; } #cssmenu .submenu-button.submenu-opened { background: #262626; } #cssmenu ul ul .submenu-button { height: 34px; width: 34px; } #cssmenu .submenu-button:after { position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu ul ul .submenu-button:after { top: 15px; right: 13px; } #cssmenu .submenu-button.submenu-opened:after { background: #ffffff; } #cssmenu .submenu-button:before { position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; } #cssmenu ul ul .submenu-button:before { top: 12px; right: 16px; } #cssmenu .submenu-button.submenu-opened:before { display: none; } }<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>css menumaker</title> </head> <body> <div id='cssmenu'> <ul> <li><a href='#'>home</a></li> <li class='active'><a href='#'>products</a> <ul> <li><a href='#'>product 1</a> </li> <li><a href='#'>product 2</a> </li> </ul> </li> <li><a href='#'>about</a></li> <li><a href='#'>contact</a></li> </ul> </div> </body> <html>
Comments
Post a Comment