我正在尝试为小屏幕提供一个响应式导航栏，如何更改指向CSS下拉菜单的左侧链接？
[英]I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?
问题描述
This is my HTML (top): 
这是我的HTML（顶部）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="stylesheet/main.css" />
<link rel="stylesheet" href="stylesheet/style.css" media="(min-width: 808px)" />
<link rel="stylesheet" href="stylesheet/mobile.css" media="(max-width: 807px)" type="text/css" />
<script src = "script.js"></script>
</head>
<body>
<div class = "nav">
<div class = "container">
<ul class="pull-left">
<li class = "content"><a href="">Home</a></li>
<li class = "content"><a href="/about">About</a></li>
<li class = "content"><a href="/projects">Projects</a></li>
<li class = "content"><a href="/recruit">recruting</a></li>
<li class = "content"><a href="/help">Help</a></li>
</ul>
<ul class="pull-right">
<li><a href = "index.html">Exatreo</a></li>
</ul>
</div>
<br />
<br />
<div class = "top_page">
<h1 class = "mainTitle">title</h1>
<p class = "slogan">Slogan</p>
</div>
</div>
And here is my current CSS for the navigation in the style.css file: 这是我当前在style.css文件中导航的CSS：
.nav li {
display: inline;
}
.nav a {
border-color: rgb(230, 230, 230);
border-style: solid;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
color: #e74c3c;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav a:hover {
border-color: #e74c3c;
transition-duration: 0.5s;
}
.nav {
margin-bottom: 2%;
}
How can I say, with HTML/jQuery/Javascript/CSS, if the screen is less than 808px wide, then the .pull-left becomes a button, and when I click this button, the usual content displays below. 我该怎么说呢，如果使用HTML / jQuery / Javascript / CSS，如果屏幕的宽度小于808px，那么.pull-left会变成一个按钮，当我单击此按钮时，通常的内容显示在下面。 Thanks! 谢谢！
2 个解决方案
解决方案1
1 已采纳 2015-12-11 13:36:08
You can use @media queries to get device resolution or screen position and apply css updates based on that. 您可以使用@media查询来获取设备分辨率或屏幕位置，并基于此应用CSS更新。
Or you can use bootstrap. 或者您可以使用引导程序。 Here is an example. 这是一个例子。 Change the browser width and you'll see. 更改浏览器宽度，您将看到。
You can create a mobile menu disabled, and based on the @media display it or not, hiding the default menu. 您可以创建一个禁用的移动菜单，并根据是否显示@media来隐藏默认菜单。
Hope that helps! 希望有帮助！
解决方案2
0 2015-12-11 13:39:36
firstly you need to involve javascript. 首先，您需要使用javascript。 one way is that you detect the navigator on page load: 1: var isMobile =(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent); 一种方法是检测页面加载时的导航器：1： var isMobile =(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent); (use which ones is suitable for you). （使用最适合您的）。 you can also use the window width properties if you do not want to design for specific devices, just for specific screens. 如果您不想仅针对特定屏幕设计特定设备，也可以使用窗口宽度属性。 And necessary functions / bindings etc for that dropdown or any type of menu. 以及该下拉菜单或任何类型菜单的必要功能/绑定等。 2: you need to have two templates for mobile and others, and according to the navigator, load one of them like: 2：您需要具有两个用于移动和其他模板的模板，并根据导航器加载其中一个模板，如：
var container = document.getElementbyId("navContainer"); if (isMobile) { container.innerHTML = <'mobile-template'> } else { container.innerHTML = <'default-template'>;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.