Saltar al contenido

Cómo crear un menú pegajoso (Sticky Menu)

21 mayo, 2018
menú pegajoso

Uno de los efectos más utilizados en el diseño web es el llamados menú pegajoso (sticky menu). Gracias a esta técnica podremos dejar «pegado» nuestro menú al hacer scroll, de forma que éste no desaparece, y el resto de la información pasa por detrás.

Menú Pegajoso (Sticky Menu)

Para conseguir este efecto vamos a trabajar únicamente con Html5 y Scss.

Prescindimos del uso de JavaScript con la ventaja que ello conlleva. Ahorro de código y velocidad en nuestra web.

Un poco de html para nuestro menú .

Para comenzar creamos un lista con los elementos del menú pegajoso, donde incluiremos un logotipo.

<header role="home">
	
	<div class="sticky-menu" data-uk-sticky="{top:-200, animation: 'uk-animation-slide-top'}">
		<nav class="main-navbar">
			<a href="#main-offcanvas" class="main-navbar__mobile-btn uk-icon-bars uk-visible-small" data-uk-offcanvas></a>
			<a href="" class="main-navbar__logo">LOGO</a>
			<a href="#search-modal" class="main-navbar__search-btn uk-icon-search" data-uk-modal></a>
			<ul class="main-navbar__nav uk-hidden-small">
				<li><a href="">Sobre Nosotros</a></li>
				<li><a href="">Servicios</a></li>
				<li><a href="">Clientes</a></li>
				<li><a href="">Portfolio</a></li>
				<li><a href="">Casos</a></li>
				<li><a href="">Blog</a></li>
				<li><a href="">Formación</a></li>
				<li><a href="">Contacto</a></li>
			</ul>
		</nav>
	</div>
	
	<section class="hero-content uk-vertical-align uk-text-center">
		<div class="uk-vertical-align-middle">
			<h1 class="hero-content__heading--contrast">
				Cuerpo de la Web
			</h1>
		</div>
	</section>
	
</header>

<section style="height: 100vh"></section>

<!-- page components -->
<div id="search-modal" class="uk-modal">
	<div class="uk-modal-dialog">
		<form action="" class="uk-form">
			<div class="uk-form-icon uk-width-1-1">
				<i class="uk-icon-search"></i>
				<input type="text" class="uk-width-1-1 uk-form-large" autofocus placeholder="What are you looking for?" />
			</div>
		</form>
	</div>
</div>

<div id="main-offcanvas" class="uk-offcanvas">
	<div class="uk-offcanvas-bar">
		<div class="uk-panel">
			<h3 class="uk-contrast">Raffcom</h3>
		</div>
		<ul class="uk-nav uk-nav-offcanvas" data-uk-nav>
			<li><a href="">Sobre Nosotros</a></li>
			<li><a href="">Servicios</a></li>
			<li><a href="">Clientes</a></li>
			<li><a href="">Portfolio</a></li>
			<li><a href="">Casos</a></li>
			<li><a href="">Blog</a></li>
			<li><a href="">Formación</a></li>
			<li><a href="">Contacto</a></li>
		</ul>
	</div>
</div>

Ménu de Navegación Responsive con Rotación 

El Scss de nuestro menú pegajoso

Aquí como siempre damos estilo a nuestro menú y crearemos el efecto, de tal manera que al hacer scroll, éste se quede fijo en la parte superior y el resto de información pase por detrás.

//Configuración
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,300,300italic,600,600italic);
$main-font: 'Open Sans', sans-serif;
$main-color: #ad111d;

//layout
body {
	margin-left: 0 !important;
}
header[role="home"] {
	position: relative;
	height: 100vh;
	min-height: 450px;
	background-image: url(https://source.unsplash.com/6PF6DaiWz48/2650x1440);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(black, .8);
		z-index: 0;
	}
	
	&::after {
		position: absolute;
		bottom: 0;
		left: 0;
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		-webkit-clip-path: polygon(0 100%, 0 95%, 50% 100%, 100% 95%, 100% 100%);
		background-color: white;
		z-index: 1;
	}
}

.sticky-menu {
	z-index: 100;
	&.uk-active .main-navbar {
		margin-top: 0;
	}
}

.main-navbar {
	position: relative;
	float: left;
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 16px;
	margin-top: 10px;
	background-color: rgba(black, .8);
	color: white;
	
	&::after {
		display: block;
		height: 0;
		clear: both;
	}
}
.main-navbar__logo {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 100px;
	height: 40px;
	margin: 0 auto;
	background-color: crimson;
	color: white;
	text-align: center;
	line-height: 40px;
	
	@media (min-width: 768px) {
		position: relative;
		float: left;
	}
}
.main-navbar__nav {
	float: right;
	padding: 0;
	margin: 0;
	list-style: none;
	
	> li {
		display: inline;
		padding: 0;
		margin: 0;
	}
	
	> li > a {
		display: inline-block;
		padding: 0 5px;
		color: white;
		text-decoration: none;
		text-transform: uppercase;
		line-height: 40px;
		transition: 280ms;
	}
	
	> li > a:hover {
		color: rgba(white, .8);
	}
}
.main-navbar--icons {
	padding: 0 5px;
	font-size: 18px;
	color: white;
	line-height: 40px;
	transition: 280ms;
	
	&:hover {
		color: rgba(white, .8);
	}
}
.main-navbar__search-btn {
	@extend .main-navbar--icons;
	float: right;
	margin-left: 0;
	
	@media (min-width: 480px) {
		margin-left: 10px;
	}
}
.main-navbar__mobile-btn {
	@extend .main-navbar--icons;
	float: left;
}

.hero-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
	height: calc(100% - 40px - 30px - 10px);
	padding: 0 30px;
}
.hero-content__heading {
	font-family: 'Open Sans';
	font-weight: 300;
	text-align: center;
	text-transform: uppercase;
}
.hero-content__heading--contrast {
	@extend .hero-content__heading;
	color: white;
}

Como de costumbre siempre os recomiendo que escribáis el código, de esta forma aprendéis el código, para luego mejorarlo.