diff --git a/core/themes/bartik/bartik.info b/core/themes/bartik/bartik.info index c0c206d..07a9918 100644 --- a/core/themes/bartik/bartik.info +++ b/core/themes/bartik/bartik.info @@ -9,6 +9,8 @@ stylesheets[all][] = css/style.css stylesheets[all][] = css/colors.css stylesheets[print][] = css/print.css +scripts[] = js/collapsible-menu.js + regions[header] = Header regions[help] = Help regions[page_top] = Page top diff --git a/core/themes/bartik/css/style-rtl.css b/core/themes/bartik/css/style-rtl.css index 2f4841b..8d0ad17 100644 --- a/core/themes/bartik/css/style-rtl.css +++ b/core/themes/bartik/css/style-rtl.css @@ -75,6 +75,11 @@ ul.tips { float: right; } +/* ---------- Menu toggle link ----------- */ +a#menu-toggle { + text-align: left; +} + /* --------------- Secondary Menu ------------ */ #secondary-menu-links { diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css index db19d88..67b0c8a 100644 --- a/core/themes/bartik/css/style.css +++ b/core/themes/bartik/css/style.css @@ -1568,8 +1568,40 @@ div.admin-panel .description { background-color: white; } +/* ---------- Menu toggle link ----------- */ +a#menu-toggle { + display:none; + background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7); + padding: 0.7em 0 0.7em 10px; + text-decoration: none; + text-shadow: 0 1px #EEEEEE; + position:relative; +} + +a#menu-toggle:after { + content:""; + background: url('../images/toggle.png') no-repeat; + width: 22px; + height: 30px; + display: inline-block; + position: absolute; + right: 10px; +} + /* ----------- media queries ------------------------------- */ +@media all and (max-width: 460px) { + /* ------------ Menu on small resolutions ---------------- */ + a#menu-toggle { + display:block; + } + + #main-menu-links { + display: none; + height: auto; + } +} + @media all and (min-width: 461px) and (max-width: 900px) { /* ------------ Header and Menus -------------------------- */ diff --git a/core/themes/bartik/images/toggle.png b/core/themes/bartik/images/toggle.png new file mode 100644 index 0000000..33551b8 --- /dev/null +++ b/core/themes/bartik/images/toggle.png @@ -0,0 +1,4 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<"iTXtXML:com.adobe.xmp "EIDATxԕ;0D"%\)}tA +38NZ7ONbuf>Wp@QK0 `Ow' ~3xj'JM$fplvfwGWA,cs7gƲ9]^}QOxD\ )>ӟ9+ VIENDB` \ No newline at end of file diff --git a/core/themes/bartik/js/collapsible-menu.js b/core/themes/bartik/js/collapsible-menu.js new file mode 100644 index 0000000..efbeb42 --- /dev/null +++ b/core/themes/bartik/js/collapsible-menu.js @@ -0,0 +1,42 @@ +/** + * Behaviors for collapsible menu. + */ +(function($) { + + /** + * Adds toggle link. + * Toggles menu on small resolutions. + * Restores menu on window width increasing. + */ + Drupal.behaviors.responsiveBartikCollapsibleMenu = { + attach: function (context, settings) { + + // We can keep menu collapsed up to width maxWidth. + var maxWidth = 445; + + // Do nothing if menu is empty. + if ($('#main-menu-links a').length == 0) { + return; + } + + // Append toggle link to the main menu. + $('#main-menu').append('' + Drupal.t('Menu') + ''); + + // Collapse/expand menu by click on link. + $('a#menu-toggle').click(function() { + $('#main-menu-links').slideToggle('fast'); + return false; + }); + + // Restore visibility settings of menu on increasing of windows width over 445px. + // Media query works with width up to 460px. But I guess we should take into account some padding. + $(window).resize(function(){ + var w = $(window).width(); + // Remove all styles if window size more than maxWidth and menu is hidden. + if(w > maxWidth && $('#main-menu-links').is(':hidden')) { + $('#main-menu-links').removeAttr('style'); + } + }); + } + } +})(jQuery); diff --git a/core/themes/bartik/template.php b/core/themes/bartik/template.php index 9a6c8a9..6b2873c 100644 --- a/core/themes/bartik/template.php +++ b/core/themes/bartik/template.php @@ -11,6 +11,10 @@ * Adds body classes if certain regions have content. */ function bartik_preprocess_html(&$variables) { + + drupal_add_library('system', 'drupal'); + drupal_add_library('system', 'jquery'); + if (!empty($variables['page']['featured'])) { $variables['attributes']['class'][] = 'featured'; }