I want to make a bar with my logo and my submenu

Asked

Viewed 111 times

1

As I mentioned in my title, I wanted to make a bar. I don’t explain well what I want, but I’ll leave the link to a restaurant that has what I want to do: https://www.restaurantlarive.nl/nl/

Here is my code

Css:

.menu ul li{
    background-color:#4d79ff;             /* muda a cor da barra */
    float: left;                   /* ficar horizontal */
    width: 120px;                  /* tamanho da barra */
    height: 50px;                  /* altura da barra */
    display: inline-block;
    text-align:center;             /* ficar a esqueda*/
    line-height: 22px;             /* mover o submenu*/
    font-size: 24px;               /* tamanho da letra*/
    position: relative;
}

.menu ul li:hover{
    background-color:#33adff;       /* muda a cor do submenu quando  metes la o rato */
}

.menu ul{
    padding: 0px;                   /* move a barra para a direita */
}

.menu ul ul{
    display: none;                  /* para  o sub sub menu ficar invisivel*/
}

.menu ul li:hover > ul{             /* para quando por o rato no menu ementa, aparecer o sub menu*/
    display:block;
}

.menu ul ul ul{                     /* SOBRE AS CARNES E PEIXES*/
    margin-left:120px;              /* mover para a direita*/
    top: 0px;                       /* ir para baixo*/
    position: absolute;
}

.menu ul ul li:hover{               /* SUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor do  submenu*/
}

.menu ul ul ul li:hover{            /* SUBSUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor*/
}

.menu a{                            /* OS MENUS*/
    color:black;                    /* cor do texto*/
    text-decoration: none;          /* sem decoração*/
}

Html:

<img src="33.png" href="quinta.html" width="150" height="150">
<body>
        <nav class="menu">
            <ul>
                <li><a href="Restaurante.html">Restaurante</a></li>
                <li><a href="#">Ementa</a>
                    <ul>
                        <li><a href="Entrada.html">Entrada</a></li>
                        <li><a href="Prato Principal.html">Prato Principal</a>
                            <ul>
                                <li><a href="Carnes.html">Carnes</a></li>
                                <li><a href="Peixes.html">Peixes</a></li>
                                <li><a href="Vegetariano.html">Vegetariano</a></li>
                            </ul>
                        </li>
                        <li><a href="Sobremesas.html">Sobremesas</a></li>
                    </ul>
                </li>
                <li><a href="Reserva.html">Reserva</a></li>
                <li><a href="Contacto.html">Contacto</a></li>
            </ul><br><br><br><br>
    </nav>
html css

3 answers

0

Good morning!

You put your img tag inside the body tag, I don’t know if it’s generating any of your problems, but it can lead to problems later. As for Blur, I didn’t think it was probably done with a script, as there is no active class in the links as well. I did so in the code you sent and it worked here: 

$('.menu li').hover(function(){
  $('.menu li').css('filter', 'blur(3px)');
  $(this).css('filter', 'none');
})

Hope I helped, hugs!

0


Lucas from what I read in your question and comments I think you want the menu with Blur and aligned in the center of the correct page.

I used the CSS that Thomas created to do Blur and added this CSS to align the Menu and Image in the center of the page:

/* Alinhamento horizontal do Menu no Centro da Página*/
nav {
    width: 480px;
    margin: 0 auto;
}
/* Alinhamento horizontal da Imagem no Centro da Página*/
.hero {
    text-align: center;
}

See below the full working Snippet. Click on Run.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.menu ul li{
    background-color:#4d79ff;             /* muda a cor da barra */
    float: left;                   /* ficar horizontal */
    width: 120px;                  /* tamanho da barra */
    height: 50px;                  /* altura da barra */
    display: inline-block;
    text-align:center;             /* ficar a esqueda*/
    line-height: 22px;             /* mover o submenu*/
    font-size: 24px;               /* tamanho da letra*/
    position: relative;
}

.menu ul li:hover{
    background-color:#33adff;       /* muda a cor do submenu quando  metes la o rato */
}

