Trabajando en un proyecto empecé a trabajar con este menú, quise darle un poco más detalle y pensé guardarlo como futura referencia para otros proyectos. Así mismo me quedo pensando en todas las opciones que puedo crear de diferentes menús y tenerlos a la mano para el desarrollo de futuros proyectos.
Esta cabecera es muy sencilla, con su logo y menú, mi objetivo es hacerla lo más sencilla posible y dejarla lista incluso para poder usarse en móviles.
Encontré esta fuente Google Fonts llamada Poiret One y decidir empezar a partir de ahí.
Primero trabajamos con la estructura del menú, sin ningún estilo por el momento.
HTML
Archivo: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Minimalist | Welcome</title>
</head>
<body>
<header>
<nav id="navbar">
<div class="container">
<h1><a href="index.html">Minimalist</a></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>Vista Web
Ahora voy a instalar el Font de Google y vamos a darle un estilo muy sencillo, lo más importante será el posicionamiento que le daremos al menú utilizando un container que pueda agrupar la cabecera en un cierto límite de espacio. Aunque probablemente pueda usar Flexbox, en este caso utilizaré los comandos más simples de HTML y CSS.
HTML
Archivo: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Poiret+One&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Minimalist | Welcome</title>
</head>
<body>
<header>
<nav id="navbar">
<div class="container">
<h1><a href="index.html">Minimalist</a></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>CSS
Archivo: css/style.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poiret One', cursive;
line-height: 1.7em;
}
a {
color: #000;
text-decoration: none;
}
h1,
h2,
h3 {
padding-bottom: 20px;
}
p {
margin: 10px 0;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 0 20px;
}
#navbar {
overflow: auto;
}
#navbar h1 {
float: left;
padding-top: 20px;
}
#navbar ul {
list-style: none;
float: right;
}
#navbar ul li {
float: left;
}
#navbar ul li a {
display: block;
padding: 20px;
text-align: center;
}
#navbar ul li a:hover {
color: #df2e64;
}Vista Web
Ahora sólo para terminar agregaremos la vista del menú en dispositivos móviles y así terminamos nuestra cabecera minimalista.
HTML
Archivo: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Poiret+One&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
media="screen and (max-width: 768px)"
href="css/mobile.css"
/>
<title>Minimalist | Welcome</title>
</head>
<body>
<header>
<nav id="navbar">
<div class="container">
<h1 class="logo"><a href="index.html">Minimalist</a></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>CSS
Archivo: css/mobile.css
#navbar .logo {
float: none;
text-align: center;
}
#navbar ul,
#navbar ul li {
float: none;
}
#navbar ul li a {
padding: 10px;
}Vista desde móvil
