请你知道如何使用ionic + angularJS创建一个简单的径向菜单，我尝试使用jquery + Css，但它从不起作用 感谢帮助 更新： 这是我在app.js中的代码：
angular.module(
"templates", []).run(["$templateCache", function (e) {
e.put("bookmarks.html", '<ion-view class="bookmarks-view">\n <ion-nav-title>\n <span>Factures Suivis</span>\n </ion-nav-title>\n <ion-content>\n <div class="row bookmarks-container">\n <div ng-if="bookmarks.length == 0" class="col col-center">\n <div class="empty-results">\n <i class="icon ion-bookmark"></i>\n <h3 class="no-bookmarks">There\'s nothing here yet. Start exploring!</h3>\n </div>\n </div>\n <div ng-if="bookmarks.length > 0" class="col">\n <ul class="bookmarks-list">\n <li class="bookmark-item" ng-repeat="bookmark in bookmarks">\n <a ui-sref="app.post({postId : bookmark.id})">\n <h2 class="post-title" ng-bind-html="bookmark.title | rawHtml"></h2>\n <p class="post-date">Posted <span class="post-time" am-time-ago="bookmark.date"></span></p>\n </a>\n </li>\n </ul>\n </div>\n </div>\n </ion-content>\n</ion-view>\n'), e.put("category.html", '<ion-view class="category-view">\n <ion-nav-title>\n <span>{{category.title}}</span>\n </ion-nav-title>\n <ion-content>\n\n <!-- Refresh to get the new posts -->\n <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">\n </ion-refresher>\n\n <!-- Infinit scroll -->\n <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" on-infinite="loadMoreData()" distance="1%" icon="ion-loading-c">\n </ion-infinite-scroll>\n \n\
</ion-content>\n</ion-view>\n'), e.put("contact.html", '<ion-view class="contact-view">\n <ion-nav-title>\n <span>Contact</span>\n </ion-nav-title>\n <ion-content>\n <div>\n <map data-tap-disabled="true" center="{{position.lat}},{{position.lng}}" zoom="15" disable-default-u-i="true">\n <marker\n position="{{position.lat}},{{position.lng}}"\n title="Hello Marker"\n visible="true">\n </marker>\n </map>\n </div>\n <div class="contact-content">\n <div class="">\n \n </div>\n <div class="contact-details-item">\n </div>\n <div class="contact-details-item">\n <div class="row social-networks">\n <div class="col"><a href=""><i class="icon ion-social-twitter" style="color: #37b9e1;"></i></a></div>\n <div class="col"><a href=""><i class="icon ion-social-facebook" style="color: #3e649e;"></i></a></div>\n <div class="col"><a href=""><i class="icon ion-social-dribbble" style="color: #e36a96;"></i></a></div>\n <div class="col"><a href=""><i class="icon ion-social-rss" style="color: #f18334;"></i></a></div>\n <div class="col"><a href=""><i class="icon ion-social-pinterest" style="color: #c6484a;"></i></a></div>\n </ul>\n </div>\n <div class="send-email">\n <button class="button button-outline button-block featured" ng-controller="EmailSenderCtrl" ng-click="sendContactMail()">\n Send us an email\n </button>\n </div>\n\n </div>\n </ion-content>\n</ion-view>\n'), e.put("forgot-password.html", '<ion-view class="forgot-password-view">\n <ion-nav-bar class="view-navigation">\n <ion-nav-back-button>\n </ion-nav-back-button>\n </ion-nav-bar>\n <ion-content class="padding">\n <div class="row form-heading">\n <div class="col col-center">\n <h1 class="form-title">Recover your password</h1>\n </div>\n </div>\n <div class="row form-wrapper">\n <div class="col">\n <form name="forgot_password_form" class="" novalidate>\n <div class="list input-fields">\n <label class="item item-input">\n <span class="input-label">Username</span>\n <input type="text" name="user_name" ng-model="user.userName" required>\n </label>\n <button type="submit" class="recover button button-positive button-block" ng-click="recoverPassword()" ng-disabled="forgot_password_form.$invalid">\n Recover it\n </button>\n <p ng-show="error" class="message error">{{error}}</p>\n <p ng-show="message" class="message">{{message}}</p>\n </div>\n </form>\n <div class="alternative-actions">\n <a class="log-in button button-small button-clear" ui-sref="login">\n Log In\n </a>\n <a class="sign-up button button-small button-clear" ui-sref="register">\n Créer un Compte\n </a>\n </div>\n </div>\n </div>\n </ion-content>\n</ion-view>\n'), e.put("home.html", '<ion-view class="home-view">\n <ion-nav-title>\n <span>Nouveaux Factures</span>\n </ion-nav-title>\n <ion-content>\n \n\
\n\
<!-- Refresh to get the new posts -->\n <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">\n </ion-refresher>\n\n \n <!-- Infinit scroll -->\n <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" on-infinite="loadMoreData()" distance="1%" icon="ion-loading-c">\n </ion-infinite-scroll>\n \n\
</ion-content>\n</ion-view>\n'), e.put("login.html", '<ion-view class="login-view">\n <ion-nav-bar class="view-navigation">\n <ion-nav-back-button>\n </ion-nav-back-button>\n </ion-nav-bar>\n <ion-content class="padding">\n <div class="row form-heading">\n <div class="col col-center">\n <h1 class="form-title"></h1>\n </div>\n </div>\n <div class="row form-wrapper">\n <div class="col">\n <form name="login_form" class="" novalidate>\n <div class="list input-fields">\n <label class="item item-input">\n <span class="input-label">Username</span>\n <input type="text" name="user_name" ng-model="user.userName" required>\n </label>\n <label class="item item-input" show-hide-container>\n <span class="input-label">Password</span>\n <input type="password" name="password" ng-model="user.password" required show-hide-input>\n </label>\n <button type="submit" class="login button button-block" ng-click="doLogin()" ng-disabled="login_form.$invalid">\n Log in\n </button>\n <p ng-show="error" class="message error">{{error}}</p>\n </div>\n </form>\n <div class="alternative-actions">\n <a class="forgot-password button button-small button-clear" ui-sref="forgot_password">\n Mot de passe oublié?\n </a>\n <a class="sign-up button button-small button-clear" ui-sref="register">\n Créer un Compte\n </a>\n </div>\n </div>\n </div>\n </ion-content>\n</ion-view>\n'), e.put("post.html", '<ion-view class="post-view">\n <ion-nav-title>\n <span ng-bind-html="post.title | rawHtml"></span>\n </ion-nav-title>\n <ion-content>\n <div class="post">\n <div class="card-header">\n <h1 ng-bind-html="post.title | rawHtml"></h1>\n <h2>Posted <span am-time-ago="post.date"></span> by <span class="author" ng-bind-html="post.author.name | rawHtml"></span></h2>\n </div>\n <div class="card-content" ng-bind-html="post.content | rawHtml"></div>\n </div>\n <div class="post-actions">\n <a class="card-button primary" ng-click="sharePost(post.url)">SHARE</a>\n <a ng-show="post.comment_count > 0" class="card-button comment-count">\n <i class="icon ion-chatbox"></i>{{post.comment_count}}\n </a>\n </div>\n <div class="comments">\n <div class="list">\n <a class="item item-avatar" ng-repeat="comment in comments" href="#" ng-class="{highlighted: comment.id === new_comment_id}">\n <img ng-src="{{comment.user_gravatar}}">\n <h2 ng-bind-html="comment.author.name | rawHtml"><span class="comment-date" am-time-ago="comment.date"></span></h2>\n <p class="message-content" ng-bind-html="comment.content | rawHtml"></p>\n </a>\n </div>\n </div>\n </ion-content>\n <ion-footer-bar class="new-comment post-footer bar bar-footer">\n <form name="comment_form" class="row" novalidate>\n <div class="col col-80 content col-center">\n <input class="new-comment-message" type="text" placeholder="Leave a comment..." ng-model="new_comment" required></input>\n </div>\n <div class="col col-20 button-container col-center">\n <button class="button button-clear send" type="submit" ng-click="addComment()" ng-disabled="comment_form.$invalid">\n Send\n </button>\n </div>\n </form>\n </ion-footer-bar>\n</ion-view>\n'), e.put("register.html", '<ion-view class="register-view">\n <ion-nav-bar class="view-navigation">\n <ion-nav-back-button>\n </ion-nav-back-button>\n </ion-nav-bar>\n <ion-content class="padding">\n <div class="row form-heading">\n <div class="col col-center">\n <h1 class="form-title">Créez votre Compte</h1>\n </div>\n </div>\n <div class="row form-wrapper">\n <div class="col">\n <form name="signup_form" class="" novalidate>\n <div class="list input-fields">\n <label class="item item-input">\n <span class="input-label">Username</span>\n <input type="text" name="user_name" ng-model="user.userName" required>\n </label>\n <label class="item item-input">\n <span class="input-label">Name</span>\n <input type="text" name="display_name" ng-model="user.displayName" required>\n </label>\n <label class="item item-input">\n <span class="input-label">Email</span>\n <input type="email" name="email" ng-model="user.email" required>\n </label>\n <label class="item item-input" show-hide-container>\n <span class="input-label">Password</span>\n <input type="password" name="password" ng-model="user.password" required show-hide-input>\n </label>\n <button type="submit" class="register button button-block" ng-click="doRegister()" ng-disabled="signup_form.$invalid">\n Inscription\n </button>\n <p ng-show="error" class="message error">{{error}}</p>\n </form>\n </div>\n </div>\n </div>\n </ion-content>\n</ion-view>\n'), e.put("settings.html", '<ion-view class="settings-view">\n <ion-nav-buttons side="left">\n <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>\n </ion-nav-buttons>\n <ion-nav-title>\n <span>Settings</span>\n </ion-nav-title>\n <ion-content>\n <ul class="list">\n\n <ion-toggle ng-model="notifications" toggle-class="toggle-dark">Push Notifications</ion-toggle>\n <ion-toggle ng-model="sendLocation" toggle-class="toggle-dark">Send Location</ion-toggle>\n\n <div class="item item-divider">OPTIONS</div>\n <a class="item option" ng-controller="EmailSenderCtrl" ng-click="sendFeedback()">\n <i class="icon ion-chatbox dark"></i>\n <span class="title">Send feedback</span>\n </a>\n <a class="item option" ng-controller="RateAppCtrl" ng-click="rateApp()">\n <i class="icon ion-heart assertive"></i>\n <span class="title">Rate this app</span>\n </a>\n <a class="item option" ng-controller="AdmobCtrl" ng-click="manageAdMob()">\n <i class="icon ion-social-usd"></i>\n <span class="title">AdMob</span>\n </a>\n <a class="item option" ng-controller="iAdCtrl" ng-click="manageiAd()">\n <i class="icon ion-social-usd"></i>\n <span class="title">iAd</span>\n </a>\n\n <div class="item item-divider">LEGAL</div>\n\n <a class="item" href="" ng-click="showTerms()">Terms of Service</a>\n <a class="item" href="" ng-click="showFAQS()">FAQS</a>\n <a class="item" href="" ng-click="showCredits()">Credits</a>\n\n <div class="item item-divider">ACCOUNT</div>\n <a class="item option" ng-click="showLogOutMenu()">\n <i class="icon ion-power"></i>\n <span class="title">Log out</span>\n </a>\n\n </ul>\n </ion-content>\n</ion-view>\n'), e.put("side-menu.html", '<ion-side-menus enable-menu-with-back-views="false">\n <ion-side-menu-content class="post-size-14px">\n <ion-nav-bar class="bar app-top-bar">\n <ion-nav-back-button>\n </ion-nav-back-button>\n <ion-nav-buttons side="left">\n <button class="button button-icon button-clear ion-navicon" menu-toggle="left">\n </button>\n </ion-nav-buttons>\n <ion-nav-buttons side="right">\n <button class="button button-icon button-clear ion-search" menu-toggle="right">\n </button>\n </ion-nav-buttons>\n </ion-nav-bar>\n <ion-nav-view name="menuContent"></ion-nav-view>\n </ion-side-menu-content>\n\n <ion-side-menu class="main-menu menu menu-left" side="left" width="240" is-enabled="true" style="width: 260px; z-index: 0; top: 380px; left: 130px;">\n <ion-content>\n <ion-list>\n <ion-item class="heading-item item" nav-clear menu-close ui-sref="app.settings">\n \n <div class="heading-bg">\n </div>\n <div class="heading-action item-icon-left">\n <i class="icon ion-gear-a"></i>\n <h2 class="greeting">Mon profil</h2>\n </div>\n </ion-item>\n <ion-item class="item item-icon-left" nav-clear menu-close ui-sref="app.home">\n <!-- <i class="icon ion-home"></i> -->\n <i class="icon ion-quote"></i>\n <h2 class="menu-text">Nouveaux Factures</h2>\n </ion-item>\n <ion-item class="item item-icon-left" nav-clear menu-close ui-sref="app.bookmarks">\n <i class="icon ion-bookmark"></i>\n <h2 class="menu-text">Factures Suivis</h2>\n </ion-item>\n </ion-list>\n </ion-content>\n </ion-side-menu>\n\n <ion-side-menu class="multi-level-push-menu menu menu-right" side="right" ng-controller="PushMenuCtrl" is-enabled="true" width="275" style="width: 275px; z-index: 0;left: 340px;top: 398px;">\n <ion-content has-bouncing="false" scroll="false">\n <wp-search>\n </wp-search>\n <push-menu menu="menu"></push-menu>\n </ion-content>\n </ion-side-menu>\n</ion-side-menus>\n'), e.put("walkthrough.html", '<ion-view class="walkthrough-view" cache-view="false">\n <ion-content scroll="false">\n <div class="top-content row">\n <ion-slide-box delegate-handle="walkthrough-slider" show-pager="true">\n <ion-slide>\n <div class="row slide-content">\n <div class="col">\n <h3 class="slide-h">eFacture</h3>\n <img class="slide-image" ng-src="img/ionWP1.png"/>\n <p class="slide-p">\n \n </p>\n </div>\n </div>\n </ion-slide>\n <ion-slide>\n <div class="row slide-content">\n <div class="col">\n <h3 class="slide-h">All under a beautyfull design</h3>\n <img class="slide-image" ng-src="img/ionWP2.png"/>\n </div>\n </div>\n </ion-slide>\n </ion-slide-box>\n </div>\n <div class="bottom-content row">\n <div class="col col-center">\n <a class="login button button-block" ui-sref="login">\n Log In\n </a>\n </div>\n <div class="col col-center">\n <a class="sign-up button button-block" ui-sref="register">\n Register\n </a>\n </div>\n </div>\n </ion-content>\n</ion-view>\n'), e.put("partials/credits.html", '<ion-modal-view>\n <ion-header-bar>\n <h1 class="title">Credits</h1>\n <div class="button button-clear" ng-click="credits_modal.hide()"><span class="icon ion-close"></span></div>\n </ion-header-bar>\n <ion-content>\n <div class="credits">\n \n </div>\n </ion-content>\n</ion-modal-view>\n'), e.put("partials/faqs.html", '<ion-modal-view>\n <ion-header-bar>\n <h1 class="title">FAQS</h1>\n <div class="button button-clear" ng-click="faqs_modal.hide()"><span class="icon ion-close"></span></div>\n </ion-header-bar>\n <ion-content>\n <div class="faqs">\n <ul class="list">\n <li class="faq-item">\n <h5>What is Lorem Ipsum?</h5>\n </li>\n <li class="faq-item">\n <h5></h5>\n \n</li>\n <li class="faq-item">\n <h5>Why do we use it?</h5>\n <p>\n It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. </p><p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>\n </li>\n </ul>\n </div>\n </ion-content>\n</ion-modal-view>\n'), e.put("partials/main-menu.html", '<div class="menu-wrapper">\n <nav class="mp-menu">\n <menu-level menu="menu" level="0"></menu-level>\n </nav>\n</div>\n'), e.put("partials/menu-level.html", '<div class="mp-level" ng-class="{\'mp-level-overlay\': menu.overlay, \'level-id-{{menu.id}}\':true}">\n <div class="menu-heading" ng-class="{\'has-previous\': level > 0}">\n <a class="menu-title" ng-if="level > 0" menu-close ui-sref="app.category({categoryTitle: menu.title, categoryId: menu.id})">\n <h2 class="title-text">{{menu.title}}</h2>\n <span class="title-aux">see all</span>\n </a>\n <a class="menu-title" ng-if="level == 0" href="">\n <h2 class="title-text">{{menu.title}}</h2>\n </a>\n <a ng-if="level > 0" class="menu-back icon ion-chevron-left" ng-click="backToPreviousMenu(menu, $event)" href="#">back</a>\n </div>\n <ul class="categories-list">\n <li ng-repeat="item in menu.items" class="category-item-container icon" ng-class="{\'ion-chevron-right\': item.menu}">\n <div class="category-item" ng-if="item.menu">\n <a class="category-details" ng-click="openSubMenu(item.menu, menu, $event)" href="">\n <span class="category-title">{{ item.name }}</span>\n <p class="category-description">\n {{item.description}}\n </p>\n </a>\n <recursive-menu>\n <menu-level menu="item.menu" level="childrenLevel"></menu-level>\n </recursive-menu>\n </div>\n <div class="category-item" ng-if="!item.menu">\n <a menu-close class="category-details" ui-sref="app.category({categoryTitle: item.name, categoryId: item.id})">\n <span class="category-title">{{ item.name }}</span>\n <p class="category-description">\n {{item.description}}\n </p>\n </a>\n </div>\n </li>\n </ul>\n</div>\n'), e.put("partials/my-tab.html", '<div class="tab-content" ng-show="selected">\n <ng-transclude></ng-transclude>\n <div class="search-resume">\n <div ng-show="!query">\n <h2 class="no-query">There\'s no query to search</h2>\n </div>\n <div ng-show="query">\n <h2 class="search-query">Searching for: <span class="query-text">{{ query }}</span></h2>\n </div>\n </div>\n <div class="search-results-container">\n <div ng-show="results.length == 0 && query">\n <h2 class="no-results">No results</h2>\n </div>\n <ul class="search-results-list" ng-if="results.length > 0">\n <li class="search-result-item" ng-repeat="result in results">\n <a menu-close ng-click="goToPost(result)">\n <h2 class="post-title" ng-bind-html="result.title | rawHtml"></h2>\n <p class="post-date">Posted <span class="post-time" am-time-ago="result.date"></span></p>\n </a>\n </li>\n </ul>\n </div>\n</div>\n') </ion-content> <style type="text/css">
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/*html, body {
height: 100%;
overflow: hidden;
}*/
/*body {
background: #FFFFFF;
}*/
.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 1s, z-index 0.3s, transform 1s;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.menu .btn .fa {
font-size: 3em;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu .btn:hover .fa {
color: rgba(148, 235, 235, 0.7);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.menu .btn.trigger:hover .line {
background-color: rgba(148, 235, 235, 0.7);
}
.menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
background-color: rgba(148, 235, 235, 0.7);
}
.menu .btn.trigger .line {
width: 60%;
height: 6px;
background: #000;
border-radius: 6px;
-webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 6px;
background: #000;
border-radius: 6px;
-webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, transform 0.3s;
}
.menu .btn.trigger .line:before {
top: -12px;
-webkit-transform-origin: 15% 100%;
-ms-transform-origin: 15% 100%;
transform-origin: 15% 100%;
}
.menu .btn.trigger .line:after {
top: 12px;
-webkit-transform-origin: 25% 30%;
-ms-transform-origin: 25% 30%;
transform-origin: 25% 30%;
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 80;
}
.menu.active .trigger .line {
height: 0px;
top: 45%;
}
.menu.active .trigger .line:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
width: 110%;
}
.menu.active .trigger .line:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 110%;
}
/* horrible things are happening here
for some reason nth-child(1) is always busy and elements starting from 2 */
.rotater:nth-child(1) {
-webkit-transform: rotate(-22.5deg);
-ms-transform: rotate(-22.5deg);
transform: rotate(-22.5deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateX(-10em) rotate(22.5deg);
-ms-transform: translateX(-10em) rotate(22.5deg);
transform: translateX(-10em) rotate(22.5deg);
}
.rotater:nth-child(2) {
-webkit-transform: rotate(22.5deg);
-ms-transform: rotate(22.5deg);
transform: rotate(22.5deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-22.5deg);
-ms-transform: translateX(-10em) rotate(-22.5deg);
transform: translateX(-10em) rotate(-22.5deg);
}
.rotater:nth-child(3) {
-webkit-transform: rotate(67.5deg);
-ms-transform: rotate(67.5deg);
transform: rotate(67.5deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-67.5deg);
-ms-transform: translateX(-10em) rotate(-67.5deg);
transform: translateX(-10em) rotate(-67.5deg);
}
.rotater:nth-child(4) {
-webkit-transform: rotate(112.5deg);
-ms-transform: rotate(112.5deg);
transform: rotate(112.5deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-112.5deg);
-ms-transform: translateX(-10em) rotate(-112.5deg);
transform: translateX(-10em) rotate(-112.5deg);
}
.rotater:nth-child(5) {
-webkit-transform: rotate(157.5deg);
-ms-transform: rotate(157.5deg);
transform: rotate(157.5deg);
}
.menu.active .rotater:nth-child(5) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-157.5deg);
-ms-transform: translateX(-10em) rotate(-157.5deg);
transform: translateX(-10em) rotate(-157.5deg);
}
.rotater:nth-child(6) {
-webkit-transform: rotate(202.5deg);
-ms-transform: rotate(202.5deg);
transform: rotate(202.5deg);
}
.menu.active .rotater:nth-child(6) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-202.5deg);
-ms-transform: translateX(-10em) rotate(-202.5deg);
transform: translateX(-10em) rotate(-202.5deg);
}
.rotater:nth-child(7) {
-webkit-transform: rotate(247.5deg);
-ms-transform: rotate(247.5deg);
transform: rotate(247.5deg);
}
.menu.active .rotater:nth-child(7) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-247.5deg);
-ms-transform: translateX(-10em) rotate(-247.5deg);
transform: translateX(-10em) rotate(-247.5deg);
}
.rotater:nth-child(8) {
-webkit-transform: rotate(292.5deg);
-ms-transform: rotate(292.5deg);
transform: rotate(292.5deg);
}
.menu.active .rotater:nth-child(8) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-292.5deg);
-ms-transform: translateX(-10em) rotate(-292.5deg);
transform: translateX(-10em) rotate(-292.5deg);
}
.rotater:nth-child(9) {
-webkit-transform: rotate(337.5deg);
-ms-transform: rotate(337.5deg);
transform: rotate(337.5deg);
}
.menu.active .rotater:nth-child(9) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-337.5deg);
-ms-transform: translateX(-10em) rotate(-337.5deg);
transform: translateX(-10em) rotate(-337.5deg);
}
my index.html file<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- <link rel="stylesheet" href="dist_css/stylemenu.css">-->
<link rel="stylesheet" href="dist_css/styles.css">
<script src="http://maps.google.com/maps/api/js"></script>
<script src="dist_js/modules.js"></script>
<script src="dist_js/vendor/jquery.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- <script src="dist_js/main.js"></script>-->
<script src="dist_js/app.js"></script>
</head>
<body ng-app="your_app_name" ng-strict-di>
<ion-nav-view>
<div class="menu" style="
bottom: 0px;
top: 392px;
">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-codepen"></i>
<a href="#" data-toggle="tooltip" title="Notes"><img src="img\ionic.png"
class="img-rounded"> </a>
</div>
</div>
<div class="rotater" >
<div class="btn btn-icon">
<i class="fa fa-facebook"></i>
<a ui-sref="app.articles" data-toggle="tooltip" title="Articles"><img src="img\ionic.png"
class="img-rounded">
</a>
</div>
</div></div>
</ion-nav-view>
</body>
</html>
抱歉，如果我没有将所有代码放在app.js中，因为它太长了