导航栏移到了侧边

2026年9月4日 designdevlogsveltekit

顶部栏感觉拥挤

从开始有一个正常的顶部导航栏,家,归档,关于,那种东西在顶部的一排。从未喜欢过。感觉像它在和页眉艺术竞争空间,在一个更宽的屏幕上就只是链接两边的这个尴尬的空栏条。

改成侧边栏代替。导航现在住在左边下来,页眉艺术得到页面的顶部对它自己。

每个部分一个小图标

一旦它是侧边栏我有空间给每个链接它自己的小像素图标而不仅仅是文本。做了每个部分的小字形,一个宝箱为归档感觉像明显的选择(旧的帖子,挖过他们),某些其他对于关于,某些对于接触。没什么花哨的,16x16像素图标,但它使侧边栏感觉更少像一个普通的链接列表。

The sidebar nav, with a small pixel icon per section

移动bug

在SvelteKit中构建这个,对我仍然相当新,而侧边栏在桌面上看起来不错我全部工作时间。检查了它在我的电话上几乎作为一个思考后的念头,而移动菜单完全off在侧边的一边呈现,像它存在但被定位某个地方离开可见的页面。你可以告诉它在那边因为页面会轻微shift当它打开时,只是什么都没出现。

花了一段时间来追踪。结果下拉菜单从未有过一个定位的祖先来对它自己衡量:

/* before: header had no position set, so the dropdown below measured
   itself against the viewport instead of the header */
.site-header {
}

.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
}
/* after: give the dropdown something real to anchor to */
.site-header {
	position: relative;
}

菜单现在滑入适当而且实际上停留在屏幕上当它应该是可见的。

小bug,但那种如果你只在你的笔记本上测试是看不见的。注意到那对我自己向前,在调用某些东西做之前检查电话。

侧边栏无论如何保持,我更喜欢它比顶部栏曾经看起来的。

0 条评论

登录 后即可评论。

登录

忘记密码?

还没有账号?