Href does not working in side menus


#1

Hello,please i have problm with the list of side menu,the links not working,but it was working last day ! (when i click in item ,it not working)
this my code :

  <ion-pane ion-side-menu-content >
    <ion-nav-bar class="bar-dark" animation="nav-title-slide-ios7">
      <ion-nav-back-button> </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </ion-pane>


  <ion-side-menu side="left" >
    
    <ion-content class="full-page-bckg-menu">
      <ion-list >
        <a class="item" href="#/tab.home" menu-close>Home</a>
        <ion-item  ui-sref="tab.profil" ><i class="icon ion-android-person  "></i> Mon espace
        </ion-item>
        <ion-item href="#/tab/airport"><i class="icon ion-android-plane "></i> Aéroports
         </ion-item>
        <ion-item href="#/tab/infos" ><i class="icon ion-ios-list "></i> Devices
         </ion-item>

        
    <ion-item href="#/tab/exlpore" menu-close><i class="icon ion-ios-heart "></i> Exlpore</ion-item>
    <ion-item href="#/tab/exlpore" menu-close><i class="icon ion-ios-heart "></i> About </ion-item>



      </ion-list>
    </ion-content>
  </ion-side-menu>
  
</ion-side-menus>

#2

Hello,

Use the states’ names you put with $stateProvider in your app.js and use ui-sref.

I made an example : http://play.ionic.io/app/ecf25e5358b3


#3

Hi,yes i have used the same states’name in $state provider,
it’s working in the ohter pages ,but only in this page (side-menu) !,and it was working normally :frowning:


#4

I don’t get it. What’s your purpose ? What do you mean by “but only in this page (side-menu)

Can you do a codeopen or play.ionic.io to reproduce this issue ?


#5

this is
when i click in some item it not working ,? for example "Mon espace " ,i want to go to this page but it’s not clickable ,and the ui-sref ou href are correct !
it’a a long project ,how can i do a codepen or paly.ionic.io ?!


#6

the states :
$stateProvider

// setup an abstract state for the tabs directive
.state(‘tab’, {
url: ‘/tab’,

controller: 'tabsCtrl',
templateUrl: 'templates/tabs.html'

})

// Each tab has its own nav history stack:

.state(‘tab.home’, {
url: ‘/home’,
views: {
‘tab-home’: {
templateUrl: ‘templates/tab-home.html’,
controller: ‘HomeCtrl’
}
}
})
.state(‘tab.profil’,{

  url: '/profil',
  views: {
    'tab-home': {
      templateUrl: 'templates/profil.html',
      
    }
  }
})

.state(‘tab.vols’, {
url: ‘/vols’,
views: {
‘tab-vols’: {
templateUrl: ‘templates/tab-vols.html’,
controller: ‘VolCtrl’
}
}
})
.state(‘tab.airport’, {
url: ‘/airport’,
views: {
‘tab-vols’: {
templateUrl: ‘templates/airport.html’,

    }
  }
})
.state('tab.result', {
  url: '/result',
  views: {
    'tab-vols': {
      templateUrl: 'templates/result.html',
      controller:'resCtrl'
    }
  }
})

.state(‘tab.arrive’, {
url: ‘/arrive’,
views: {
‘tab-vols’: {
templateUrl: ‘templates/arrive.html’,
controller:‘resCtrl’
}
}
})
.state(‘tab.services’, {
url: ‘/services’,
views: {
‘tab-services’: {
templateUrl: ‘templates/tab-services.html’,
controller: ‘ServiceCtrl’
}
}
})
.state(‘tab.infos’,{

  url: '/infos',
  views: {
    'tab-services': {
      templateUrl: 'templates/info.html',
      controller:'InfoCtrl',
     
      
    }
  }
})

.state(‘tab.explore’, {
url: ‘/explore’,
views: {
‘tab-explore’: {
templateUrl: ‘templates/tab-explore.html’,
controller: ‘ExpCtrl’
}
}
})
;

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(’/tab/home’);

});


#7

Is your tab state abstract ?

Have you tried this ?

                  <ion-item menu-close ui-sref="tab.home">
                    Home
                  </ion-item>
                  <ion-item menu-close ui-sref="tab.profil" >
                    <i class="icon ion-android-person"></i> Mon espace
                  </ion-item>
                  <ion-item menu-close ui-sref="tab.airport">
                    <i class="icon ion-android-plane"></i> Aéroports
                  </ion-item>
                  <ion-item menu-close ui-sref="tab.infos" >
                    <i class="icon ion-ios-list"></i> Devices
                  </ion-item>
                  <ion-item menu-close ui-sref="tab.exlpore">
                    <i class="icon ion-ios-heart"></i> Exlpore
                  </ion-item>
                  <ion-item menu-close ui-sref="tab.exlpore">
                      <i class="icon ion-ios-heart"></i> About 
                  </ion-item>

#9

Take care: should be tab.explore … misspelling


#10

yes i tried it, so the last day i added many classes in css,now i delet them all ,and it’s working normal ! so the css have influence to that ?
because i overwrite many classes ,i don’t know what influence to that ?
thanks


#11

i don’t understand u ,sorry ?


#12

It could, it depends on what you changed but it shouldn’t have any impacts on it.

I want to add something about your topic.
The href method works with the url instead of the ui-sref which works with the state name.

In your case, you mixed the two. In your states configuration you named your state tab.home, the url associated is /home. With this, you have to put ui-sref=“tab.home” or href="#/home"

Try to not mixed the two of them, it’s harder to read.

The next point where you have problem is in the veiws part of your states.
The property you put in this object is the name of the ion-nav-view it will replace.

For exemple, in your tabs.html you have something like that :

<ion-nav-view name="tabContent"></ion-nav-view>

then you have to write your states like this :

.state('tab.airport', {
    url: '/airport',
    views: {
        'tabContent': {
            templateUrl: 'templates/airport.html',
        }
    }
})

#13

it’s resolved,the problm is in the class css" full-page-bckg-menu" ,i addes it to get a t list like this

but i didn’t obtain this result ,
si this is the class css :
.full-page-bckg-menu {
background-image: -webkit-linear-gradient(top, #f96332 0%, #000 100%);
background-image: -o-linear-gradient(top, #f96332 0%, #000 100%);
background-image: linear-gradient(to bottom, #f96332 0%, #000 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFF96332’, endColorstr=’#FF000000’, GradientType=0); }

.full-page-bckg-menu:after {
content: “”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(…/img/avion4.png) no-repeat center top;
background-size: cover;
opacity: 0.3;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px); }
so here what’s the problem ,why i didn’t get the same the result of that list ? and why ,when i add this class the items are not clickable ?
any explication please ? and solution for that look ,desired ,thanks
reberthome ,yes i mixed them to try wich is working ,and i’m new in ionic :slight_smile: i’m starter ,


#14

The problem is your .full-page-bckg-menu:after is over your list. that’s why you cannot do it like this.

I wrote something quickly but it could be better : http://play.ionic.io/app/ecf25e5358b3


#15

thank you so much @rberthome ,i will try it :slight_smile: wink: