0

I have this navigation which I want to make Responsive navigation supporting different devices such as mobile, tab and desktop.

I ng-including a menu.html file in my sidebar for the mobile, and I am including the same hmtl file in my header for desktop.

The question is how to make it so that the styles for the mobile sidebar stay only on mobile and to add my second styles only for desktop.

this is the sidebar I am using for mobile: http://pages.revox.io/dashboard/latest/html/index.html then I am disabling this to show up for desktop

and I am including this menu in the header for desktop: http://pages.revox.io/dashboard/latest/html/tabs_accordian.html

enter image description here

both of the styles i need are already included in the resources of the theme.

Here is the structure I am using both for the sidebar and header right now

   <ul id="menu-lg" class="menu-items text-uppercase list-inline nav-tabs-simple" role="tablist">
        <li class="sm-m-t-20 list-unstyled active" ui-sref-active="open" data-toggle="tab">
            <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-dashboard"></i></span>
            <a class="nav-text" ui-sref="product.dashboard" data-toggle="tab">
                <span class="titl">Dashboard</span>
            </a>
        </li>
        <li class="list-unstyled" ui-sref-active="open">
            <a class="nav-text" ui-sref="product.balance">
                <span class="title">Balance</span>
            </a>
            <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-dollar"></i></span>
        </li>
        <li class="list-unstyled" ui-sref-active="open">
            <a class="nav-text" ui-sref="product.users">
                <span class="title">Users</span>
            </a>
            <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-user"></i></span>
        </li>
    </ul>

and this is the structure of the second menu that styles i need to apply to the structure on top:

<ul class="nav nav-tabs nav-tabs-simple" role="tablist">
    <li class="active"><a ui-sref="product.dashboard" data-toggle="tab"      role="tab" aria-expanded="false">Hello World</a>
    </li>
    <li class=""><a ui-sref="product.balance" data-toggle="tab" role="tab" aria-expanded="false">Hello Two</a>
    </li>
    <li class=""><a ui-sref="product.users" data-toggle="tab" role="tab" aria-expanded="true">Hello Three</a>
   </li>
</ul>

as you can see some of the classes are already merged, the menu behaves alright but there are some bugs and I am thinking that there must be a better solution for this problem.

Pralhad Narsinh Sonar
  • 1,406
  • 1
  • 14
  • 23
user1780729
  • 520
  • 1
  • 7
  • 24
  • 1
    you can have 2 css sheets one for desktop and one for mobile using breakpoints and specifying rules for each device according to their screen size. – Jax Jun 25 '15 at 12:56
  • Hi thanks for the comment. As I mentioned all of the styles are included in the resources. And you mean that I need to copy the styles for both designs and put them accordingly in media query and disable them for mobile and desktop? I have already done something like this, but as I said some bugs are present like the active part of the second menu persists in the sidebar – user1780729 Jun 25 '15 at 12:58

2 Answers2

1

You are talking about making the navigation RESPONSIVE.

You will need to use breakpoints to achieve your result over different devices.

Here are few of most commonly used break-points

@media screen and (max-width:959px){
    /*your css classes*/
}
@media screen and (max-width:640px){
    /*your css classes*/
}
@media screen and (max-width:320px){
    /*your css classes*/
}
Pralhad Narsinh Sonar
  • 1,406
  • 1
  • 14
  • 23
1

You can do it in two ways:

Either you declare in your controller a scope value, and after this you might test if the agent is a mobile or desktop. Modernizr for example has a Modernizr.touch function to test for mobile devices. In different cases you might store different values for the scope variable. 

if (Modernizr.touch) {
   $scope.isMobile = true;
} else {
   $scope.isMobile = false;
}

(If you don't want to include another library you should test by yourself: Detecting a mobile browser )

After this on your template you can use the ng-class by checking for the values stored on the scope variable.

ng-class="{'isMobile': item.isMobile, 'isDesktop' : !item.isMobile}"

Another way is to use media queries.

Community
  • 1
  • 1
Endre Simo
  • 11,330
  • 2
  • 40
  • 49
  • This is one of the paths I also wanted to go but tried to do an only css fix, because I don't want to use a lot of small js functions all try the product. But anyways this solution looks solid. I havent had a lot of experience with angular so its a bit tricky for me to understand the logic :) I will mark this question as accepted when I implement it :) – user1780729 Jun 25 '15 at 13:17