Cómo construir fácilmente la barra de navegación de Mashable con HTML y CSS

Cuando visite wecodejs.com, podría pensar: “Hombre, qué barra de navegación. Qué barra de navegación tan grande y hermosa. Está ganando ".

Y luego va a su editor de código y parece que no puede hacer que su blob de elementos HTML se parezca a esa gran y hermosa barra de navegación.

Escribir CSS es como conseguir un tratamiento de conducto, crees. Diablos, bien podría ser mágico.

Bueno, no es magia. Puede diseñar fácilmente una "barra de navegación" o cualquier otro componente web. Todo lo que tienes que hacer es cambiar cómo ves CSS.

Element, ¿qué eres?

Lo primero que tenemos que apartar es la noción de que todo lo que hace CSS es embellecer las cosas. Es la forma incorrecta de abordar un proyecto de CSS, porque lo distrae de para qué se usa realmente CSS. En un nivel muy básico, usamos CSS para organizar elementos en una página web.

Ahora bien, ¿qué es un elemento? Así es como Wikipedia define un elemento HTML:

Un elemento HTML es un componente individual de un documento HTML o página web, una vez que se ha analizado en el Modelo de objetos de documento.

¡Qué asco! Eso realmente no nos ayuda. La definición de W3schools es más sencilla, que es: "Todos los elementos HTML se pueden considerar como cuadros".

¡Eso es increíble! No, en serio, esto no se puede enfatizar lo suficiente. Es muy fácil simplemente pasar por alto esa declaración cuando se abre camino a través de CSS. Si podemos conceptualizar que cada elemento HTML que creamos es un nuevo cuadro, podemos comprender mejor el papel de CSS en la organización de esos cuadros.

De repente, el "modelo de caja" cobra sentido. Seguro que lo has visto antes.

Las propiedades de relleno, borde y margen ayudan a dar forma a nuestras cajas. Usamos relleno para crear la imagen visual del cuadro, un borde para cercar su perímetro y un margen para diferenciarlo de todos los demás cuadros.

Ahora, ¿cómo se aplica esto a nuestro enigma de la barra de navegación? Comencemos a codificar para averiguarlo. Vamos a recrear la barra de navegación de Mashable menos el menú desplegable y los íconos sociales (eso es para otro tutorial). Asegúrese de codificar, ya que esa es la mejor manera de aprender.

Planificar, planificar, planificar

Comenzar un proyecto con una lista de verificación nos ayuda a escribir código organizado. Normalmente, configuraríamos un wireframe, pero ya tenemos un modelo con el que trabajar.

HTML:

  1. Cree un elemento de navegación que contenga todos los elementos de la pestaña
  2. Crear elementos de pestaña
  3. Identifique la pestaña superior como logotipo

CSS:

  1. Establecer el color de la barra de navegación en un tono de azul
  2. Establezca el color del cuadro de pestañas en un tono más claro de azul
  3. Establezca las fuentes dentro de los cuadros de pestañas en sans-serif y coloréelas de blanco
  4. Establezca las propiedades de la fuente y el cuadro del logotipo.

Historia de dos barras de navegación

Parece que estamos listos para codificar, ¡pero espera! ¿Recuerdas cuando mencionamos "blob of HTML" antes? Bueno, quieres pensar en los elementos que quieres usar para crear tu barra de navegación. Una forma de escribirlo en HTML es creando una lista desordenada:

salida:

Si recién está comenzando con CSS, esto puede parecer una gota inmutable. Ni siquiera agregamos enlaces, lo que significa que tenemos que anidar elementos.

Aquí hay un enfoque más simple para crear una barra de navegación mientras se mantiene nuestra semántica de marcado:

Como puede ver, hemos pirateado una barra de navegación con solo usar HTML. Ahora todo lo que tenemos que hacer es implementar el modelo de caja para espaciarlos. Usemos la segunda plantilla HTML para crear la barra de navegación de Mashable, y luego proporcionaremos un recorrido sobre cómo diseñarla correctamente.

CSS al rescate

Ahora organicemos estos cuadros con algo de CSS. Vamos a enumerar todos los selectores que necesitaremos para esta tarea.

/* we'll target the entire nav */nav {}
/*we'll target a specific tab*/ nav a { }
/*we're going to use a css pseudo-class to change the background color when we hover over a tab */ nav a:hover { }/*we're going to target the logo for some specific styles 'cause the logo is super special*/ #logo { }

Lo primero con lo que deberíamos comenzar es establecer el ancho y la altura de nuestra navegación y agregar un poco de color. Un gran recurso para una rueda de colores está aquí.

nav { width: 100%; //width should be a percentage for responsiveness height: 38px; //height should be px. Adjust to your liking background-color: #0b98de;//hex color code should be used
} nav a { } nav a:hover { } #logo { }

We have our nav bar! Next, let’s start creating some boxes that we can move around. We can do that by displaying the elements as blocks.

nav { width: 100%; background-color: #0b98de;
} nav a { display: block; 
 } nav a:hover { } #logo { }

It seems like we’ve broken our nice nav. We didn’t necessarily need to do this, but aligning our elements is much easier when we can treat each element as a block. To fix this, we simply write, float: left;. This will get us back to square one.

Note: this step can be skipped,but if you’re using an unordered list, then it must be implemented.

Now let’s create the boxes. If you look back at the box model, you’ll notice that padding is what creates these boxes. If you want to see how this works and test the size of your boxes, set a background-color and border: within the nav a selector.

 nav a { display: block; float: left;/*We're just setting up fonts settings here*/
 font-family: sans-serif; font-size: 9px; color: white;
/*Box Method Test AKA handicap*/
 background-color: #17b0cf; border: 1px solid #000; 
 /*Padding Our Box*/
 padding-top: 20px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;
/Let's remove the dumb link decoration*/ text-decoration: none;
} 

The widths are all different, but that’s consistent with Mashable’s random style. You can always set a width if you crave consistency. We also adjusted the font here for a clean look. You can get some great fonts from Google. Make sure to stick the link tag they provide into your ad> tag.

We’ll delete our handicap and move the background-color property to the nav a:hover selector. You can always keep the handicap on if you need to make adjustments.

We’re almost done. Let’s work on the logo.

#logo { /*font*/
 font-family: 'Hind', sans-serif; font-size: 30px; letter-spacing: -2px; text-shadow: 1px 1px 2px #c4c4c4;
/*box*/
 padding-left: 20px; padding-right: 40px; margin-right: 10px; margin-top: -20px; }

You might have noticed by now that your padded boxes extend past the nav. All you have to do is hide the overflow by adding overflow: hidden; to your nav selector. This little property gets rid of a lot of frustrations.

The final product

Closing statements

CSS can appear to be a language full of magic, especially if you’re used to the logic of programming languages. But all you have to do is keep the box method in mind when constructing the layout of a site.

Of course, there are tricks that CSS masters use to add that extra bit of style. We’ll list a bunch of resources below that’ll make you a pro at CSS in no time. If you’re still annoyed with CSS, then you should take a look at some of the pre-processors designed to make the task of styling an entire site more efficient.

Resources:

CSS Tricks

You’ll know how to create anything you can dream of by browsing through this site.

Thecodeplayer

Thecodeplayer offers live coding to help you understand the nuances of CSS.

Color calculator

Get precise values for your background colors.

Don’t forget to drop some claps if this tutorial helped. Share it with friends who head desk when wrangling with CSS.

Code in peace,

Raji Ayinla|intern technical content writer|email: [email protected]