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.css b/core/themes/bartik/css/style.css index db19d88..5890ec3 100644 --- a/core/themes/bartik/css/style.css +++ b/core/themes/bartik/css/style.css @@ -1568,8 +1568,46 @@ div.admin-panel .description { background-color: white; } +/* ---------- Menu toggle link ----------- */ +#menu-toggle { + display:none; + background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7); + padding: 0.7em 0 0.7em 10px; + margin:0; + text-decoration: none; + text-shadow: 0 1px #EEEEEE; + position:relative; + border: 0; + cursor: pointer; + width:100%; + text-align: left; + line-height: 22px; +} + +#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 ---------------- */ + #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..757f4fc --- /dev/null +++ b/core/themes/bartik/js/collapsible-menu.js @@ -0,0 +1,39 @@ +/** + * 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) { + + var maxWidth = 445; + + // Don't make menu collapsible if client width is greater than maxWidth. + if (Drupal.checkWidthBreakpoint(maxWidth)) { + return; + } + + // Do nothing if menu is empty. + if ($('#main-menu-links a').length == 0) { + return; + } + + var buttonTitle = Drupal.t('Menu'); + + // Append toggle button to the main menu and toggle menu. + $('#main-menu').append( + $('') + .attr('title', buttonTitle) + .click(function (e) { + e.preventDefault(); + $('#main-menu-links').slideToggle('fast'); + }) + ); + } + } +})(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'; }