Автор оригинала: Chris Harrington.
Я хотел бы поговорить о том, как создать раздвижное управление меню, используя Rectjs и Меньше CSS Отказ Основная идея состоит в том, что я хочу меню, чтобы скользить с левой или правой стороны экрана на основе некоторой внешней страницы. Если вы тот человек, который хочет увидеть большую картину вместо того, чтобы устроиться на шаг за шагом, выложен для вас, я собрал демонстрационную страницу, которую вы можете увидеть здесь Отказ Сам меню будет классом js j js, который принимает только один аргумент: выравнивание, которое определяет, следует ли меню слева или правой стороне экрана.
Я собираюсь разделить статью на два раздела. Во-первых, я пойду на классы RACT, которые мы будем использовать, чтобы выполнить рендеринг меню и пункты меню, а затем мы обсудим, тем меньше CSS, которые я использую, чтобы предоставить анимацию необработанного слайда и выхода Отказ
Реагировать
Есть три класса, используемые для оказания меню: Приложение , Меню и Menuitem Отказ
Приложение
var App = React.createClass({
showLeft: function() {
this.refs.left.show();
},
showRight: function() {
this.refs.right.show();
},
render: function() {
return
;
}
});
Здесь мы добавляем два Меню в приложение: один, чтобы скользить слева, а другой, чтобы скользить справа. Это поведение указано с использованием Выравнивание опоры на Меню Декларация класса. Мы также устанавливаем Refs каждого Меню так что обработчики событий кнопки могут вызвать соответствующую Показать Методы для их скольжения.
Внутри Меню У нас есть случаи Menuitem Класс, которые являются просто записками меню, которые пользователь может нажать на выполнение некоторого действия. В этом случае действие навигации к определенному хэш, которое указано (неудивительно) с использованием хеш опоры на декларации класса.
Меню
var Menu = React.createClass({
getInitialState: function() {
return {
visible: false
};
},
show: function() {
this.setState({ visible: true });
document.addEventListener("click", this.hide.bind(this));
},
hide: function() {
document.removeEventListener("click", this.hide.bind(this));
this.setState({ visible: false });
},
render: function() {
return
{this.props.children}
;
}
});
Меню Класс несет ответственность за две вещи: рендеринг фактического меню и переключение видимости меню на основе вызовов на Показать и Скрыть методы. Получающийся стадь Способ указывает на то, что меню скрыто по умолчанию. Показать Метод устанавливает видимость в True, в то же время при подключении обработчика событий, чтобы скрыть меню, когда пользователь щелкает в любом месте в документе. Скрыть Метод скрывает меню и удаляет вышеупомянутый обработчик щелчков документа.
оказывать Метод выплескивает два равных, внутреннее из которых содержит встроенный условный для установки Видимый CSS-класс на основе сопровождающей переменной состояния. Это также устанавливает класс на основе Выравнивание опоры, который будет либо «левым» или «правильным».
Внутреннее содержание Меню оказываются из дети Пропор, который является специальным опоры, представляющим внутреннее содержание оказанного HTML-тега в родительском языке. В нашем случае это будет куча Menuitem экземпляры.
Пункт меню
var MenuItem = React.createClass({
navigate: function(hash) {
window.location.hash = hash;
},
render: function() {
return {this.props.children};
}
});
Menuitem Класс несет ответственность за две вещи: рендеринг самого элемента и обрабатывать действие клика. Первый достигнут в оказывать Способ, который строит просто простой Div, содержащий Пункт меню CSS Class и Handler Click, который называет навигация Способ с хешем дан на строительстве.
Текст пункта меню дан через дети PROP и как таковой установлен при добавлении Menuitem на страницу. В этом случае я использую совершенно незанятую «первую страницу» и т. Д. Номенклатура.
CSS.
.menu {
display:block;
@menu-width:250px;
>div {
position:absolute;
z-index:2;
top:0;
width:@menu-width;
height:100%;
.border-box;
.transition(-webkit-transform ease 250ms);
.transition(transform ease 250ms);
&.left {
background:#273D7A;
left:@menu-width*-1;
}
&.visible.left {
.transform(translate3d(@menu-width, 0, 0));
}
&.right {
background:#6B1919;
right:@menu-width*-1;
}
&.visible.right {
.transform(translate3d(@menu-width*-1, 0, 0));
}
>.menu-item {
float:left;
width:100%;
margin:0;
padding:10px 15px;
border-bottom:solid 1px #555;
cursor:pointer;
.border-box;
color:#B0B0B0;
&:hover {
color:#F0F0F0;
}
}
}
}
Примечание: Существуют различные метки CSS Mixins, которые я использую в коде выше, чтобы аннотация выездных префиксов, раздражающих поставщиков. Я оставил их, так как они довольно многословны, но если вы заинтересованы в том, как выглядят эти смеси, посмотрите на источник Демо-страница Отказ
Большая часть CSS используется для позиционирования левой и правой меню выключения экрана, а затем, чтобы оживить их, как они показаны. Я использую Меню ширина Чтобы установить максимальный размер меню, который помогает с позиционированием, чтобы меню были просто вне поля зрения, когда скрыты.
На Меню Определение класса, я установил Переход Свойство (или микс, здесь) дважды, чтобы допустить префиксы поставщиков. Я не смог полностью абстрагировать это в микне, к сожалению.
Когда меню имеет Видимый Класс прилагается к нему, A трансформировать Добавляют в Div, который скользит влево или вправо в зависимости от выравнивания.
Заключение
Это оно! Я надеюсь, что это научило вас кое-что, как вы прочитали это. Если вы хотите увидеть эти меню в действии, вы можете проверить Демо-страница , который добавляет как влево, так и правильное меню на страницу. Спасибо за прочтение!