想要将所有导航标签收集到页面上的图标缩放

时间：2017-01-28 05:44:55

标签： javascript jquery html css

我的导航栏工作正常，但当我缩放它以便它消失。

我希望在完成某些缩放时，所有导航链接都应该绑定到一个图标中。我怎样才能实现它，请帮助

我的HTML 

<!DOCTYPE html>
<html>
<head>
<title>dasdasd</title>


    <link rel="stylesheet" type="text/css" href="/css/header.css">
</head>
<header>
<body>
<nav>

<div class="box_one">
<a href="/index">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABaCAMAAACFWShxAAABC1BMVEX////oRDs6p1ZGiPH6uy17pvQ/hfFglvImevDoQjnu8/7nOjAso0znOC4doEPnNSozpVH+9uX4/Pnynpr6uST0rqr++evzp6NnuHr9uBi7zvn97eznPTz509HA4Mj4y8nU4vv82ZHqWlK43cHm8+ntd3Lwj4r+9/dTj/KLx5nmLSGt17ecz6gyf/DG2fmux/jb7t+XufEznXZRsGZ2voYipVmbsEP9y2fd6fzJtjmGrfVlqk/uui5Sp0/Wvk797MmStfY5h949pG9BnpI/lbFKk9JHlrtAoIg4qUTtbmj73+DpUEjveDTrXzj3ri71ni/1qnP2vbrR37z+xEr846y5tDzguTL80oHzkDLdnbSbAAADcklEQVRoge2WWVvaQBSGw4DBMRMyhlCCKGhkFzSWuNRq7V7RtpZql///SzoJESYLSYYkPr3Ie6UPgZdz5ptz4LiMjIyMjASp70wrHZNypXnbTdPUbXY0KEqiKBBE8gecVHfSMXZ3OneiCGGOAgqioJVvk3dNJ6SUnBcIJaG9k6xsOhEFH5UtFGE7wfrq7YFfWbRPqCR1ftOcGOiyfFK7noSr2wkpzEbMNROQTaQoLqu8SlxZXQvv4tw2jS1bHkW3bBC3k10GGYx9bG2fNkIyQCSCINDhid9GruwNCJkcWrtTrVSqnbY5yJKrrAnd0YcDbTGGu/VmJze7HVCKn34NuuvSmq6JUa9CIZHKuLLr0KBY9plOtxMpfhrJx7j6KGhLJn05gTZyP0SXbOkcTGD+b9buc9uRZEmwpxS+f5vr4F2qMrlg8nX7KSAJb2cX1zVLdz9LilROVcb9USzbrJvwLtWfchw3K83u5iD24grmemEr/E29tEfKVrivpiubH5tF7drz+sZaIBdstjPaVpC9tnU+kA0WmfxAuZQz7wMb6/kg+HMW2wu6stoeu22XxbbpOLZHZtvo8Dlt/FZmmxE7JWy2y3g3gC0l3APdygf22naZbI5Zomz62VzTw2ljut3m74SFTPnpteWLLnoOG9PkojeO8vtKjfCOY6o6vscko7ap8guDkh7+hiJtW2O0zQ/u9AQAHF7cLn1woyNG22ydKpeviQwA1Ah7/oK2MUaS3DjTprwCM/C4Ffz4uUNWZAsJZ7VSOT2xbQAZwU+vOWxvWWUklXYXbd0w6OGjkSP/bJPE4s0VJQvWHTplrPk3aSDgAPW9P09mbDkHCXMiLQzs0qm+104+ds3MHnNGTHRXcQDjobe8xvhlj49fGscN3TpQAkOdFrb21RJG4BN1bnxxNRknq9itAwir/X29JcstvTE0yL9mzejjYgcwrjb6qwOvjnx2yQbNX735kudXvmtz3LlcCnr/zuomn18pIk+6UkQdvvk8Yl9sK+sA+sDzI7ad7aNDPme3rJsrJ2SODiIeHsIRlm4oshFJh9SQrRSVAxzqwyWfObMiLcPv5lGuJTN0VRoGWlofKqn7iRVmo/eBXzwxwkYjaZeJ3CCDESFsOzHGpF71IKFw+An1g746tmTjsUHmcxpVeaSEZ9BkZGRk/Bf8AxJzWnduI/qHAAAAAElFTkSuQmCC" alt="logo" title="logo" width="90px">
</a>
</div>

