首頁 探索 說明
登入
pavelefimen95
/
angularProject
關註 3
讚好 0
複刻 1
Files 問題管理 0 合併請求 1 Wiki
瀏覽代碼

added menu

Pavel 6 年之前
父節點
3c2bb2a3ce
當前提交
c93ca3c4ce
共有 13 個文件被更改，包括 34424 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 0 0
      README.md
  2. 1 0
      app/app.js
  3. 11 0
      app/controllers/appRootController.js
  4. 10 0
      app/directives/navmenu.js
  5. 57 0
      app/lib/angular-animate.min.js
  6. 17 0
      app/lib/angular-route.min.js
  7. 34191 0
      app/lib/angular.js
  8. 11 0
      app/views/app-root.html
  9. 8 0
      app/views/navmenu.html
  10. 100 0
      content/css/styles.css
  11. 二進制
      content/fonts/AvenirNextLTPro-Demi.otf
  12. 二進制
      content/fonts/helveticaneuecyr-light.otf
  13. 18 0
      index.html

+ 0 - 0
README.md
查看文件


+ 1 - 0
app/app.js
查看文件 

@@ -0,0 +1 @@
 
+var app = angular.module('angularProject',[]);

+ 11 - 0
app/controllers/appRootController.js
查看文件 

@@ -0,0 +1,11 @@
 
+app.controller('appRootController',['$scope',function($scope){
 
+  $scope.isOpenMenu = false;
 
+  $scope.openMenu = function(){
 
+    if($scope.isOpenMenu){
 
+      $scope.isOpenMenu = false;
 
+    }else {
 
+      $scope.isOpenMenu = true;
 
+    }
 
+
 
+  }
 
+}])

+ 10 - 0
app/directives/navmenu.js
查看文件 

@@ -0,0 +1,10 @@
 
+app.directive('navmenu',[function(){
 
+  return {
 
+    restrict: 'E',
 
+    scope: {},
 
+    templateUrl: 'app/views/navmenu.html',
 
+    controller: function($scope){
 
+      
+    }
 
+  }
 
+}])

File diff suppressed because it is too large
+ 57 - 0
app/lib/angular-animate.min.js


File diff suppressed because it is too large
+ 17 - 0
app/lib/angular-route.min.js


File diff suppressed because it is too large
+ 34191 - 0
app/lib/angular.js


+ 11 - 0
app/views/app-root.html
查看文件 

@@ -0,0 +1,11 @@
 
+<div ng-controller="appRootController" ng-class="isOpenMenu?'open-menu' : 'close-menu'" class="navbar">
 
+  <div class="header-line">
 
+    <i class="fa fa-bars" ng-click="openMenu()"></i>
 
+    <div class="logo">
 
+      Master Kitchen
 
+    </div>
 
+    <div class="undefined-btn"></div>
 
+  </div>
 
+  <navmenu ng-class="isOpenMenu?'open-menu' : 'close-menu'"></navmenu>
 
+  <main ng-view></main>
 
+</div>

+ 8 - 0
app/views/navmenu.html
查看文件 

@@ -0,0 +1,8 @@
 
+<nav class="nav-menu">
 
+  <ul>
 
+    <li><a href="#">Option</a></li>
 
+    <li><a href="#">Option</a></li>
 
+    <li><a href="#">Option</a></li>
 
+    <li><a href="#">Option</a></li>
 
+  </ul>
 
+</nav>

+ 100 - 0
content/css/styles.css
查看文件 

@@ -0,0 +1,100 @@
 
+@font-face {
 
+  font-family: "Helvetica Neue";
 
+  src: url('../fonts/helveticaneuecyr-light.otf');
 
+}
 
+
 
+@font-face {
 
+  font-family: "AvenirNextLTPro-Demi";
 
+  src: url('../fonts/AvenirNextLTPro-Demi.otf');
 
+}
 
+
 
+body{
 
+  font-family: Helvetica;
 
+  margin: 0;
 
+}
 
+
 
+h1,h2,h3{
 
+  margin: 0;
 
+}
 
+
 
+ul,li {
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+
 
+body * {
 
+  box-sizing: border-box;
 
+}
 
+
 
+/* navbar */
 
+.navbar {
 
+  position: fixed;
 
+  top: 0;
 
+  width: 100%;
 
+  height: 50px;
 
+  background-color: #F3F3F5;
 
+}
 
+
 
+.navbar .fa-bars {
 
+  display: inline-block;
 
+  cursor: pointer;
 
+  color: #010101;
 
+  width: 10%;
 
+  padding-left: 25px;
 
+  padding-top: 15px;
 
+  text-align: left;
 
+  font-size: 22px;
 
+}
 
+
 
+.navbar .logo {
 
+  display: inline-block;
 
+  font-family: "Helvetica Neue",Arial,sans-serif;
 
+  font-weight: bold;
 
+  font-size: 25px;
 
+  letter-spacing: 0.1em;
 
+  width: 80%;
 
+  text-align: center;
 
+}
 
+
 
+.navbar .undefined-btn {
 
+  width: 80%;
 
+  display: inline-block;
 
+}
 
+/* navbar */
 
+
 
+
 
+/* navmenu */
 
+.nav-menu {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  height: 100vh;
 
+  width: 281px;
 
+  background-color: #1D1D1F;
 
+  padding: 50px;
 
+  padding-top: 100px;
 
+  transform: translateX(-281px);
 
+}
 
+
 
+.nav-menu li {
 
+  list-style-type: none;
 
+  padding: 15px 0;
 
+}
 
+
 
+.nav-menu li a {
 
+  font-family: "AvenirNextLTPro-Demi", Arial, sans-serif;
 
+
 
+  color: #fff;
 
+  text-decoration: none;
 
+}
 
+/* navmenu */
 
+
 
+.open-menu {
 
+  transition: all 1s cubic-bezier(.645,.045,.355,1);
 
+  transform: translateX(281px);
 
+}
 
+
 
+.close-menu {
 
+  transition: all 1s cubic-bezier(.645,.045,.355,1);
 
+  transform: translateX(0px);
 
+}

二進制
content/fonts/AvenirNextLTPro-Demi.otf
查看文件


二進制
content/fonts/helveticaneuecyr-light.otf
查看文件


+ 18 - 0
index.html
查看文件 

@@ -0,0 +1,18 @@
 
+<!DOCTYPE html>
 
+<html lang="en" ng-app="angularProject">
 
+  <head>
 
+    <title>TheNetNinja Angular Playlist</title>
 
+    <link href="content/css/styles.css" rel="stylesheet" type="text/css" />
 
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
+    <script src="./app/lib/angular.js"></script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
 
+    <script src="./app/lib/angular-animate.min.js"></script>
 
+    <script src="./app/app.js"></script>
 
+    <script src="./app/directives/navmenu.js"></script>
 
+    <script src="./app/controllers/appRootController.js"></script>
 
+  </head>
 
+  <body>
 
+    <app-root ng-include="'./app/views/app-root.html'"></app-root>
 
+
 
+  </body>
 
+</html>