How to make this MENU with CSS

Navigation
2

HTML

<navid="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 this code above, my last LI is LOGO. The gray bar to your right is to continue (I put it manually to show what I need).

I managed to make the MENU until the logo. But I need that gray bar on the right, and it has to be 100%, that is, it should start from there after the letter O of LOGO 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, it goes up on top of LOGO, obviously.

I have not put nav#menu-navigation all gray because the LOGO area is transparent, because there is a slider in the background. Then the gray bar has to come from the left stop before the LOGO and continue to the end.

How can I do this?

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

  • NOTE: The LOGO part is transparent. ul can not have background color.

  • NOTE 2: It has to be as in the image.

asked by anonymous 02.07.2015 / 13:35

2 answers

1

I did this on the basis of the other answer to that friend's friend who wrote the css and html and did half a hit it works, you have to make the necessary adjustments but it's 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>
    
07.07.2015 / 23:06
1

I created here, now you need to change the color of the menu and put a logo, I think 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>
    
02.07.2015 / 14:09
Does Eclipse LogCat for Android display Log messages? Pass parameters via GET and include more parameters