Barras Superiores
Estos componentes muestran información y acciones en la parte superior de una pantalla.
Las barras superiores también conocidas como barras de encabezado o barras de navegación
superior, tienen funcionalidad clave de la navegación principal, la identificación de la
marca, el acceso rápido a funciones, la búsqueda, el inicio de sesión y perfil, las
notificaciones y acciones adicionales. Mejoran la experiencia del usuario al
proporcionar una navegación clara, accesible y rápida, así como un acceso conveniente a
funciones importantes.
Estas son algunas de las características y funcionalidades de las barras superiores
- Navegación: Las barras superiores se utilizan para mostrar la navegación principal de una aplicación o sitio web. Pueden contener enlaces o menús desplegables que permiten a los usuarios acceder a diferentes secciones, páginas o funciones del sistema. Proporcionan una forma fácil y rápida de moverse dentro de todo el sitio, app o software.
- Identificación: Las barras superiores a menudo incluyen el logotipo o el nombre de la marca, lo que ayuda a los usuarios a identificar la aplicación, el sitio web o el sistema en el que se encuentran. Esto proporciona coherencia visual y establece la identidad de la marca en la interfaz.
- Acceso: Las barras superiores pueden contener enlaces o iconos que permiten a los usuarios acceder rápidamente a funciones o herramientas importantes. Estos enlaces pueden representar acciones comunes como "Inicio", "Perfil", "Configuración", "Notificaciones" u otras funciones clave relevantes para la aplicación o sitio web en particular.
- Búsqueda: En algunas interfaces, las barras superiores incluyen el campo de búsqueda directo en la barra. En este caso también se utiliza el ícono de lupa para acceder a un modal con el buscador, permitiendo a los usuarios buscar contenido o información específica dentro del sistema. Esto proporciona una funcionalidad de búsqueda conveniente y accesible en todo momento.
- Sesión: Las barras superiores pueden contener enlaces o botones para iniciar sesión o acceder al perfil del usuario. Esto permite a los usuarios autenticarse en el sistema y acceder a su información personalizada, configuraciones y preferencias.
- Notificaciones: Algunas barras superiores incluyen indicadores o iconos para notificaciones o mensajes nuevos. Esto permite a los usuarios ver rápidamente si tienen nuevas notificaciones o mensajes sin tener que visitar una sección dedicada.
- Adicionales: Dependiendo del contexto y las necesidades del sistema, las barras superiores pueden incluir acciones o opciones adicionales relevantes. Esto podría incluir botones para crear nuevo contenido, compartir en redes sociales, cambiar el idioma o cualquier otra acción específica del sistema.
Barra Superior Publica Responsiva
- Descubre
- Educación
68
- Empleabilidad
- Cultura
- Noticias
HTML
<div class="barra-superior">
<div style="display: flex;gap: 30px;">
<div class="logo-aiep">
<img src="img/logotipo_aiep_carril2.svg" alt="" width="90"
height="50">
</div>
<ul class="menu-horizontal">
<li>Descubre</li>
<li class="submenu">Educación
<span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span>
<img src="iconos/abajo_lineal.svg" alt="" width="32" height="32">
<ul class="submenu-lista">
<li>Carreras <span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span></li>
<li>Cursos <span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span></li>
<li>Diplomados <span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span></li>
<li>Certificaciones <span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span></li>
<li>Especiales <span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span></li>
<li>Sedes</li>
</ul>
</li>
<li class="submenu">Empleabilidad<img src="iconos/abajo_lineal.svg"
alt=""
width="32" height="32">
<ul class="submenu-lista">
<li>Empresas</li>
<li>Alummni</li>
<li>Historia</li>
</ul>
</li>
<li>Cultura<img src="iconos/abajo_lineal.svg" alt="" width="32"
height="32">
</li>
<li>Noticias</li>
</ul>
</div>
<div style="display: flex; gap: 10px; justify-content: center">
<div class="icon-box">
<img src="iconos/lupa_lineal.svg" alt="" width="32" height="32">
</div>
<div class="icon-box" id="menu-movil">
<img src="iconos/menu_lineal.svg" alt="" width="32" height="32">
</div>
<div class="icon-box" id="servicios-financieros">
<img src="iconos/servicios_financieros_lineal.svg" alt="" width="32"
height="32">
<img src="iconos/abajo_lineal.svg" alt="" width="32" height="32">
</div>
<div class="icon-box" id="user">
<img src="iconos/usuario_lineal.svg" alt="" width="32" height="32">
</div>
<button class="btn-admision">
Admisión
</button>
</div>
</div>
CSS
.barra-superior {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
min-width: 1300px;
height: 60px;
background: #FFFFFF;
align-items: center;
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.barra-superior .logo-aiep {
display: flex;
align-items: center;
width: 90px;
}
.barra-superior .menu-horizontal {
display: flex;
position: relative;
list-style-type: none;
margin-block-start: unset;
margin-block-end: unset;
margin-inline-start: unset;
margin-inline-end: unset;
padding-inline-start: unset;
}
.menu-horizontal li {
display: flex;
position: relative;
justify-content: center;
align-items: center;
padding: 7px 20px;
gap: 10px;
height: 60px;
mix-blend-mode: normal;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
text-align: center;
color: #024588;
cursor: pointer;
}
.menu-horizontal li:hover {
border-bottom: 3px solid #024588;
background: #EBF2F9;
}
.submenu-lista {
display: none;
flex-direction: column;
align-items: flex-start;
padding: 0px;
width: 260px;
top: 60px;
padding-top: 10px;
left: 0;
position: absolute;
filter: drop-shadow(0px 3px 16px rgba(16, 15, 15, 0.2));
border-radius: 10px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
background: transparent;
}
.submenu-lista li {
background: #FFFFFF;
align-items: center;
padding: 12px 20px;
justify-content: space-between;
width: 100%;
height: 50px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
}
.submenu-lista li:hover {
background: #EBF2F9 !important;
border-bottom: unset !important;
}
.submenu-lista li:first-child {
border-radius: 10px 10px 0px 0px;
}
.submenu-lista li:last-child {
border-radius: 0px 0px 10px 10px;
}
.barra-superior .icon-box {
display: flex;
align-items: center;
padding: 12px 10px;
gap: 10px;
width: max-content;
height: 60px;
cursor: pointer;
}
.barra-superior .btn-admision {
display: flex;
justify-content: center;
align-items: center;
padding: 7px 20px;
gap: 10px;
border: unset;
outline: unset;
width: 118px;
height: 60px;
background: #B40000;
mix-blend-mode: normal;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
text-align: center;
cursor: pointer;
color: #FFFFFF;
}
.barra-superior .btn-admision:hover {
background-color: #E33535;
}
.barra-superior .btn-admision:active {
background-color: #E33535;
border: 3px solid #B40000;
}
#menu-movil {
display: none;
}
@media (max-width: 1299px) {
.barra-superior {
width: 100%;
min-width: 600px;
max-width: 1200px;
padding: 0 10px;
}
.barra-superior .menu-horizontal {
display: none;
}
.barra-superior .btn-admision {
order: 1;
}
.barra-superior .icon-box {
order: 2;
}
#servicios-financieros {
display: none;
}
#user {
display: none;
}
#menu-movil {
display: block;
}
}
@media (max-width: 500px) {
.barra-superior {
width: 100%;
min-width: unset;
max-width: 500px;
}
}
JS
const elementos = document.querySelectorAll(".menu-horizontal li");
elementos.forEach((elemento) => {
elemento.addEventListener("mouseover", function () {
if (this.classList.contains("submenu")) {
const submenu = this.querySelector('.submenu-lista');
submenu.style.display = 'flex';
}
});
elemento.addEventListener("mouseleave", function () {
if (this.classList.contains("submenu")) {
const submenu = this.querySelector('.submenu-lista');
submenu.style.display = 'none';
}
});
});
Barra Superior Publica Responsiva versión móvil
HTML
<div class="barra-superior">
<div style="display: flex;gap: 30px;">
<div class="logo-aiep">
<img src="img/logotipo_aiep_carril2.svg" alt="" width="90"
height="50">
</div>
<ul class="menu-horizontal">
<li>Descubre</li>
<li class="submenu">Educación
<span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span>
<img src="iconos/abajo_lineal.svg" alt="" width="32" height="32">
<ul class="submenu-lista">
<li>Carreras <span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span></li>
<li>Cursos <span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span></li>
<li>Diplomados <span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span></li>
<li>Certificaciones <span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span></li>
<li>Especiales <span class="insignia-etiqueta insignia-info"
style="right: 0;">68</span></li>
<li>Sedes</li>
</ul>
</li>
<li class="submenu">Empleabilidad<img src="iconos/abajo_lineal.svg"
alt=""
width="32" height="32">
<ul class="submenu-lista">
<li>Empresas</li>
<li>Alummni</li>
<li>Historia</li>
</ul>
</li>
<li>Cultura<img src="iconos/abajo_lineal.svg" alt="" width="32"
height="32">
</li>
<li>Noticias</li>
</ul>
</div>
<div style="display: flex; gap: 10px; justify-content: center">
<div class="icon-box">
<img src="iconos/lupa_lineal.svg" alt="" width="32" height="32">
</div>
<div class="icon-box" id="menu-movil">
<img src="iconos/menu_lineal.svg" alt="" width="32" height="32">
</div>
<div class="icon-box" id="servicios-financieros">
<img src="iconos/servicios_financieros_lineal.svg" alt="" width="32"
height="32">
<img src="iconos/abajo_lineal.svg" alt="" width="32" height="32">
</div>
<div class="icon-box" id="user">
<img src="iconos/usuario_lineal.svg" alt="" width="32" height="32">
</div>
<button class="btn-admision">
Admisión
</button>
</div>
</div>
CSS
.barra-superior {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
min-width: 1300px;
height: 60px;
background: #FFFFFF;
align-items: center;
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.barra-superior .logo-aiep {
display: flex;
align-items: center;
width: 90px;
}
.barra-superior .menu-horizontal {
display: flex;
position: relative;
list-style-type: none;
margin-block-start: unset;
margin-block-end: unset;
margin-inline-start: unset;
margin-inline-end: unset;
padding-inline-start: unset;
}
.menu-horizontal li {
display: flex;
position: relative;
justify-content: center;
align-items: center;
padding: 7px 20px;
gap: 10px;
height: 60px;
mix-blend-mode: normal;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
text-align: center;
color: #024588;
cursor: pointer;
}
.menu-horizontal li:hover {
border-bottom: 3px solid #024588;
background: #EBF2F9;
}
.submenu-lista {
display: none;
flex-direction: column;
align-items: flex-start;
padding: 0px;
width: 260px;
top: 60px;
padding-top: 10px;
left: 0;
position: absolute;
filter: drop-shadow(0px 3px 16px rgba(16, 15, 15, 0.2));
border-radius: 10px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
background: transparent;
}
.submenu-lista li {
background: #FFFFFF;
align-items: center;
padding: 12px 20px;
justify-content: space-between;
width: 100%;
height: 50px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
}
.submenu-lista li:hover {
background: #EBF2F9 !important;
border-bottom: unset !important;
}
.submenu-lista li:first-child {
border-radius: 10px 10px 0px 0px;
}
.submenu-lista li:last-child {
border-radius: 0px 0px 10px 10px;
}
.barra-superior .icon-box {
display: flex;
align-items: center;
padding: 12px 10px;
gap: 10px;
width: max-content;
height: 60px;
cursor: pointer;
}
.barra-superior .btn-admision {
display: flex;
justify-content: center;
align-items: center;
padding: 7px 20px;
gap: 10px;
border: unset;
outline: unset;
width: 118px;
height: 60px;
background: #B40000;
mix-blend-mode: normal;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
text-align: center;
cursor: pointer;
color: #FFFFFF;
}
.barra-superior .btn-admision:hover {
background-color: #E33535;
}
.barra-superior .btn-admision:active {
background-color: #E33535;
border: 3px solid #B40000;
}
#menu-movil {
display: none;
}
@media (max-width: 1299px) {
.barra-superior {
width: 100%;
min-width: 600px;
max-width: 1200px;
padding: 0 10px;
}
.barra-superior .menu-horizontal {
display: none;
}
.barra-superior .btn-admision {
order: 1;
}
.barra-superior .icon-box {
order: 2;
}
#servicios-financieros {
display: none;
}
#user {
display: none;
}
#menu-movil {
display: block;
}
}
@media (max-width: 500px) {
.barra-superior {
width: 100%;
min-width: unset;
max-width: 500px;
}
}
JS
const elementos = document.querySelectorAll(".menu-horizontal li");
elementos.forEach((elemento) => {
elemento.addEventListener("mouseover", function () {
if (this.classList.contains("submenu")) {
const submenu = this.querySelector('.submenu-lista');
submenu.style.display = 'flex';
}
});
elemento.addEventListener("mouseleave", function () {
if (this.classList.contains("submenu")) {
const submenu = this.querySelector('.submenu-lista');
submenu.style.display = 'none';
}
});
});
