reactjs-React导航栏汉堡图标无法绝对向右定位
发布时间:2022-03-29 13:48:25 267
相关标签: # node.js
我正在制作一个带有汉堡包菜单图标的React导航栏,但我不明白为什么我的图标不能绝对向右定位。Chrome dev tools指出,顶部和右侧属性(以及任何其他边距/填充属性)在我的汉堡图标(一个div元素)上都是无效的属性值,尽管我的导航菜单本身能够完全定位在右侧。
导航栏。jsx:
import React, { useState } from 'react';
import NavIcon from './NavIcon';
import NavMenu from './NavMenu';
import './navbar.css';
const Navbar = () => {
const [isOpen, setIsOpen] = useState('false');
return (
);
};
export default Navbar;
导航菜单。jsx:
import React from 'react';
import NavItem from './NavItem';
import './navbar.css';
const NavMenu = ({ isOpen }) => {
const slideIn = {
transform: () => isOpen ? 'translateX(1)' : 'translateX(0)'
};
return (
);
};
export default NavMenu;
纳维孔。jsx:
import React from 'react';
import './navbar.css';
const NavIcon = ({ isOpen, setIsOpen }) => {
const toXTop = {
transform: isOpen ? 'rotate(-45deg) translate(-5.25px, 6px)' : 'none'
};
const toXMid = {
opacity: isOpen ? '0' : '1'
};
const toXbottom = {
transform: isOpen ? 'rotate(45deg) translate(-5.25px, -6px)' : 'none'
};
return (
setIsOpen(!isOpen)}>
);
};
export default NavIcon;
纳维坦。jsx:
import React from 'react';
import './navbar.css';
const NavItem = ({ title }) => {
return (
{ title }
);
};
export default NavItem;
导航栏。css:
.Navbar__icon {
display: block;
position: absolute;
top: 5;
right: 5;
z-index: 1;
cursor: pointer;
}
.Navbar__icon--bars {
width: 25px;
height: 4px;
background-color: #666;
border-radius: 5px;
margin: 4px 0;
transition: 0.2s;
}
.Navbar__menu {
position: absolute;
width: 15em;
height: auto;
right: 0;
list-style: none;
background-color: #000;
}
.Navbar__menu--item {
font: 1rem Arial, sans-serif;
color: #999;
margin: 1em;
cursor: pointer;
}
应用程序。js只是渲染导航栏。jsx组件。
任何建议都将不胜感激。谢谢
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报