2
\$\begingroup\$

I have a navbar menu with two styles:

  • First one is a tranparent menu. I use it when the page charges.
  • Second one is a scroll and responsive (not yet) menu.

I use jquery to transform the first menu to the second one because they have two different fully styles, but I don't know if this will affect to general page charge...

This is my code (use full page):

$(document).ready(function () {
            $('#navegador-adaptativo').hide();
            $('#navegador-incial').show();
            $('#boton-menu-responsive').click(function () {
                $('#boton-menu-responsive').toggleClass('rotar');
            });
            $(window).scroll(function () {
                if ($(document).scrollTop() > 220) {
                    $('#navegador-incial').hide();
                    $('#navegador-adaptativo').show();
                    $('#navegador-adaptativo-contenido ul li a.underline').addClass('anim-underline');
                }
                else {
                    $('#navegador-adaptativo').hide();
                    $('#navegador-incial').show();
                    $('#navegador-adaptativo-contenido ul li a.underline').removeClass('anim-underline');
                }
            });
        });
body,html {
            width: 100%;
            height: 2000px;
            min-height: 470px;
            min-width: 300px;
            position: relative;
            font-family: 'Open Sans', Arial, sans-serif;
            background: red !important;
        }
        
        header {
            display: block;
            width: 100%;
            background: linear-gradient(rgba(0, 0, 0, 0.77), transparent);
        }
        
        #navegador-incial {
            height: 220px;
            width: 96%;
            padding-bottom: 20px;
            border-bottom: 3px solid white;
            position: relative;
            left: 50%;
            transform: translate(-50%, 0%);
        }
        
        .contenedor-logo {
            height: 100%;
            padding: 0;
            margin: 0;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        
        #logo-grande {
            height: 100%;
        }
        
        #logo-min {
            height: 90%;
        }
        
        #navegador-inicial-contenido {
            height: 100%;
            float: right;
        }
        
        #navegador-inicial-contenido ul {
            height: 100%;
        }
        
        #navegador-inicial-contenido ul li a {
            padding-top: 0;
            padding-bottom: 0;
            padding-right: 10px;
            padding-left: 10px;
            text-transform: uppercase;
            font-weight: 600;
            color: white;
            font-size: 15px;
        }
        
        #navegador-inicial-contenido ul li a:focus {
            background-color: inherit;
        }
        
        #navegador-inicial-contenido ul li a:hover {
            background-color: inherit;
            text-shadow: 0px 1px 26px rgb(255, 254, 255);
        }
        
        #entrar {
            margin: 0;
            background-color: transparent;
            border: 2px solid white;
            cursor: pointer;
            color: white;
            font-size: 15px;
            padding: 16px 31px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #2f6627;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1px;
            border-radius: 0px;
        }
        
        #idioma {
            width: 40px;
        }
        
        #entrar:hover {
            background-color: white;
            color: #091d3e;
            text-decoration: none;
        }
        
        #entrar:active {
            position: relative;
            top: 1px;
            text-decoration: none;
        }
        
        #navegador-adaptativo {
            position: fixed;
            background: #091d3e;
            width: 100%;
            height: 90px;
        }
        
        #navegador-adaptativo-contenido {
            position: relative;
        }
        
        #navegador-adaptativo-contenido ul li a {
            line-height: 74px;
            font-size: 15px;
            color: white;
            padding-right: 10px;
            padding-left: 10px;
            text-transform: uppercase;
            font-weight: 600;
            position: relative;
        }
        
        #navegador-adaptativo-contenido ul li a:focus {
            background-color: inherit;
        }
        
        #navegador-adaptativo-contenido ul li a:hover {
            background-color: inherit;
            text-shadow: 0px 1px 26px rgb(255, 254, 255);
        }
        
        .boton-centrado {
            position: relative;
            top: 50%;
            transform: translate(0%, -50%);
        }
        
        .anim-underline:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            width: 100%;
            background-color: white;
            animation: width 0.5s;
            transform: scaleX(0);
            transition: all 0.4s;
            border-radius: 1px;
        }
        
        .anim-underline:hover:before {
            transform: scaleX(1);
        }
        
        .subrayado:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            width: 100%;
            background-color: white;
            animation: width 0.5s;
            transform: scaleX(0);
            transition: all 0.4s;
            border-radius: 1px;
            text-shadow: -1px 1px 11px rgba(255, 255, 255, 1);
        }
        
        .subrayado:link:before {
            transform: scaleX(1);
        }
        
        .subrayado {
            text-shadow: -1px 1px 11px rgba(255, 255, 255, 1);
        }
        
        #boton-menu-responsive {
            border: 3px solid white;
            color: white;
            font-size: 30px;
            width: 55px;
            height: 55px;
            position: relative;
            padding: 0;
        }
        
        #boton-menu-responsive span {
            position: relative;
            line-height: 0px;
            top: 50%;
            transform: translate(0%, -50%);
        }
        
        .rotar {
            transform: rotate(90deg);
        }
        
        @media (min-width: 768px) and (max-width: 1199px) {}
        
        @media (max-width: 992px) {}
        
        @media (max-width: 480px) {}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Menu con transparencia</title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:300">
    <!--########################## - CSS - ##########################-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
