首页 前端知识 这个css布局样式真巧妙啊,react导航栏组件:Headmenu实现

这个css布局样式真巧妙啊,react导航栏组件:Headmenu实现

2024-02-09 20:02:37 前端知识 前端哥 384 725 我要收藏

前言

HeadMenu的样式如下:

其中核心功能百分之95%是靠css实现的,参考的T-deisgn的源码,感觉比较巧妙,并且代码很容易理解,分享一下。

非常有意思的css布局

上图这部分布局是css实现的,同志们,你们有思路怎么实现不?首先提醒是绝对定位,你去访问的各种官网的导航栏的绝大多数都是绝对定位,因为你不可能说我展开菜单把下面的dom元素撑下去,是吧!

我们来说布局这个css的难点在哪里!先把基本的数据结构交代一下 用数据结构表示一下:

{name: '电器', // Submenu组件children: [{name: '电视', // Submenu组件children: [{name: '索尼电视' // MenuItem组件},{name: '华为电视' // MenuItem组件}]},{name: '冰箱' // MenuItem组件}]
} 

如上,导航栏组件主要由Submenu组件和MenuItem组件组成。

难点一 绝对定位的元素的父元素如果是inline-block,并且没设置宽度,那么这个绝对定位的元素宽度就是0,高度也是0

我在看源码的时候被一个css搞的有点懵,我们简化一下问题,jsx的结构如下:

 <div className="head-menu"><div className="submenu"><div className="menu__item">电器</div><divclassName="menu__popup">下拉框内容</div></div></div> 

css如下:

.head-menu {margin: 0;padding: 0;position: relative;height: 30px;
}
.submenu {position: relative;
}
.menu__popup {position: absolute;
} 

结果如下:

我们往

.head-menu {margin: 0;padding: 0;position: relative;height: 30px;
} 

.head-menu的css中加一条display: flex, 表现如下:

这是咋回事呢?

我们肯定知道是flex的问题,到底为啥会导致这样的问题?如何解决呢?

flex的元素,包裹的子元素的display可以认为变成了inline-block。对于我们这个案例来说就是类名为submenu的元素由块元素变为了inline-block,并且它没有设置宽度。

我们接着看绝对定位的元素,

.menu__popup {position: absolute;
} 

也就是类名menu__popup的元素,它的上一级定位元素是submenu,因为他没有宽度所以自己也没有宽度了。

但为啥宽度又跟”电器“文字一样宽呢?因为电器这个文字的父级是submenu,它把submenu撑开了,所以submenu的宽度就是电器(电器是Submenu组件的标题,如果没有它撑开宽度,那么Submenu宽度就是0了)的宽度。

是不是有点绕!简单记住就是绝对定位的元素的父级(父级只有它一个子元素的话)是inline-block时候,绝对定位元素的宽度就是0,高度也是0。(我们这里是因为本身文字有最小宽度)

怎么解决呢,只有显式的给绝对定位元素宽高。

难点二 如何动态的控制样式的增加和删除

这个问题比较简单,目的是为了第3个难点做铺垫。

我的需求如下图,鼠标移入电器显示下拉框,移除关闭下拉框

在实现代码之前,先写一个工具类,目的是为了css能够动态改变(相当于是乞丐版的classnames这个库)

