Question

我目前正在使我的网页响应。我正在努力使用导航栏，并且不知道从哪里开始使其适合移动设备。这就是我的导航栏的样子：

HTML：

<head>

  <link href="https://fonts.googleapis.com/css?family=Gilda+Display|Montez|Sacramento" rel="stylesheet">

</head>


<nav>
      <div class="navcontainer">
         <ul>
            <li class="right"><a href="productPage.php">Shop</a></li>
            <li class="right"><a href="">Login</a></li>
            <li><a href="index.php"><img class="logo" src="http://rubyfearless.com/wp-content/uploads/2012/08/style-insider-logo221.jpeg"></a></li>
            <li class="right"><a href="contact.php">Contact us</a></li>
            <li class="right"><a href="blog/cms.php">Blog</a></li>
         </ul>
      </div>
     </nav>

     <div class="clearfix"></div>

CSS：

html, body {
  margin: auto;
  padding: 0px;
}

.container{
    margin: 0 auto;
    width: 85%;
}

.clearfix{
    clear:both;
}


/*******************************/

/*********************HEADER*******************/



nav {
  text-align: center;
  width: 100%;
  background-color: white;
  border:2px solid black;
}

nav ul {
  padding: 0;
  margin:0;
}

nav li {
  color: black;
  display: inline-block;
  font-size: 30px;
  font-weight: 300;
  font-family: 'Sacramento', cursive;
  vertical-align: middle;
  margin: 16px 20px;
}



li a{
    text-decoration: none;
    color: black;
}

.logo{
    height:100px;
}

以下是导航栏的codepen代码：

https://codepen.io/teenicarus/pen/vZWJxX

这就是我希望它在移动设备上的样子：

我从哪里开始创建类似的结果？

我感谢所有回复。

Answer 1

您需要使用@media查询根据屏幕大小覆盖css ...如下工作示例

＆＃13;

html, body {
  margin: auto;
  padding: 0px;
}

.container{
	margin: 0 auto;
	width: 85%;
}

.clearfix{
	clear:both;
}


/*******************************/

/*********************HEADER*******************/



nav {
  text-align: center;
  width: 100%;
  background-color: white;
  border:2px solid black;
}

nav ul {
  padding: 0;
  margin:0;
}

nav li {
  color: black;
  display: inline-block;
  font-size: 30px;
  font-weight: 300;
  font-family: 'Sacramento', cursive;
  vertical-align: middle;
  margin: 16px 20px;
}



li a{
	text-decoration: none;
	color: black;
}

.logo{
	height:100px;
}
.small-screen{display:none;}
@media screen and (max-width: 768px) {
  nav li {display:block}
  .small-screen{display:block;}
   .large-screen{display:none;}
}

＆＃13;

<head>
  
  <link href="https://fonts.googleapis.com/css?family=Gilda+Display|Montez|Sacramento" rel="stylesheet">
  
</head>


<nav>
	  <div class="navcontainer">
		 <ul>
       <li class="small-screen"><a href="index.php"><img class="logo" src="http://rubyfearless.com/wp-content/uploads/2012/08/style-insider-logo221.jpeg"></a></li>
		 	<li class="right"><a href="productPage.php">Shop</a></li>
		 	<li class="right"><a href="">Login</a></li>
		    <li class="large-screen"><a href="index.php"><img class="logo" src="http://rubyfearless.com/wp-content/uploads/2012/08/style-insider-logo221.jpeg"></a></li>
		 	<li class="right"><a href="contact.php">Contact us</a></li>
		 	<li class="right"><a href="blog/cms.php">Blog</a></li>
		 </ul>
	  </div>
	 </nav>

	 <div class="clearfix"></div>

＆＃13;

Answer 2

为了制作响应式网站，而不是从头开始使用可用的框架，例如 Bootstrap 。

Bootstrap提供了一个现成的可折叠导航栏，可以自动折叠导航栏的移动屏幕并显示＆＃34; humburger-icon＆＃34;切换下拉菜单就像你想要的那样。官方文档可在此处找到：Bootstrap Nav-Bar。

您还可以在此处找到有关如何实施引导程序导航栏的工作示例和更多说明：W3Schools Bootstrap Nav-Bar。

在codepen中实际实现它有点工作，但并不难。我认为实际实现它对你有好处。如果在实现它时遇到任何特殊问题，您可以随时返回Stack Overflow。所以祝你好运。

以下是一些可能有用的其他链接：

如何使我的导航栏响应移动（包括Codepen）？

2 个答案: