How to make this MENU with CSS

Asked

Viewed 499 times

2

MENU

HTML

<nav id="menu-navigation">
<ul>
  <li>
    <span class="icon building"></span>
    <a href="#" title="">LINK UM</a>
  </li>
  <li>
    <span class="icon services"></span>
    <a href="#" title="">LINK UM</a>
  </li>
  <li>
    <span class="icon portfolio"></span>
    <a href="#" title="">LINK UM</a>
  </li>
  <li>
    <span class="icon clients"></span>
    <a href="#" title="">LINK UM</a>
  </li>
  <li>
    <span class="icon testimony"></span>
    <a href="#" title="">LINK UM</a>
  </li>
  <li>
    <span class="icon location"></span>
    <a href="#" title="">LINK UM</a>
  </li>
  <li>
    <span class="icon contact"></span>
    <a href="#" title="">LINK UM</a>
  </li>
  <li>
    <span class="icon work-with-us"></span>
    <a href="#" title="">LINK UM</a>
  </li>
  <li class="logotipo">
    Imagem
  </li>
</ul>
</html>

**CSS (LESS) **

// Menu
 nav#menu-navigation {
  position: absolute;
  left: 0px;
  top: 0;
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: 160px;
  z-index: 4;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  background-color: transparent;
  ul {
    position: absolute;
    left: 0px;
    top: 0;
    right: 0px;
    bottom: 0;
    margin: auto;
    height: 118px;
    width: 1280px;
    font-size: 0px; // Espaço em Branco entre os Li's
    text-align: center;
    li {
      background-color: #7d858b;
      display: inline-block;
      border-top: none;
      border-bottom: none;
      line-height: 45px;
      height: 45px;
      text-align: center;
      text-indent: 0;
      padding: 0px 15px;
      vertical-align: bottom;
      transition: all 1s ease;
      &: before {
        content: none;
      }
      &:hover:not(.logotipo) {
        border-top: 1px inset #FFF;
        border-bottom: 1px inset #FFF;
        a {
          color: #ef9c2b;
        }
      }
      a {
        transition: all 1s ease;
        color: #FFF;
        font-size: 14px;
      }
      &.welcome,
      &.menu {
        display: none;
      }
      &.logotipo {
        display: inline-block;
        background-color: transparent;
        height: 118px;
        line-height: 118px;
      }
      span.icon {
        display: none;
      }
      span.pipeline {
        display: block;
      }
    }
  }
}

In that code above, my last LI is the LOGO. The gray bar to your right is to continue (I put manually to show what I need).

I managed to make the MENU until the logo. But I need this gray bar to the right, and it has to be 100%, IE, it should start from there after the letter O of SOON and end in the corner of the window no matter the resolution.

I even put a DIV with position:absolute to make the gray bar, but depending on the resolution, goes up on the LOGO, obviously.

I didn’t put the nav#menu-navigation all gray because the LOGO area is transparent, because it has a slider in the background. So the gray bar has to come from the left stop before the LOGO and continue after until the end.

How can I do ?

  • My biggest problem is how to make the gray bar on the right that she stay right until the logo.

  • Note: The LOGO part is transparent. The ul may not have background color.

  • OBS 2: It has to be like in the image.

html css

  • Your ul has to be a block with 100% width and the color applied to it, so it works with the li's. https://jsfiddle.net/m745hmrx/

  • @Kaduamaral, thank you for your help. But it seems you didn’t even read what I wrote - ... the LOGO area is transparent. Can’t be white, can’t have color. And if you put transparent he picks up the color of ul at the bottom.

  • So Diego, there’s no way you can do this with just CSS. You could try using javascript or a table, but it’s something that would take a lot of work, it’s much easier for you to set the background li.logotipo with the same background color of the site.

  • No, it’s not easier. On the same line where ...the LOGO area is transparent continues ,why has a slider on the bottom..

  • Wrong way to do it, but you don’t need Javascript: https://jsfiddle.net/Lybc6nf5/

  • It has an HTML kit called "Traingames Webkit", comes with a menu bar and 5 more elements. <a href="https://traingamesofficial.github.io/traingames.github.io/webkit.html">Webkit</a> This is the version <em>free</em>, the version <em>Professional</em> (with + of 30 elements) has here: <a href="http://producto.mercadolivre.com.br/MLB-902124661-traingameswebkit-pro-_JM">Pro Webkit</a>. I think free view is already good for what you want, just have to modify the stylesheet a little bit, like the source, background-color,.

Show 1 more comment

2 answers

1


guy I did on the basis of the other friend ai response who wrote the css and html and I made ready bate means it works, will have to make the necessary adjustments but it is the solution:

    <style>
        nav {
           //background-color: #dddddd;
           //padding-left: 5em;
         }
         ul {           
           list-style-type: none;
           margin: 0;
           padding: 0;
           width: 393px;
         }
         li {
           padding-right: 1em;
           display: inline;
         }
         a {
           width: 100px;
         }
         .logotipo {
          // background-color: #ffffff;
           //margin: 20px;
           //padding: 20px;
         }
         .fundo{   background-color: #dddddd; float: left; }
         .fim { 
                //float: right;
               // width: 100%;
         }
 </style>    
 <script src="js/js_1.9/jquery-1.8.2.js" type="text/javascript"></script>
<nav id="menu-navigation">

  <ul>
    <li class="fundo" >
      <span class="icon services fu"></span>
      <a href="#" title="">Services</a>
    </li>
    <li class="fundo" >
      <span class="icon portfolio"></span>
      <a href="#" title="">Portfolio</a>
    </li>
    <li class="fundo" >
      <span class="icon clients"></span>
      <a href="#" title="">Clients</a>
    </li>
    <li class="fundo" >
      <span class="icon location"></span>
      <a href="#" title="">Location</a>
    </li>
    <li class="fundo" >
      <span class="icon contact"></span>
      <a href="#" title="">Contact</a>
    </li>
    <li class="logotipo" style="float: left;">
        <a href="#" title="">Logo</a>      
    </li>    
  </ul>
    <li id="cotoco" class="fim fundo" style="float: left;">
        &nbsp;
    </li>
    <script>
        $(window).resize(function() {             
            var w = $(window).width();
            var ul_width = $('ul').width();
            var cotoco = w - ul_width - 32;
            $('#cotoco').width(cotoco);
        });
        $(window).resize();
    </script>    
</nav>

  • Man, it seems to me that this is the solution. But I can’t see this site now, because I’m seeing another one. When I get to do it, I come back here to test your solution. I played on JSFIDDLE and tested it and it worked perfectly. Stand by.

  • That -32 is what ?

  • I got it, Mario. Thank you. It worked. I changed the aesthetics of HTML and elements for other reasons. But I understood and applied your solution. Window Size - MENU Size - 32 - Logo margin is the size that remains for the gray band in the corner. Thanks.

  • @Diego this is the adjustment I told you, this value will change is the width of your logo in the case

  • Sorry I didn’t comment the code was right at the end of business hours ;)

  • uahuah from nowhere. I realized you were in a hurry by the name of the variable you gave. stump. uahuhauha

  • Those // were to be comments? I guess CSS doesn’t support this, xD

  • @falsarella I use netbeans it’s his fault for not letting me know it’s /**/ http://answall.com/questions/46229/coment%C3%A1rios-em-css-com-ao-Inv%C3%A9s-de vlw for warning

  • @Sneepsninja Tranquilo.

Show 4 more comments

1

I created here, now you need to change the menu color and put a logo, I believe this example gives you a good idea JSFIDDLE

         nav {
           background-color: #dddddd;
           padding-left: 5em;
         }
         ul {
           list-style-type: none;
           margin: 0;
           padding: 0;
         }
         li {
           padding-right: 1em;
           display: inline;
         }
         a {
           width: 100px;
         }
         .logotipo {
           background-color: #ffffff;
           margin: 20px;
           padding: 20px;
         }
<nav id="menu-navigation">
  <ul>
    <li>
      <span class="icon services"></span>
      <a href="#" title="">Services</a>
    </li>
    <li>
      <span class="icon portfolio"></span>
      <a href="#" title="">Portfolio</a>
    </li>
    <li>
      <span class="icon clients"></span>
      <a href="#" title="">Clients</a>
    </li>
    <li>
      <span class="icon location"></span>
      <a href="#" title="">Location</a>
    </li>
    <li>
      <span class="icon contact"></span>
      <a href="#" title="">Contact</a>
    </li>
    <li class="logotipo">
      LOGO
    </li>
  </ul>
</nav>

  • 1

    The background of the LOGO has to be transparent. It cannot have color.

  • How I put text and not image used the background to demonstrate the area that will be the soon, use background-image: url(caminhoDaimagem); to replace text with image

  • But the ul cannot have background color, otherwise it is useless to be transparent...

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.