All geek questions in one place

Overflow horizontal bar hidden, being strange

I made this bar (nav2) scrollable if it doesn’t have enough space on the screen, but it seems very strange (also because for the first time I do such a thing as a horizontal scrollable bar), ul somewhere above, and doesn’t come down, I tried to swim: on the left, it works, but ul is not centered in the middle (this is important!)

body { font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; }
    
    #nav1 {
    width: calc(100% / 3);
    height: 40px;
    line-height: 40px;
    background-color: black;
    float: left;
    }
    
    #nav2 {
    width: calc(100% / 3);
    height: 40px;
    background-color: red;
    float: left;
    overflow: scroll;
    
    }
    
    #nav3 {
    width: calc(100% / 3);
    height: 40px;
    background-color: yellow;
    float: left;
    }
    
    
    #nav2 ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: block;
    
    height: 40px;
    float: left;
    }
    
    #nav2 ul li {
    display: inline;
    color: black;
    text-decoration: none;
    
    
    }
    
    #nav2 ul a {
    padding: 5px 17px;
    text-decoration: none;
    color: white;
    }
    
    @keyframes sin {
      0% {transform: rotate(0deg)}
      100% {transform: rotate(360deg)}
    }
    
    #yvelogo {
    margin-left: 17px;
    padding: 0;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    }
    
    a #yvelogo {
    border: 0;
    }
<!DOCTYPE HTML>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>yvemiro</title>
      <meta name="author" content="hate">
      <meta name="description" content="description for gogel">
      <meta name="keywords" content="yve,miro,blog">
      <link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">
     </head>
     <body>
      <div id="navbar">
      <div id="nav1"><a href="#"><img id="yvelogo" alt="eeh, is it IE or what" src="http://static.tumblr.com/zicio7x/VTfnvi4e4/yvelogowhite.svg"></a></div>
      <div id="nav2">
      <ul>
    <li><a href="#">Blog</a></li><li><a href="#">Stuff</a></li><li><a href="#">Me</a></li><li><a href="#">Ask</a></li><li><a href="#">Archive</a></li>
    </ul>
    </div>
      <div id="nav3"></div>
      </div>
     </body>
    </html>
Run codeHide result
+4
source share
2 answers

$(document).ready(

  function() { 

    $("#nav2").niceScroll();

  }

);
body { font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; }
    
    #nav1 {
    width: 33%;
    height: 40px;
    line-height: 40px;
    background-color: black;
    float: left;
    }
    
    #nav2 {
    width: 34%;
    height: 40px;
    background-color: red;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    }
    
    #nav3 {
    width: 33%;
    height: 40px;
    background-color: yellow;
      float: right;
    }
    
    
    #nav2 ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: block;
    
    }
    
    #nav2 ul li {
    display: inline;
    color: black;
    text-decoration: none;
    
    
    }
    
    #nav2 ul a {
    padding: 5px 17px;
    text-decoration: none;
    color: white;
    }
    
    @keyframes sin {
      0% {transform: rotate(0deg)}
      100% {transform: rotate(360deg)}
    }
    
    #yvelogo {
    margin-left: 17px;
    padding: 0;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    }
    
    a #yvelogo {
    border: 0;
    }

    @media (max-width:990px) {
    #nav2 {
    overflow-y: hidden;
    overflow-x: scroll;
    }
    }
<!DOCTYPE HTML>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>yvemiro</title>
      <meta name="author" content="hate">
      <meta name="description" content="description for gogel">
      <meta name="keywords" content="yve,miro,blog">
      <link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js">
         </script>
     </head>
     <body>
      <div id="navbar">
      <div id="nav1"><a href="#"><img id="yvelogo" alt="eeh, is it IE or what" src="http://static.tumblr.com/zicio7x/VTfnvi4e4/yvelogowhite.svg"></a></div>
      <div id="nav2">
      <ul>
    <li><a href="#">Blog</a></li><li><a href="#">Stuff</a></li><li><a href="#">Me</a></li><li><a href="#">Ask</a></li><li><a href="#">Archive</a></li>
    </ul>
    </div>
      <div id="nav3"></div>
      </div>
     </body>
    </html>
Run codeHide result

That should fix it a bit. If you need vertical centering, I can revisit it again.

: jquery.

0

'float: left; divs (nav1, nav2, nav3) "navbar", .

'navbar' . , . , , div .css .

"nav2" css :

#nav2 ul {  
    width: calc(100% / 3);  
    height: 80px;  /* changed 40px to 80px */
    background-color: red;  
    float: left;
    overflow-x: auto; 
    overflow-y: hidden;
    white-space: nowrap; /* added nowrap */  
}

, , .

, ?

+1
source

Source: https://habr.com/ru/post/1609699/

More articles:


All Articles