.menu ul{
    padding: 0px;                   /* move a barra para a direita */
}

.menu ul ul{
    display: none;                  /* para  o sub sub menu ficar invisivel*/
}

.menu ul li:hover > ul{             /* para quando por o rato no menu ementa, aparecer o sub menu*/
    display:block;
}

.menu ul ul ul{                     /* SOBRE AS CARNES E PEIXES*/
    margin-left:120px;              /* mover para a direita*/
    top: 0px;                       /* ir para baixo*/
    position: absolute;
}

.menu ul ul li:hover{               /* SUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor do  submenu*/
}

.menu ul ul ul li:hover{            /* SUBSUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor*/
}

/* Css Blur do Thomas*/
.menu a{                            /* OS MENUS*/
    color:black;                    /* cor do texto*/
    text-decoration: none;          /* sem decoração*/
}
.menu li {
    -webkit-filter: blur(0);
    -webkit-transition: -webkit-filter 0.5s ease-in-out;
}
.menu:hover li {
    -webkit-filter: blur(1.5px);
}
.menu:hover li:hover, .menu:hover li:hover ul li{
    -webkit-filter: blur(0);
}
/* Alinhamento horizontal do Menu no Centro da Página*/
nav {
    width: 480px;
    margin: 0 auto;
}
/* Alinhamento horizontal da Imagem no Centro da Página*/
.hero {
    text-align: center;
}
<div class="hero">
    <img src="33.png" href="quinta.html" width="150" height="150">
</div>
<nav class="menu">
    <ul>
        <div>
        <li><a href="Restaurante.html">Restaurante</a></li>
        <li><a href="#">Ementa</a>
            <ul>
                <li><a href="Entrada.html">Entrada</a></li>
                <li><a href="Prato Principal.html">Prato Principal</a>
                    <ul>
                        <li><a href="Carnes.html">Carnes</a></li>
                        <li><a href="Peixes.html">Peixes</a></li>
                        <li><a href="Vegetariano.html">Vegetariano</a></li>
                    </ul>
                </li>
                <li><a href="Sobremesas.html">Sobremesas</a></li>
            </ul>
        </li>
        <li><a href="Reserva.html">Reserva</a></li>
        <li><a href="Contacto.html">Contacto</a></li>
    </div>
    </ul>
    <br><br><br><br>
</nav>

There was an error in your HTML <body>, also fixed this in the HTML above

<!-- Não se deve colocar a imagem fora Body -->
<img src="33.png" href="quinta.html" width="150" height="150">
<body>

  • yes, it works thank you very much

  • @Lucassintra glad it worked out! If my reply helped you in any way consider marking the Reply with "Accept" ✔

0

Lucas, for you to have this result, you need to work with the filter and add the blur, which has the effect of blurring.

Add this line to your css.

.menu li {
    -webkit-filter: blur(0);
    -webkit-transition: -webkit-filter 0.5s ease-in-out;
}
.menu:hover li {
    -webkit-filter: blur(1.5px);
}
.menu:hover li:hover, .menu:hover li:hover ul li{
    -webkit-filter: blur(0);
}

  • I just added this to my code and it just got worse. the function image disappeared the submenu increased in size among other things.

  • @Lucassintra, I don’t know what your code is, but what you provided is working smoothly, without conflict. http://sites.fullprog.com/testes/blur/

  • yes, my code is fine but I wanted to make a bar with the submenus in the middle of the bar. but I’m not able to make the bar.

  • Do you have any layout to help you know what this bar looks like, where it comes from, how it looks? Not knowing this makes it difficult to help you.

  • I can send the link to a restaurant that has what I want to do?

  • @Lucassintra, can be.

  • You are here. https://www.restaurantlarive.nl/nl/

  • This is the same one you mentioned before, and there’s this bar that you’re trying to put, just the filter blur. What’s the most there is a background and a border where is giving the hover

  • but if I put your code in my code it doesn’t work.

Show 4 more comments

Browser other questions tagged html css

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