Skip to content

Instantly share code, notes, and snippets.

@jrohatiner

jrohatiner/angular js responsive layout with horizontal menu.markdown

Created April 26, 2016 21:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jrohatiner/6692111a4c9b9e0a4cd1c0067c99f1e7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jrohatiner/6692111a4c9b9e0a4cd1c0067c99f1e7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jrohatiner created this gist Apr 26, 2016.
    7 changes: 7 additions & 0 deletions angular js responsive layout with horizontal menu.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    angular js responsive layout with horizontal menu
    -------------------------------------------------
    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.

    A [Pen](http://codepen.io/jrohatiner/pen/XdBLwe) by [Judith](http://codepen.io/jrohatiner) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/jrohatiner/pen/XdBLwe/license).
    85 changes: 85 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,85 @@
    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.
    -->
    39 changes: 39 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    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)
    );
    };
    });
    72 changes: 72 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    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;

    }