Css 添加媒体查询后导航栏没有响应_Css

Css 添加媒体查询后导航栏没有响应

css

Css 添加媒体查询后导航栏没有响应,css,Css,我已经为我的网站创建了一个简单的悬停导航栏。但是，它没有响应性，希望能像下面的示例图像一样响应这是一个全屏导航栏示例这是重新调整导航栏大小的示例示例源代码实际上来源于此我一直在密切关注，但我不明白为什么它不适合我这是我的HTML标记代码 <!DOCTYPE html> <html lang="en"> <head id="Head1" runat="server"> <title>iPolice</title> <

我已经为我的网站创建了一个简单的悬停导航栏。但是，它没有响应性，希望能像下面的示例图像一样响应

这是一个全屏导航栏示例

这是重新调整导航栏大小的示例

示例源代码实际上来源于此

我一直在密切关注，但我不明白为什么它不适合我

这是我的HTML标记代码

<!DOCTYPE html>

<html lang="en">
<head id="Head1" runat="server">

<title>iPolice</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<asp:ContentPlaceHolder ID="head" runat="server" >
</asp:ContentPlaceHolder>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="normalize.css" type="text/css">

<nav class="clearfix">
<div id="navbarwidth">
<ul id="nav" class="clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Department</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="Login.aspx">Login</a></li> 
</ul>
    <a href="#" id="pull">Menu</a>
</div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function () {
        var pull = $('#pull');
        menu = $('nav ul');
        menuHeight = menu.height();

        $(pull).on('click', function (e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function () {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });
</script>

在本教程中，我唯一没有遵循的是设计部分。我有自己的导航栏。这就是导航栏，我正试图使其响应

/*navbar*/
#navbarwidth {
width:70%;
position:fixed;
text-align: center;
flex-align:center;
margin:0%;
top:70px;
left:15%;
}



#nav {
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%,   #3c3c3c), to(#292929));
position:absolute;
left:0%;
top:0%;
margin: 0px;
padding: 0;
border: 1px yellow;
border-bottom: none;
width:100%;
}
#nav li a, #nav li {
text-align: center;
display: inline-block;
min-width: 70px;
}
#nav li {
list-style: none;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: #5FFB17;
border-right: 0px solid #3c3c3c;
border-left: 0px solid #292929;
border-bottom: 0px solid #232323;
border-top: 0px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

这就是我的全屏导航栏的样子

这就是当我减小浏览器的大小时发生的情况

那么它真的起作用了？您只是缺少右边的图标？首先，它的工作原理是大小可以相应地改变。然而，如果你仔细观察，两张图片的“菜单”并不相同。其次，也没有一个按钮来扩展导航栏中的其他选项。

/*navbar*/
#navbarwidth {
width:70%;
position:fixed;
text-align: center;
flex-align:center;
margin:0%;
top:70px;
left:15%;
}



#nav {
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%,   #3c3c3c), to(#292929));
position:absolute;
left:0%;
top:0%;
margin: 0px;
padding: 0;
border: 1px yellow;
border-bottom: none;
width:100%;
}
#nav li a, #nav li {
text-align: center;
display: inline-block;
min-width: 70px;
}
#nav li {
list-style: none;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: #5FFB17;
border-right: 0px solid #3c3c3c;
border-left: 0px solid #292929;
border-bottom: 0px solid #232323;
border-top: 0px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}