ページ内のすべてのナビゲーションタブをアイコンに集約したい場合は

完全に動作するナビゲーションバーが表示されますが、ズームすると消えます。ページ内のすべてのナビゲーションタブをアイコンに集約したい場合は

ズームが完了すると、すべてのナビゲーションリンクが1つのアイコンにバインドされます。あなたがズームアウトされます場合はjsfiddle please check に私はそれを達成することができますどのように、例えば私のCSS

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

マイHTML

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

出典

2017-01-28 Atif

あなたはこれをブートストラップする必要があります。それはあなたの人生を楽にします。ブートストラップを使用したくない場合は、クールではないすべての解像度に対してCSSメディアクエリを使用する必要があります。ここではブートストラップを使ってメニューバーの例を作成しました。詳細はあなたはそれが表示されますので、現在私は、メニューを調整しています要件ごとにメディアクエリを変更する必要が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>

----- UPDATE ----- を参照してください。あなたがそれをズームしても。

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

出典

2017-01-28 08:03:01 WebSwami

ご協力のおかげで、問題をやって完璧に私のナビゲーションバーを働いブートストラップなしの私の全体のウェブは、したがって、私はそれを求めます。ブートストラップなしで解決策を与えることができます – Atif

その場合、メニューバークラスのCSSメディアクエリを記述する必要があります。 – WebSwami

あなたはそれを助けることができますか？ – Atif

ページ内のすべてのナビゲーションタブをアイコンに集約したい場合は

答えて

関連する問題