CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrap
user1780729
user1780729

Reputation: 518

Make **Responsive navigation** supporting different devices such as mobile, tab and desktop

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.

Upvotes: 0

Views: 291

Answers (2)

Endre Simo
Endre Simo

Reputation: 11541

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.

Upvotes: 1

Pralhad Narsinh Sonar
Pralhad Narsinh Sonar

Reputation: 1454

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*/
}

Upvotes: 1

Related Questions