Мобильная навигационная панель (без jquery)

Я некоторое время смотрел вокруг, как это сделать, но не могу найти достаточно хороший ответ, я нашел этот плагин jQuery под названием Sidr: здесь

Мне было интересно, есть ли простой способ: создать такой же эффект с навигационной панелью, входящей с правой стороны, но без jQuery?

2 ответа

Это решение для CSS. Работает с левой и правой сторон (оба). Это потрясающе:

http://jsfiddle.net/nicooprat/Aahqh/

Просто использует 1 строку jQuery, чтобы она работала с iOS Safari, всего одна.

$('label').click(function() {});

Проверьте это.


Взгляните на css-переходы и анимации. Здесь, в этой теме, ОП просят что-то подобное. Я мог свободно скопировать jsFiddle из ответа на этот вопрос. Посмотрите на это здесь.

HTML:

<div>
 <a href="#" target="_blank">
 
 </a>
 
</div>

CSS:

.box{
 position: relative;
 overflow: hidden;

}

.box:hover .hidden{

 left: 0px;
}

.box .hidden { 
 background: yellow;
 height: 300px; 
 position: absolute; 
 top: 0;
 left: -500px; 
 width: 500px;
 opacity: 1; 
 -webkit-transition: all 0.7s ease-out;
 -moz-transition: all 0.7s ease-out;
 -ms-transition: all 0.7s ease-out;
 -o-transition: all 0.7s ease-out;
 transition: all 0.7s ease-out;
}

licensed under cc by-sa 3.0 with attribution.