http://plnkr.co/edit/F8K66L?p=preview
我有一个li
菜单,300px
转到display:none
,而mobile_nav
按钮会亮起。
现在我的控制器中已经使用了这个
main.js
$scope.mobileMenu = function() {
var menu = document.getElementById('main_nav');
if (menu.style.display == 'block') {
menu.style.display = 'none';
} else {
menu.style.display = 'block';
}
};
如果我打开移动菜单,然后关闭它,则在调整大小时它会在更大的视图上保持关闭状态,即使我在CSS中有display:block
。如果在其中单击某个项目,还需要关闭移动菜单。
试过这个,但没有运气
的index.html
<div
ng-click="isMobileNavOpen = !isMobileNavOpen"
class="mobile_nav">
=
</div>
<nav id="main_nav" ng-init="isMobileNavOpen = true" ng-show="isMobileNavOpen">
<ul>
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
的style.css
// the button
.mobile_nav {
display: none;
}
@media all and (max-width: 300px) {
.mobile_nav {
display: block;
}
#main_nav {
display: none;
}
#main_nav li {
float: none;
margin-bottom 20px;
}
#main_nav a {
width: 100%;
}
}
答案 0 :(得分:0)
找到了完美的图书馆!
https://github.com/AnalogJ/matchmedia-ng
^这是修复我的问题的代码(需要Angular方法来检测大小)
var unregister = matchmedia.onPhone( function(mediaQueryList){
$scope.isPhone = mediaQueryList.matches;
});
必须使用覆盖来调整我的像素规格:
angular.module('myapp', ['matchmedia-ng']).config(['matchmediaProvider', function (matchmediaProvider) {
matchmediaProvider.rules.phone = "(max-width: 500px)";
matchmediaProvider.rules.desktop = "(max-width: 1500px)";
}]);
还必须继续使用2种不同的导航:/仍然会尝试使用这一点,看看我是否可以使用1导航:
<div class="mobile_nav noselect">
<div ng-click="isMobileNavOpen = !isMobileNavOpen" class="icon-menu"></div>
</div>
<nav id="main_nav">
<nav id="mobile_nav" ng-show="isMobileNavOpen">