如何仅使用CSS创建响应式导航菜单

在本文中，我们将使用仅使用HTML和CSS创建一个基本的响应式导航菜单。许多导航菜单（特别是响应式菜单）是使用HTML，CSS和Javascript的组合创建的。这个简单的CSS方法将证明Javascript并不总是必要的！

我们将创建的代码仅包含结构和基本样式所需的最重要的CSS。这使得更容易理解每??行代码的目的。这也意味着最终产品已经准备就绪，可以为您的独特定制做好准备。

HTML

如您所见，我已经声明了HTML5 doctype，并包含了基本的页面结构。body标签中唯一的内容是嵌套的无序列表。为了演示哪些顶级链接有下拉列表，我已经包含了一个unicode向下箭头（）。

仅限CSS导航菜单

主页

关于

我们是谁

我们的工作 投资组合

摄影

网络和用户界面设计

插图

新闻

联络

CSS

首先，一些基本样式的ul和li元素去除子弹点和其他列表样式。inline-block和float：left属性使列表水平显示。

/*Strip the ul of padding and list styling*/

ul {

list-style-type:none;

margin:0;

padding:0;

position: absolute;

}

/*Create a horizontal list with spacing*/

li {

display:inline-block;

float: left;

margin-right: 1px;

}

以下属性几乎完全是为了美观。如果您打算根据自己的喜好设置此菜单的样式，那么这就是用来摆弄的代码部分。

/*Style for menu links*/

li a {

display:block;

min-width:140px;

height: 50px;

text-align: center;

line-height: 50px;

font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

color: #fff;

background: #2f3036;

text-decoration: none;

}

/*Hover state for top level links*/

li:hover a {

background: #19c589;

}

/*Style for dropdown links*/

li:hover ul a {

background: #f3f3f3;

color: #2f3036;

height: 40px;

line-height: 40px;

}

/*Hover state for dropdown links*/

li:hover ul a:hover {

background: #19c589;

color: #fff;

}

接下来，下拉链接的一些样式。第一个类定义默认情况下下拉列表不可见。最后一堂课说，下拉元素将在顶级链接悬停上显示。

/*Hide dropdown links until they are needed*/

li ul {

display: none;

}

/*Make dropdown links vertical*/

li ul li {

display: block;

float: none;

}

/*Prevent text wrapping*/

li ul li a {

width: auto;

min-width: 100px;

padding: 0 20px;

}

/*Display the dropdown on hover*/

ul li a:hover + .hidden, .hidden:hover {

display: block;

}

导航菜单现在可供桌面使用，但我们还应该包括对移动用户的一些喜爱。使用媒体查询，我将目标设备的最大宽度设置为760px，并对代码进行一些更改。

/*Responsive Styles*/

@media screen and (max-width : 760px){

/*Make dropdown links appear inline*/

ul {

position: static;

display: none;

}

/*Create vertical spacing*/

li {

margin-bottom: 1px;

}

/*Make all menu links full width*/

ul li, li a {

width: 100%;

}

}

可选的最后一步

移动设备的空间有限，因此如果我们还有一个按钮提示移动用户在显示整个菜单之前单击按钮，那将会很酷。要在HTML中执行几行代码，您希望按钮显示在该代码中。

Show Menu

将以下代码添加到媒体查询之外的任何位置的CSS中：

/*Style ‘show menu’ label button and hide it by default*/

.show-menu {

font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

text-decoration: none;

color: #fff;

background: #19c589;

text-align: center;

padding: 10px 0;

display: none;

}

/*Hide checkbox*/

input[type=checkbox]{

display: none;

}

/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #menu{

display: block;

}

这个代码在媒体查询中：

/*Display ‘show menu’ link*/

.show-menu {

display:block;

}

完整的代码

HTML：

仅CSS导航菜单

Show菜单

主页 关于

我们是谁

我们做什么 投资组合

摄影

网络和用户界面设计

插图

新闻

联络

CSS：

/*Strip the ul of padding and list styling*/

ul {

list-style-type:none;

margin:0;

padding:0;

position: absolute;

}

/*Create a horizontal list with spacing*/

li {

display:inline-block;

float: left;

margin-right: 1px;

}

/*Style for menu links*/

li a {

display:block;

min-width:140px;

height: 50px;

text-align: center;

line-height: 50px;

font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

color: #fff;

background: #2f3036;

text-decoration: none;

}

/*Hover state for top level links*/

li:hover a {

background: #19c589;

}

/*Style for dropdown links*/

li:hover ul a {

background: #f3f3f3;

color: #2f3036;

height: 40px;

line-height: 40px;

}

/*Hover state for dropdown links*/

li:hover ul a:hover {

background: #19c589;

color: #fff;

}

/*Hide dropdown links until they are needed*/

li ul {

display: none;

}

/*Make dropdown links vertical*/

li ul li {

display: block;

float: none;

}

/*Prevent text wrapping*/

li ul li a {

width: auto;

min-width: 100px;

padding: 0 20px;

}

/*Display the dropdown on hover*/

ul li a:hover + .hidden, .hidden:hover {

display: block;

}

/*Style ‘show menu’ label button and hide it by default*/

.show-menu {

font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

text-decoration: none;

color: #fff;

background: #19c589;

text-align: center;

padding: 10px 0;

display: none;

}

/*Hide checkbox*/

input[type=checkbox]{

display: none;

}

/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #menu{

display: block;

}

/*Responsive Styles*/

@media screen and (max-width : 760px){

/*Make dropdown links appear inline*/

ul {

position: static;

display: none;

}

/*Create vertical spacing*/

li {

margin-bottom: 1px;

}

/*Make all menu links full width*/

ul li, li a {

width: 100%;

}

/*Display ‘show menu’ link*/

.show-menu {

display:block;

}

}

结论和现场演示

此代码在现代浏览器中应该可以正常工作，并且不依赖任何可以减慢页面加载时间的JavaScript。