Download the PHP package taitava/silverstripe-mobilemenu without Composer
On this page you can find all versions of the php package taitava/silverstripe-mobilemenu. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download taitava/silverstripe-mobilemenu
More information about taitava/silverstripe-mobilemenu
Files in taitava/silverstripe-mobilemenu
Package silverstripe-mobilemenu
Short Description An easy way to add a mobile menu button to your theme automatically when the viewport is narrow.
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package silverstripe-mobilemenu
silverstripe-mobilemenu
This is a small module that is designed to give you an easy way to:
- Add a simple mobile menu button when the viewport is narrow (= mobile view)
- Integrate mobile/desktop triggers to your existing desktop/mobile menu layout by using CSS classes
- Configure a simple breakpoint in pixels that toggles your layout (or just the menu) between desktop and mobile view modes
The module uses JavaScript to determine the mobile/desktop mode, which perhaps is not the cleanest way to do it, but is quite simple. Perhaps the JavaScript requirement could be made optional at some point by creating another method to build the mobile/desktop menu with pure CSS. At least for now, jQuery is required, but apart from that no external libraries are used.
Features
This isn't an "out of the box" solution, but instead it it's designed so that it does not drive you to use some pre-designed menu layout that makes a big learning curve to get to know how to modify the menu to suit your website's layout.
Menu button
This module offers you a simple mobile menu button that looks like this: 
. It has three bold black lines with a transparent background. If it doesn't look decent to your eye, you can always change it - athough there is no currently a simple setting for that, so just use your CSS files to override the background-image of a#mobile-menu-button. Also remember to change the element's width and height accordingly.
To make the menu button appear, put <% include MobileMenuButton %> somewhere inside your SilverStripe template, or alternatively just create a <a id="mobile-menu-button"></a> HTML element and customise it as you want.
Menu element
There is no actual menu template in this module. Use the following CSS selectors inside your layout.css or some other stylesheet to detect different modes:
-
body.mobile-width your-element-selector-here: applies when the viewport is narrower than to currently defined breakpoint (768px by default). -
body.desktop-width your-element-selector-here: applies when the viewport is wider than to currently defined breakpoint (768px by default). -
body.mobile-menu-open your-element-selector-here: applies when the mobile menu button has been clicked and the mobile menu should be visible (usually on top of all other elements on the page). body.mobile-menu-closed your-element-selector-here: applies when the mobile menu button has not been clicked (or has been clicked again) and the mobile menu should be hidden.
If you need an example for a menu that toggles between a desktop and mobile view mode, here is a simple start for your:
HTML:
CSS:
This example has not been tested. If you find bugs in it, please let me know and I will try to solve them.
The breakpoint between mobile and desktop views
The default breakpoint is 768 pixels. It doesn't affect your layout in anyway, so you can define a breakpoint just for your mobile menu if you wish, or alternatively take it to a larger use in your layout so you can perhaps leave out media queries (at least if your layout design is simple and a single breakpoint is enough for you).
To change the breakpoint, create a file named mysite/_config/mobilemenu.yml and put this inside it:
Meta viewport
If you use @media queries in you CSS, you can put <% include MobileMenuMeta %> in your <head> section. This will provide you the following meta viewport HTML code:
However this is not mandatory for this module to work.
The future
No plans yet :). Any ideas? :) PR's, Issues and feedback are all welcome!
Author
You can contact me via GitHub, my username is Taitava. The module uses the MIT license.