</head>

<body>
    <header>
        <nav id="navegador-incial">
            <div class="contenedor-logo navbar-brand">
                <a href=""> <img id="logo-grande" src="IMAGENES/siade_1tinta_a.png"></a>
            </div>
            <div id="navegador-inicial-contenido" class="navbar-nav">
                <ul class="nav align-items-end">
                    <li class="nav-item"> <a id="seccion-caracteristicas" class="nav-link" href="#caracteristicas">Características</a> </li>
                    <li class="nav-item"> <a id="seccion-casos-estudio" class="nav-link" href="#casos-estudio">Casos de Estudio</a> </li>
                    <li class="nav-item"> <a id="seccion-noticias" class="nav-link" href="#noticias">Noticias</a> </li>
                    <li class="nav-item"> <a id="seccion-colaboradores" class="nav-link" href="#colaboradores">Colaboradores</a> </li>
                    <li class="nav-item"> <a id="seccion-contacto" class="nav-link" href="#contacto">Contacto</a> </li>
                    <li class="nav-item">
                        <a href="eng.html" class="nav-link"><img id="idioma" src="IMAGENES/esen.png" alt="Versión en inglés."></a>
                    </li>
                    <li id="zonaEntrar" class="nav-item">
                        <button id="entrar" type="submit" class="btn btn-default" onClick="location.href='login.php'"><span class="fas fa-user"></span> Entrar</button>
                    </li>
                </ul>
            </div>
        </nav>
        <nav id="navegador-adaptativo" class="navbar navbar-expand-lg ">
            <div class="contenedor-logo">
                <a href=""><img id="logo-min" src="IMAGENES/siade_1tinta_a_peque.png"> </a>
            </div>
            <button id="boton-menu-responsive" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navegador-adaptativo-contenido" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>
            <div id="navegador-adaptativo-contenido" class="collapse navbar-collapse">
                <ul class="nav ml-auto">
                    <li class="nav-item"> <a id="seccion-caracteristicas" class="nav-link underline" href="#caracteristicas">Características</a> </li>
                    <li class="nav-item"> <a id="seccion-casos-estudio" class="nav-link underline" href="#casos-estudio">Casos de Estudio</a> </li>
                    <li class="nav-item"> <a id="seccion-noticias" class="nav-link underline" href="#noticias">Noticias</a> </li>
                    <li class="nav-item"> <a id="seccion-colaboradores" class="nav-link underline" href="#colaboradores">Colaboradores</a> </li>
                    <li class="nav-item"> <a id="seccion-contacto" class="nav-link underline" href="#contacto">Contacto</a> </li>
                    <li class="nav-item">
                        <a href="eng.html" class="nav-link"><img id="idioma" src="IMAGENES/esen.png" alt="Versión en inglés."></a>
                    </li>
                    <li class="nav-item">
                        <button id="entrar" type="submit" class="btn btn-default boton-centrado" onClick="location.href='login.php'"><span class="fas fa-user"></span> Entrar</button>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <section></section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>

</html>

Sorry for Spanish words...

What do you think? I accept recommendations.

\$\endgroup\$
  • \$\begingroup\$ I don't have time right now to write a full review, but you may want to look at an answer I wrote recently. Several things I wrote there also apply here: codereview.stackexchange.com/a/193199/91381 \$\endgroup\$ – Sumurai8 May 1 '18 at 7:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.