Получение некоторых проблем, связанных с пользовательским интерфейсом, используя Angular.js и CSS

0

У меня есть одна проблема. У меня есть одна навигационная панель на моей странице. Пока я посещаю каждое меню, навигационная панель дрожит. Позвольте мне объяснить мой код ниже.

  <ul class="nav navbar-nav">
    <li ui-sref-active="active"><a ui-sref="dashboard">Home</a></li>
    <li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li> 
    <li  ng-class="{'active open': $state.includes('dashboard.res')}">
    <a ui-sref="dashboard.res.userrole">Resource Management</a>

    </li>
    <li ng-class="{'active open': $state.includes('dashboard.deptmanagement')}"><a ui-sref="dashboard.deptmanagement.stream" >Department Management</a></li>
    <li ng-class="{'active open': $state.includes('dashboard.user')}"><a ui-sref="dashboard.user.usermanagement">User Management</a></li>
    <li ng-class="{'active open': $state.includes('dashboard.plan')}"><a ui-sref="dashboard.plan.timetable">Plan Management</a></li>
    </ul>
<div class="row" style="padding-top:120px;"  ui-view>
</div>

Здесь мое каждое меню сверху содержит некоторую форму и операцию CRUD. Когда пользователь нажимает на каждое меню, эта панель слегка встряхивает стороной в сторону. Здесь мне нужно, когда пользователь нажмет на любое из меню, которое должно произойти, как это означает, что меню бар останется постоянным. Пожалуйста, помогите мне решить эту проблему.

  • 0
    Нужно больше кода, чем это. Можете ли вы настроить пример на codepen?
  • 0
    поделитесь своим CSS тоже с HTML
Показать ещё 1 комментарий
Теги:

1 ответ

0

мое предложение в соответствии с вашим выражением "Когда пользователь нажимает на каждое меню, эта панель слегка дрожит из стороны в сторону ".

you need move your <ul> navbar code to, out of <ui-view>.

пример

<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="dashboard">Home</a></li>
<li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li> 
<li ng-class="{'active open': $state.includes('dashboard.res')}"><a ui-sref="dashboard.res.userrole">Resource Management</a></li>
<li ng-class="{'active open': $state.includes('dashboard.deptmanagement')}"><a ui-sref="dashboard.deptmanagement.stream" >Department Management</a></li>
<li ng-class="{'active open': $state.includes('dashboard.user')}"><a ui-sref="dashboard.user.usermanagement">User Management</a></li>
<li ng-class="{'active open': $state.includes('dashboard.plan')}"><a ui-sref="dashboard.plan.timetable">Plan Management</a></li>
</ul>

<div ui-view></div>
Поделиться
  • 0
    Мне не ясно из вашего ответа. Независимо от того, какой код я разместил, это всего лишь штрих-код Nav.Rest кода для страницы также там, который я не опубликовал. Таким образом, общая страница с панелью навигации отображается внутри <ui-view>
  • 0
    да, ваш общий код страницы, включая код навигационной панели, находится внутри <ui-view>. проблема возникает, когда вы переходите с одного URL-адреса на другой, каждый раз, когда содержимое <ui-view> перезаписывается, в этот раз <ul> navbar также перезаписывает, вот почему вы наблюдаете легкое сотрясение. так что если вы переместите код навигационной панели <ul> выше <ui-view> (вне), то в код <ui-view> будет вставлен только код страницы, и код навигационной панели <ul> не будет перерисован (поэтому что ты не увидишь тряску).
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню