angular js material design layout with horizontal menu. 4 rows, 1, 2 3 columns per row. header, footer. Starter styles based on material styling and html5.
Created
April 26, 2016 21:23
-
-
Save jrohatiner/6692111a4c9b9e0a4cd1c0067c99f1e7 to your computer and use it in GitHub Desktop.
angular js responsive layout with horizontal menu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| HTML Result | |
| Edit on | |
| <html lang="en" > | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Angular Material style sheet --> | |
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> | |
| </head> | |
| <body ng-app="BlankApp" ng-cloak> | |
| <div layout="column" layout-align="center stretch"> | |
| <div class="one"> | |
| <div class="logo" >logo </div> | |
| <md-menu> | |
| <i class="material-icons"></i> | |
| <button ng-click="$mdOpenMenu()"> | |
| <a>#My site</a> | |
| </button> | |
| <md-button ng-click="$mdOpenMenu()">New action</md-button> | |
| <md-button ng-click="$mdOpenMenu()">New action</md-button> | |
| <md-button ng-click="$mdOpenMenu()">New action</md-button> | |
| <md-button ng-click="$mdOpenMenu()">New action</md-button> | |
| <md-button ng-click="$mdOpenMenu()">New action</md-button> | |
| <md-button ng-click="$mdOpenMenu()">New action</md-button> | |
| <md-button ng-click="$mdOpenMenu()">New action</md-button> | |
| <md-menu-content> | |
| </md-menu-content> | |
| </md-menu> | |
| <div layout=“row" layout-align="space-around center stretch" layout-padding layout-margin"> | |
| <div class=“flex=40” id="mid-blockone">mid-blockone</div> | |
| <div class=“flex=60”>mid-blockthree</div> | |
| </div> | |
| <div class="two">two | |
| <div layout=“row" layout-align="space-around center stretch" layout-padding layout-margin"> | |
| <div class=“flex=33”>mid-blockfour</div> | |
| <div class=“flex=33”>mid-blockfive</div> | |
| <div class=“flex=33”>mid-blocksix</div> | |
| </div> | |
| </div> | |
| <div class="three">three</div> | |
| <div layout=“row" layout-align="center stretch"> | |
| </div> | |
| <footer> | |
| <div layout="row" layout-align=" center end"> | |
| <div flex id="flex-1">First item in row</div> | |
| <div flex id="flex-2">Second item in row</div> | |
| <div flex id="flex-3">third item in row</div> | |
| <div flex id="flex-4">forth item in row</div> | |
| </footer> | |
| </div> | |
| <!-- Angular Material requires Angular.js Libraries --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> | |
| <!-- Angular Material Library --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> | |
| <!-- Your application bootstrap --> | |
| <script type="text/javascript"> | |
| /** | |
| * You must include the dependency on 'ngMaterial' | |
| */ | |
| angular.module('BlankApp', ['ngMaterial']); | |
| </script> | |
| </body> | |
| </html> | |
| <!-- | |
| Copyright 2016 Google Inc. All Rights Reserved. | |
| Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license. | |
| --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular | |
| .module('menuBarBasic', ['ngMaterial']) | |
| .config(function($mdIconProvider) { | |
| $mdIconProvider | |
| .defaultIconSet('img/icons/sets/core-icons.svg', 24); | |
| }) | |
| .filter('keyboardShortcut', function($window) { | |
| return function(str) { | |
| if (!str) return; | |
| var keys = str.split('-'); | |
| var isOSX = /Mac OS X/.test($window.navigator.userAgent); | |
| var seperator = (!isOSX || keys.length > 2) ? '+' : ''; | |
| var abbreviations = { | |
| M: isOSX ? '⌘' : 'Ctrl', | |
| A: isOSX ? 'Option' : 'Alt', | |
| S: 'Shift' | |
| }; | |
| return keys.map(function(key, index) { | |
| var last = index == keys.length - 1; | |
| return last ? key : abbreviations[key]; | |
| }).join(seperator); | |
| }; | |
| }) | |
| .controller('BasicCtrl', function DemoCtrl($mdDialog) { | |
| this.settings = { | |
| printLayout: true, | |
| showRuler: true, | |
| showSpellingSuggestions: true, | |
| presentationMode: 'edit' | |
| }; | |
| this.sampleAction = function(name, ev) { | |
| $mdDialog.show($mdDialog.alert() | |
| .title(name) | |
| .textContent('You triggered the "' + name + '" action') | |
| .ok('Great') | |
| .targetEvent(ev) | |
| ); | |
| }; | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html{ | |
| height: auto; | |
| } | |
| body{ | |
| height: auto; | |
| } | |
| .one { | |
| background:pink; | |
| border: 4px solid grey; | |
| Margin-top: 5px; | |
| } | |
| .two{ | |
| margin-top: 200px; | |
| margin-bottom: 200px; | |
| background:yellow; | |
| border: 4px solid grey; | |
| Margin-top: 15px; | |
| } | |
| .three{ | |
| background:lightblue; | |
| border: 4px solid grey; | |
| margin-top: 100px; | |
| margin-bottom: 100px; | |
| } | |
| #flex-1{ | |
| background: orange; | |
| border: 2px solid grey; | |
| Margin-top: 25px; | |
| } | |
| #flex-2{ | |
| background: gold; | |
| border: 2px solid grey; | |
| } | |
| #flex-3{ | |
| background: purple; | |
| border: 2px solid grey; | |
| } | |
| #flex-4{ | |
| background: green; | |
| border: 2px solid grey; | |
| Margin-top: 25px; | |
| } | |
| .logo{ | |
| margin: 20px; | |
| padding: 5px 5px; | |
| } | |
| .menuBardemoBasicUsage .page-container { | |
| padding: 16px; } | |
| .menuBardemoBasicUsage .page { | |
| margin: 0 auto; | |
| padding: 12px; | |
| max-width: 480px; | |
| box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25); } | |
| .menuBardemoBasicUsage .page h1 { | |
| text-align: center; | |
| font-size: 1rem; | |
| margin-top: 0; | |
| font-weight: normal; } | |
| .menuBardemoBasicUsage .page p { | |
| line-height: 1rem; | |
| } | |
| #flex-1,#flex-2,#flex-3,#flex-4{ | |
| text-align: center; | |
| color: #222; | |
| font-weight: normal; | |
| font-family: open sans; | |
| } | |
| footer{ | |
| margin-top: 300px; | |
| bottom:0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment