如何在网格容器内构建响应式导航菜单?
问题描述:
我有一个简单的导航如何在网格容器内构建响应式导航菜单?
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
,我想其中的链接调整(水平)基于用户设备上响应。这个nav放在网格容器的子网格容器(.class {display:subgrid;}不用作它的越野车)中。
CSS网格容器如下:
.container {
grid-template-areas:
"header header header header"
"nav nav nav nav"
"main main main main"
"footer footer footer footer"
}
CSS的子网格(NAV)容器如下:
.ul {
display: grid;
grid-template-areas: "home about contact";
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 25%;
list-style-type: none;
margin: 0;
padding: 0;
}
的grid-template-areas
相应宣称:
.home {grid-area: home;}
.about {grid-area: about};
.contact {grid-area: contact};
我已经修好了这个,特别是grid-template-areas
,对于一些现在时间没有进展。我不确定是否应该完全取消subgrid container
或者我忽略了一个简单的步骤。
任何援助将不胜感激!
答
使用CSS网格进行整体布局很有意义。
使用CSS Grid作为简单的导航菜单虽然可行,但可能会过度。有一个更简单的方法来实现这个目标:Flexbox。
让您nav
电网项目还Flex容器:
nav {
display: flex;
height: 50px; /* non-essential; for demo only */
}
/* non-essential; for demo only */
a {
flex: 1;
border: 1px solid gray;
background-color: lightgray;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
<nav>
<a href="">Home</a>
<a href="">About</a>
<a href="">Contact</a>
</nav>
答
例如,下面的HTML导航栏:
<nav class="nav-menu">
<a>Item 1</a>
<a>Item 2</a>
<a>Item 3</a>
</nav>
你可以使用一个规则来设置不同的宽度
.nav-menu {
display: flex;
a {
width: 25px;
}
}
@media screen and (max-width: 500px) {
.nav-menu a {
width: 20px;
}
}
如果屏幕尺寸大于500px,@media
中的新宽度将替换以前分配的内容。
我很感谢您的回复。我根据您的建议修改了我的代码,但没有获得积极的结果。我以为我的电脑是行动越野车,所以我剥夺了除导航之外的任何东西的整个项目,它确实是响应式的。因此,我确认应用的javascript的功能,这让我想知道是否应该在主容器(display:grid)外放置
这样做(把
我发现了一个使用gridlex(flexbox-grid系统)的临时解决方案。当'display:grid'时,