function classnames(v): string {const classNames = [];for(let i = 0; i < v.length, i++){if(typeof k === 'string') {classNames.push(k);continue;}// 这里判断是普通对象写法有点问题,表达这个意思吧if(typeof k === 'object') { Object.keys(v).forEach((k) => { else if (v[k]) {classNames.push(k);}}); }}
 return classNames.join(' ');
} 

用法如下:

const Demo = (props) => {const [isOpen, setOpen] = useState(false);return <div className={classnames({'opened': isOpen,},hello')}></div>
} 

看到了吗isOpen可以动态的控制css的样式。

接着我们回到难点2问题本身,如何动态增删css类名。

好了,我们接着用css实现文章开头说的那个样式吧, 核心原理就是:

1、鼠标进入submenu的时候,触发mouseEnter事件,此时把变量open设置为true

2、鼠标离开submenu的时候,触发mouseLeave事件,此时把变量open设置为false

3、open控制着css变量is-opened的增加和删除(is-opened这个css可以看做display: block,默认submenu类上displyy:none),所以移入就display: block了

export default function App() {const [open, setOpen] = useState(false);return (<div className="head-menu"><divclassName={classnames({"is-opened": open},"submenu")}onMouseEnter={() => setOpen(true)}onMouseLeave={() => setOpen(false)}><div className="menu__item">电器</div><divclassName={classnames("menu__popup", {"is-opened": open})}>下拉框内容</div></div></div>);
} 

难点三 移入空隙为啥下拉框没有关闭

Submenu组件和Menu组件之间有一段空白区域,如下图,我们鼠标移入的时候,是不是也要保持下方展开状态,要不这个menu组件也太不好用了。

这里用的小技巧就是点电器这个元素内使用一个伪类::before,去填充一个透明元素,样式如下:

.t-head-menu .t-submenu>.t-menu__item:before {content: "";display: block;position: absolute;bottom: -20px;left: 0;right: 0;height: 40px;
} 

难点四,绝对定位如何实现动态偏移

啥意思呢,如下图,这些间隔都是固定宽度,并且每一列的文字增加或者减少,这些宽度都是固定的。(这在正常的文档流里,我们设置margin-left就能实现,可是这是绝对定位,咋实现呢?)

技巧:

.menu__popup {position: absolute;top: 0;left: calc(100% + 16px);
} 

关键代码就是left,这里100%是啥意思呢,就是父元素的宽度,如下图:

好了,如果你的业务遇到类似需求,这篇文章希望能帮到你。

意外发现的一个css法则

当父容器里有 绝对定位 的子元素时,子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content 等于父元素的 content宽度

这个案例是从网上找的: 查看范例

晦涩部分,源码解析

下面是整个源码,没兴趣的朋友可以略过。

最外层的包裹元素:HeadMenu,这里我提取最关键的代码

 const HeadMenu: FC<HeadMenuProps> = (props) => {const { children, className, theme = 'light', style } = props;// classPrefix是css的前缀,自定义,比如这里叫是字符串t,也就是classPrefix=’t‘const { classPrefix } = useConfig();// 让所有menu里的Submenu和MenuItem都共享一些数据,主要用于数据间通信const { value } = useMenuContext({ ...props, children, mode: 'title' });return (<MenuContext.Provider value={value}><divclassName={classNames(`${classPrefix}-head-menu`, className)}style={{ ...style }}><div className={`${classPrefix}-head-menu__inner`}><ul className={`${classPrefix}-menu`}>{children}</ul></div></div></MenuContext.Provider>);
};

export default HeadMenu; 

我们看下上面涉及的css样式

.t-head-menu {position: relative;background-color: #fff;
}
.t-head-menu__inner {display: flex;height: 64px;
}
.t-head-menu .t-menu {flex: 1;display: flex;align-items: center;
}

.t-menu {list-style: none;padding: 0;margin: 0;
} 

接着看Submenu组件

const Submenu: FC<SubMenuWithCustomizeProps> = (props) => {// className 自定义Submenu的class// style 自定义Submenu的style// children Submenu包裹的子元素// titleSubmenu这一级的名字,也就是menu上显示的名字// value 表示某个菜单项被点击了,菜单项唯一标识const { className, style, children, title, value } = props;const { active, onChange } = useContext(MenuContext);const { classPrefix } = useConfig();const [open, setOpen] = useState(false);const popRef = useRef<HTMLUListElement>();const handleClick = () => onChange(value);// 当前二级导航激活const isActive = checkSubMenuChildrenActive(children, active) || active === value;// 鼠标移入移除会触发open变量的改变,导致类名的显示和隐藏const handleMouseEvent = (type: 'leave' | 'enter') => {if (type === 'enter') setOpen(true);else if (type === 'leave') setOpen(false);};const showPopup = React.children.toArray(children).length > 0;return (<liclassName={classNames(`${classPrefix}-submenu`, className, {[`${classPrefix}-is-opened`]: open,})}onMouseEnter={() => handleMouseEvent('enter')}onMouseLeave={() => handleMouseEvent('leave')}><divclassName={classNames(`${classPrefix}-menu__item`, {[`${classPrefix}-is-active`]: isActive,})}onClick={handleClick}style={style}><span>{title}</span></div>{showPopup && (<divclassName={classNames(`${classPrefix}-menu__popup`, {[`${classPrefix}-is-opened`]: true,})}><ul className={classNames(`${classPrefix}-menu__popup-wrapper`)}>{children}</ul></div>)}</li>);
}; 

对应的css

.t-menu .t-submenu {position: relative;
}

.t-menu__item.t-is-active {color: var(--td-font-gray-1);background-color: var(--td-gray-color-2);
}

.t-menu__item {min-width: 104px;position: relative;display: flex;align-items: center;text-align: center;cursor: pointer;text-overflow: ellipsis;box-sizing: border-box;white-space: nowrap;
}
.t-menu__popup.t-is-opened .t-menu__popup:before {content: "";display: block;position: absolute;left: -16px;width: 16px;top: 0;bottom: 0;
} 

MenuItem就很简单了,可以看做就是一个div而已

const MenuItem: FC<MenuItemProps> = (props) => {const {content,children = content,disabled,href,target = '_self',value,className,style,icon,onClick,} = props;const { classPrefix } = useConfig();

Ωconst { onChange, setState, active } = useContext(MenuContext);const handeClick = (e: React.MouseEvent<HTMLLIElement>) => {e.stopPropagation();if (disabled) return;onClick && onClick({ e });onChange(value);setState({ active: value });};return (<liclassName={classNames(`${classPrefix}-menu__item`, className, {[`${classPrefix}-is-disabled`]: disabled,[`${classPrefix}-is-active`]: value === active,})}style={{ ...style }}onClick={handleClick}>{href ? (<a href={href} target={target} className={classNames(`${classPrefix}-menu__item-link`)}><span className={`${classPrefix}-menu__content`}>{children}</span></a>) : (<span className={`${classPrefix}-menu__content`}>{children}</span>)}</li>);
}; 

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1585.html
标签
react.js
评论
发布的文章

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!