Href does not working in side menus

narjes · June 26, 2016, 6:27pm

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>

rberthome · June 27, 2016, 9:20am

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

narjes · June 27, 2016, 9:24am

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

rberthome · June 27, 2016, 9:28am

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 ?

narjes · June 27, 2016, 9:35am

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 ?!

narjes · June 27, 2016, 9:44am

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’);

});

rberthome · June 27, 2016, 9:48am

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>

jlopez90 · June 27, 2016, 9:52am

Take care: should be tab.explore … misspelling

narjes · June 27, 2016, 9:54am

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

narjes · June 27, 2016, 9:56am

i don’t understand u ,sorry ?

rberthome · June 27, 2016, 9:58am

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',
        }
    }
})

narjes · June 27, 2016, 10:05am

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 i’m starter ,

rberthome · June 27, 2016, 1:38pm

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

narjes · June 27, 2016, 3:22pm

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

sukyan · February 18, 2021, 8:36am

Excuse me i want to see the answer but i can’t see anything??

Topic		Replies	Views
Side menu link ui-sref not working ionic-v1	3	3102	November 9, 2015
Navigation from side menu doesn't work on ios and android ionic-v1	1	1321	October 29, 2015
Side menu with Tabs issue ionic-v1	32	7935	September 14, 2016
Ui-sref and changing state ionic-v1	2	1097	January 22, 2015
Ion-item href not showing back button on nav-bar when clicked ionic-v1	9	3500	May 8, 2015

Href does not working in side menus

Related topics