Каков наилучший способ показать и скрыть навигационные элементы с помощью слайдерной анимации? - PullRequest
Новая
       21

Каков наилучший способ показать и скрыть навигационные элементы с помощью слайдерной анимации?

0 голосов
/ 26 марта 2012

Хорошо, у меня есть фиксированная навигационная боковая панель с тремя значками.При нажатии на значок div (скрытый с отрицательным полем) выскользнет.При повторном нажатии кнопки отображаемый элемент будет скрыт (с помощью анимации слайдов).Это действие будет повторяться для двух других значков.

Я понимаю, что есть много разных способов выполнить это, и есть много подтверждающей документации с различными мнениями.Я попытался объявить действие через .click с .animate ({"left": "+ = 56px"}, "slow") и также написал функции для запуска onclick.Я понимаю, что могу легко сделать эту простую задачу гораздо более сложной, чем она должна быть.

Есть какие-нибудь предложения о самом чистом способе выполнить это?

Редактировать: Спасибо всем за их вклад.Переключение, хотя оно и минималистично по своей природе, не идет слева направо.Сценарий, который я использовал, был: 

   <?// Toolbar ?>
   <div id="toolbar">

      <img src="images/balihooGreyLogo.png" class="logo"/>

      <a href="#" class="textIcon" title="Edit Copy"><img src="images/textIcon.png" border="0"/></a>

      <a href="#" class="locationIcon"><img src="images/locationIcon.png"  border="0"/></a>

      <a href="#" class="mediaIcon"><img src="images/mediaIcon.png"  border="0"/></a>

      <a href="#" class="save">SAVE</a>

      <a href="#" class="export">EXPORT</a>

   </div>




  <?// Text Input Slideout Box?>
   <div class="textInput">
      <h1>Email Copy</h1>

   </div>
<script>
 $('.textIcon').click(function () {
    $('.textInput').slideToggleWidth();
});

jQuery.fn.extend({
  slideRight: function() {
    return this.each(function() {
      $(this).animate({width: 'show'});
    });
  },
  slideLeft: function() {
    return this.each(function() {
      $(this).animate({width: 'hide'});
    });
  },
  slideToggleWidth: function() {
    return this.each(function() {
      var el = $(this);
      if (el.css('display') == 'none') {
        el.slideRight();
      } else {
        el.slideLeft();
      }
    });
  }
});
</script>

1 Ответ

0 голосов
/ 26 марта 2012

Кажется, это самый простой способ сделать это. Я предполагаю, что вы скрываете их с отрицательным текстом по причинам доступности (в отличие от отображения: нет;). Единственное предложение, которое я мог бы сделать для очистки, если вы еще этого не делаете, это написать одну функцию, которая работает для всех кнопок. 

$('.icon').click(function() {
       $(this).next('.nav-item').animate({"left":"+=56px"},"slow");
)};

Еще одна вещь, на которую вы, возможно, захотите взглянуть, - это некоторые достижения в скрытии элементов, которые вы хотите прочитать с помощью программ чтения с экрана, с помощью этого кода: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility (Опять же, если предположить, что именно поэтому вы скрываете его с отрицательным идентификатором): 

.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Вероятно, из-за ответа на вопрос, но подумал, что упомяну это.

...