1

Antes de nada adjunto el código:

Aún no es responsive

$(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;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  background-color: brown;
}

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) {}
<!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">

  <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>

</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>

</body>

</html>

Se trata de un menú de navegación, que inicialmente esta transparente para mostrar la imagen o el vídeo que haya debajo. Al hacer scroll se cambiaría a un menú fijo mas visible, superpuesto al contenido. He tenido que hacer dos pues son tan diferentes que me pareció abrumador hacer mil clases y luego ir cambiándolas. Lo único que hago ahora es un evento que cuando se hace scroll hacia abajo a partir de 220px, el menú cambia al otro que inicialmente esta oculto.

¿Creéis que es una buena implementación? Es decir, ¿Habría algún problema con la carga de la página por utilizar javascript? Entiendo que cuanto mas css se use en vez de js mejor, pero como podéis ver me parecía muy abrumador hacer css para tantas cosas.

5
  • creo que las únicas respuestas se basarán en suposiciones y opiniones personales, a algunos les parecerán buena implementación a otros mala. Puedes especificar tu pregunta ? El titulo indica un problema de de rendimiento, el contexto un problema de diseño y terminas con una pregunta de opinion personal. Commented el 26 abr. 2018 a las 12:15
  • gracias por usar el editor, muchos no lo hacen. Aún así intenta separar el código html, css y js usando los diferentes bloques destinado para ello. Commented el 26 abr. 2018 a las 12:17
  • 1
    tu pregunta tiene más sentido responderla en codereview.stackexchange.com que es.stackoverflow.com Commented el 27 abr. 2018 a las 7:05
  • Gracias por preocuparte @AngelFragaParodi la moveré ahora mismo...
    – Mr Robot
    Commented el 27 abr. 2018 a las 9:34
  • he incluido la etiqueta revisión de código, ya que según he estado viendo, otros usuarios la incluyen para realizar este tipo de preguntas. En cuanto esté aplicada la edición incluyo mi respuesta. Commented el 29 abr. 2018 a las 13:57

1 respuesta 1

3

Lo que más me llama la atención es duplicar el menú, así que te dejo mi opinión

No repetir codigo gracias a bootstrap

Si bien que hay casos excepcionales donde hay que repetir un menu por distintas razones, este a mi no me lo parece. Utilizas bootstrap, aprovechalo para esconder o mostrar elementos según las media queries. Para ello usa clases como hidden-xs[-(tipo)], puedes encontrar más información aquí

ejemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<img src="http://via.placeholder.com/850x350" class="hidden-xs" />
<img src="http://via.placeholder.com/350x150" class="visible-xs" />

Mejorar el rendimiento agregando o eliminando clases

Usar los métodos jquery show y hide implica un mayor número de operaciones a realizar internamente por javascript. En su lugar usar una clase css (visible o hidden de bootstrap) sería más aconsejable.

Otra cosa que mejoramos es evitar el estilo en línea, es decir tras aplicar show, nuestro elemento/s tendrán el atributo style="display: block" podiendo entrar en conflicto con el estilo global declarado en la página.

2
  • Pero esto estaría más enfocado al diseño responsive no? Mi planteamiento muestra un navegador que es totalmente diferente a otro y que se oculta/muestra cuando se hace scroll. Cuando trabaje el responsive utilizaré las queries y las aplicaré al segundo navegador, el primero permanecerá oculto. No obstante he estado trabajando sobre ello y tengo unas nuevas modificaciones. Ahora el problema está en el menu collapse. No se si editar esta pregunta o crear otra nueva...
    – Mr Robot
    Commented el 30 abr. 2018 a las 9:14
  • @Pelayo cierto, pero tambien es más facil renderizar solo un menu que dos. Agrego una nota de rendimiento Commented el 30 abr. 2018 a las 10:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.