У меня есть меню, которое мне нужно спрятать за аркой.
Мне нужно, чтобы он отставал от черного, но над синим, который представляет собой арку (хотя по этой картинке вы этого не можете сказать).
Я использую пользовательский интерфейс материала и мой CSS для appBar, а арка ('&: after') выглядит так.
appBar: {
backgroundColor: '#000',
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
alignItems: 'center',
'&:after': {
content: '""',
height: '50px',
width: '110%',
background: '#fff',
borderTopLeftRadius: '50% 40%',
borderTopRightRadius: '50% 40%',
backgroundColor: '#00587E',
boxShadow: 'inset 0 2px 2px #FFFFFF5C',
},
},
А вот и меню, если поможет.
menu: {
width: drawerWidth,
flexShrink: 0,
backgroundColor: '#FFFFFF',
boxShadow: '0px 3px 6px #FFFAFA61',
},
drawerPaper: {
top: '48px',
width: drawerWidth,
height: 232,
},
drawerHeader: {
display: 'flex',
alignItems: 'left',
...theme.mixins.toolbar,
justifyContent: 'flex-start',
},
CodeSandBox: https://codesandbox.io /s/header-with-menu-b6nz5?file=/src/Header/Header.tsx
Любая помощь в сокрытии меню поможет.
1 ответ
Вы можете сделать Drawer дочерним по отношению к синему контейнеру (тот, у которого есть дуги - обратите внимание, что это означает, что вы должны удалить псевдоэлемент на панели приложений и сделать синий контейнер элементом React). Таким образом, у синего контейнера будет свойство overflow: hidden.
См. Мои комментарии к приведенному ниже коду для понимания.
<div className={classes.blueContainer}>
<Drawer/>
</div>
blueContainer: {
top: "42px",
overflow: "hidden", // hide the overflowing drawer
transform: "scale(1)", // the drawer is poition fixed, therefore this will be its new containing element
width: "100%",
height: "240px", // the height is so that the rest of the drawer would not overflow
zIndex: 10, // the blue container needs to have higher stack context than appbar
position: "fixed",
borderTopLeftRadius: "48% 9%",
borderTopRightRadius: "48% 9%",
"&:before": {
// reassigned the background to a pseudo element because of the blue container height
content: '""',
display: "block",
boxShadow: "inset 0 2px 2px #FFFFFF5C",
backgroundColor: "#00587E",
borderTopLeftRadius: "50% 40%",
borderTopRightRadius: "50% 40%",
top: "110px",
height: "60px"
}
}
