Css меню выдвижное: Как создать выпадающее меню — Независимое театральное объединение "Зрительские симпатии"

Содержание

Компонент React Menu — Material-UI

Редактировать эту страницу

Меню временно отображают список вариантов.

Меню отображает список выбранного на временной поверхности. Оно появляется когда пользователь взаимодействует с кнопкой или другим элементом управления.

Простое меню

Простые меню по умолчанию открываются над якорным элементом (это поведение можно изменить с помощью props). Находясь вблизи края экрана, простое меню располагается таким образом, чтобы все элементы меню были полностью видны.

Выбор варианта должен в идеале немедленно зафиксировать его и закрыть меню.

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

<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
  Open Menu
</Button>
<Menu
 
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
>
  <MenuItem onClick={handleClose}>Profile</MenuItem>
  <MenuItem onClick={handleClose}>My account</MenuItem>
  <MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>

Выбранные меню

If used for item selection, when opened, simple menus attempt to vertically align the currently selected menu item with the anchor element, and the initial focus will be placed on the selected menu item. The currently selected menu item is set using the selected property (from ListItem). To use a selected menu item without impacting the initial focus or the vertical positioning of the menu, set the variant property to menu.

MenuList composition

The Menu component uses the Popover component internally. However, you might want to use a different positioning strategy, or not blocking the scroll. For answering those needs, we expose a MenuList component that you can compose, with Popper in this example.

The primary responsibility of the MenuList component is to handle the focus.

Customized menus

Ниже находится пример кастомизации компонента. You can learn more about this in the overrides documentation page.

The MenuItem is a wrapper around ListItem with some additional styles. You can use the same list composition features with the MenuItem component:

🎨 If you are looking for inspiration, you can check MUI Treasury’s customization examples.

Меню с максимальной высотой

Если высота меню препятствует отображению всех пунктов меню, меню можно прокручивать внутри.

Ограничения

Существует ошибка flexbox, которая предотвращает работу свойства text-overflow: ellipsis внутри flexbox. Вы можете использовать компонент Typography с noWrap, чтобы обойти эту проблему:

Change transition

Используйте другой transition.

<Button aria-controls="fade-menu" aria-haspopup="true" onClick={handleClick}>
  Open with fade transition
</Button>
<Menu
 
  anchorEl={anchorEl}
  keepMounted
  open={open}
  onClose={handleClose}
  TransitionComponent={Fade}
>
  <MenuItem onClick={handleClose}>Profile</MenuItem>
  <MenuItem onClick={handleClose}>My account</MenuItem>
  <MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>

Context menu

Вот пример контекстного меню. (Right click to open.)

Дополнительные проекты

Для более сложных вариантов использования вы можете воспользоваться:

PopupState helper

Существует сторонний пакет material-ui-popup-state, который, в большинстве случаев, заботится о состоянии всплывающего меню за вас.

<PopupState variant="popover" popupId="demo-popup-menu">
  {(popupState) => (
    <React.Fragment>
      <Button variant="contained" color="primary" {...bindTrigger(popupState)}>
        Open Menu
      </Button>
      <Menu {...bindMenu(popupState)}>
        <MenuItem onClick={popupState.close}>Cake</MenuItem>
        <MenuItem onClick={popupState.close}>Death</MenuItem>
      </Menu>
    </React.Fragment>
  )}
</PopupState>

API

<ClickAwayListener />
<Menu />
<MenuItem />
<MenuList />
<Popover />
<Popper />

LinkХодок

17 скользящих меню CSS

Коллекция бесплатных примеров кода скользящего меню HTML и CSS из codepen и других ресурсов. Обновление коллекции апреля 2019 года. 7 новых предметов.