<div class="box_two">
<ul>
        <li><a href="/index">Home</a></li>
    <li><a href="/about">About Us</a> &nbsp;&nbsp;&nbsp;</li>
    <li><a href="/city">City</a> &nbsp;&nbsp;&nbsp;</li>
    <li><a href="/how">How it works</a> &nbsp;&nbsp;&nbsp;</li>
    <li>&nbsp;&nbsp;<a href="/contact">Contact</a> </li>

</ul>

</div>



<!-- <div class="box_three">
<ul>
    <li><img src="img/login.png" width="30px" alt="login" title="login" align="left"> &nbsp;&nbsp;&nbsp; Login</li>
    <li><img src="img/signup.png" width="30px" alt="signup" title="signup" align="left"> &nbsp;&nbsp;&nbsp;Sign Up</li>
</ul>

</div>
 -->

</nav>
</header>

我的CSS 

body{margin:0px;}
        nav{font-family: calibri;width: 100%; min-height: 80px; max-height: 140px; background: #3a3a3a; color: white;}
        .box_one{width: 180px;float: left;height: 80px;margin-left: 30px;}
        .box_two{font-size: 18px;width: 70%;float: left;height: 80px;margin-left: 8%;}
        .box_three{font-size: 18px;width: 320px;float: right;height: 80px;margin-left: 10px;}

nav a{text-decoration:none;color: white;}
nav li
{
    margin-top: 26px;
   display:block;
   float:left;
   min-height:150px; 
   max-height:200px; 
   padding: 5px; 
   list-style: square outside none;
    padding-left: 1em; 
    text-indent: -.7em;
}
.box_two li
{
   min-width:60px; 
   max-width:120px; 
}
.box_three li
{
   width:93px; 
}
 nav ul {
    list-style: none;
    padding:0;
    margin:0;
}

例如我在jsfiddle please check上传了代码 当你缩小以便它显示在jsfiddle

时

1 个答案:

答案 0 :(得分：0)

你应该为此引导，它会让你的生活变得轻松。如果您不想使用引导程序，则必须对所有分辨率使用CSS媒体查询。我在这里创建了一个使用bootstrap的菜单栏示例。有关详细信息，请参阅getBootstrap 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navbar Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

  </head>

  <body>

    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <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="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
  </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
  </body>
</html>

-----更新----- 您必须根据您的要求修改媒体查询，目前我已经调整了菜单，因此即使您缩放它也会显示。

<!DOCTYPE html>
<html>
<head>
<title>dasdasd</title>


    <link rel="stylesheet" type="text/css" href="/css/header.css">
    <style type="text/css">
      body{margin:0px;}
        nav{font-family: calibri;width: 100%; min-height: 80px; max-height: 140px; background: #3a3a3a; color: white;}
        .box_one{width: 180px; float: left; height: 80px;margin-left: 30px;}
        .box_two{font-size: 18px; float: left;height: 80px;}
        .box_three{font-size: 18px;width: 320px;float: right;height: 80px;margin-left: 10px;}

nav a{text-decoration:none;color: white;}
nav li
{
  margin-top: 26px;
  display:block;
  float:left;
  padding: 5px; 
  padding-left: 1em; 
}
.box_three li
{
   width:93px; 
}
 nav ul {
    list-style: none;
    padding:0;
    margin:0;
}

@media (max-width: 991px) {
  header{ width:100% !important;}
}
@media (max-width: 767px) {
  header{ width:100% !important;}
  .box_one{width: 100px; margin-left: 5px;}
  
@media (max-width: 480px) {
.button05 {margin: 10px 0 0;width: 100%;}
 .box_one{width: 100px; margin-left: 0px;}
 .box_two {
    font-size: 12px; 
    float: none;
    height: auto;
  }
}

@media (max-width: 375px) {
 header{ width:100% !important;}
  .box_one{width: 100px; margin-left: 0px;}
  .box_two {
    font-size: 12px;
    float: none;
    height: auto;
  }
  nav li {
    padding: 5px;
    padding-left: 5px;
    font-size: 10px;
  }
}


    </style>
</head>

<body>
<header>
<nav>

<div class="box_one">
<a href="/index">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABaCAMAAACFWShxAAABC1BMVEX////oRDs6p1ZGiPH6uy17pvQ/hfFglvImevDoQjnu8/7nOjAso0znOC4doEPnNSozpVH+9uX4/Pnynpr6uST0rqr++evzp6NnuHr9uBi7zvn97eznPTz509HA4Mj4y8nU4vv82ZHqWlK43cHm8+ntd3Lwj4r+9/dTj/KLx5nmLSGt17ecz6gyf/DG2fmux/jb7t+XufEznXZRsGZ2voYipVmbsEP9y2fd6fzJtjmGrfVlqk/uui5Sp0/Wvk797MmStfY5h949pG9BnpI/lbFKk9JHlrtAoIg4qUTtbmj73+DpUEjveDTrXzj3ri71ni/1qnP2vbrR37z+xEr846y5tDzguTL80oHzkDLdnbSbAAADcklEQVRoge2WWVvaQBSGw4DBMRMyhlCCKGhkFzSWuNRq7V7RtpZql///SzoJESYLSYYkPr3Ie6UPgZdz5ptz4LiMjIyMjASp70wrHZNypXnbTdPUbXY0KEqiKBBE8gecVHfSMXZ3OneiCGGOAgqioJVvk3dNJ6SUnBcIJaG9k6xsOhEFH5UtFGE7wfrq7YFfWbRPqCR1ftOcGOiyfFK7noSr2wkpzEbMNROQTaQoLqu8SlxZXQvv4tw2jS1bHkW3bBC3k10GGYx9bG2fNkIyQCSCINDhid9GruwNCJkcWrtTrVSqnbY5yJKrrAnd0YcDbTGGu/VmJze7HVCKn34NuuvSmq6JUa9CIZHKuLLr0KBY9plOtxMpfhrJx7j6KGhLJn05gTZyP0SXbOkcTGD+b9buc9uRZEmwpxS+f5vr4F2qMrlg8nX7KSAJb2cX1zVLdz9LilROVcb9USzbrJvwLtWfchw3K83u5iD24grmemEr/E29tEfKVrivpiubH5tF7drz+sZaIBdstjPaVpC9tnU+kA0WmfxAuZQz7wMb6/kg+HMW2wu6stoeu22XxbbpOLZHZtvo8Dlt/FZmmxE7JWy2y3g3gC0l3APdygf22naZbI5Zomz62VzTw2ljut3m74SFTPnpteWLLnoOG9PkojeO8vtKjfCOY6o6vscko7ap8guDkh7+hiJtW2O0zQ/u9AQAHF7cLn1woyNG22ydKpeviQwA1Ah7/oK2MUaS3DjTprwCM/C4Ffz4uUNWZAsJZ7VSOT2xbQAZwU+vOWxvWWUklXYXbd0w6OGjkSP/bJPE4s0VJQvWHTplrPk3aSDgAPW9P09mbDkHCXMiLQzs0qm+104+ds3MHnNGTHRXcQDjobe8xvhlj49fGscN3TpQAkOdFrb21RJG4BN1bnxxNRknq9itAwir/X29JcstvTE0yL9mzejjYgcwrjb6qwOvjnx2yQbNX735kudXvmtz3LlcCnr/zuomn18pIk+6UkQdvvk8Yl9sK+sA+sDzI7ad7aNDPme3rJsrJ2SODiIeHsIRlm4oshFJh9SQrRSVAxzqwyWfObMiLcPv5lGuJTN0VRoGWlofKqn7iRVmo/eBXzwxwkYjaZeJ3CCDESFsOzHGpF71IKFw+An1g746tmTjsUHmcxpVeaSEZ9BkZGRk/Bf8AxJzWnduI/qHAAAAAElFTkSuQmCC" alt="logo" title="logo" width="90px">
</a>
</div>

<div class="box_two">
<ul>
    <li><a href="/index">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/city">City</a></li>
    <li><a href="/how">How it works</a></li>
    <li><a href="/contact">Contact</a></li>

</ul>

</div>

</nav>
</header>

相关问题
最新问题