我正在尝试为小屏幕设置响应式导航栏，如何将左侧链接更改为css下拉菜单？

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. Thanks!

我怎么说，使用HTML / jQuery / Javascript / CSS，如果屏幕宽度小于808px，那么.pull-left变成一个按钮，当我点击这个按钮时，通常的内容显示在下面。谢谢！

2 个解决方案

#1

You can use @media queries to get device resolution or screen position and apply css updates based on that.

您可以使用@media查询来获取设备分辨率或屏幕位置，并根据该查询应用css更新。

Example
例

Or you can use bootstrap. Here is an example. Change the browser width and you'll see.

或者你可以使用bootstrap。这是一个例子。更改浏览器宽度，您将看到。

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

firstly you need to involve 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); (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:

var container = document.getElementbyId("navContainer"); if (isMobile) { container.innerHTML = <'mobile-template'> } else { container.innerHTML = <'default-template'>;

#1