Question

你好stackoverflow的人，怎么回事？

我注意到在我的网站上，当你用一个不是全尺寸的浏览器打开它时，导航会变得有点混乱。我看到，根据浏览器的宽度，许多新网站都有将导航菜单变成“3条”符号的东西。（就像在这个wordpress主题：Olam WordPress Theme

我该怎么办？谁能给我一个提示？

谢谢！

body {
    background-color: black;
}


nav {
	padding: 12px;
	float: right;
	margin: 18px 100px;
}

nav a{
	margin-left: 12px;
	text-decoration: none;
	color: #ffffff;
	font-family: Verdana;
	font-weight: bold;
	padding: 13px;
	font-size: 75%;
	letter-spacing: .03em;
}

nav a:hover {
	color: #ffffff;
	background-color: #0ad2ad;
}

<!DOCTYPE HTML>
	<html>
		<head>
			<title>Navegation Doubt</title>
		</head>
		<body>
		<div id="container">
			<div id="first">
				<nav>
					<a href="#">Home</a>
					<a href="#">Store</a>
					<a href="#">Blog</a>
					<a href="#">Classes</a>
					<a href="#">Contact</a>
				</nav>
			</div>
		</body>
	</html>

Answer 1

我做得很好！你呢？

他们主要使用一个名为Bootstrap的CSS框架中的navbar组件（以及最简单的方法）。强烈建议您学习此框架，因为它会使您的网站响应。

此外，请务必注意您的导航栏是您网站SEO的最佳选择。

包含Bootstrap之后，你可以制作导航栏，这是一个例子：

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
          Your Cool Website
          </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">Store</a></li>
            <li><a href="#contact">Blog</a></li>
            <li><a href="#contact">Classes</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

JSFiddle

Answer 2

使用media queries根据不同条件应用不同的css规则（在您的情况下是设备的大小），基本上您首先要设计您希望支持的最小设备的站点，然后使用min从那里构建-width。

要获得三栏菜单图标，请查看font awesome，它们有一些可用于您网站的精彩图标。

许多css框架和网格系统都包含使用媒体查询构建的响应式组件，你可以找到一堆here。

如何在宽度变化时将导航菜单变为按钮？

2 个答案: