Sådan bygges nemt Mashables navigationslinje med HTML og CSS

Når du besøger wecodejs.com, tænker du måske ved dig selv, ”Mand, hvad en navigationslinje. Hvilken stor, smuk navigationslinje. Det vinder. ”

Og så går du til din kodeditor og ser ikke ud til at få din klat af HTML-elementer til at ligne den store, smukke navigationslinje.

At skrive CSS er som at få en rodkanal, tror du. Heck, det kan lige så godt være magisk.

Det er ikke magisk. Du kan nemt oprette en "nav-bjælke" eller en hvilken som helst anden webkomponent. Alt du skal gøre er at ændre, hvordan du ser CSS.

Element, hvad er du?

Den første ting, vi er nødt til at komme ud af vejen, er forestillingen om, at alt CSS gør, er at prettificere ting. Det er den forkerte måde at tackle et CSS-projekt på, fordi det distraherer dig fra, hvad CSS virkelig bruges til. På et meget grundlæggende niveau bruger vi CSS til at organisere elementer på en webside.

Hvad er nu et element? Sådan definerer Wikipedia et HTML-element:

Et HTML-element er en individuel komponent i et HTML- dokument eller en webside, når dette først er blevet analyseret i dokumentobjektmodellen.

Yuck. Det hjælper os ikke rigtig. W3schools 'definition er mere ligetil, hvilket er: "Alle HTML-elementer kan betragtes som felter."

Det er fantastisk! Nej, seriøst kan dette ikke stresses nok. Det er meget let at blot glose forbi denne erklæring, når du slibes dig igennem CSS. Hvis vi kan forstå, at hvert enkelt HTML-element, vi opretter, er et nyt felt, kan vi bedre forstå CSS 'rolle i at arrangere disse felter.

Pludselig giver "kassemodellen" mening. Jeg er sikker på at du har set det før.

Polstrings-, kant- og margenegenskaber hjælper alle med at give vores kasser form. Vi bruger polstring til at skabe det visuelle billede af kassen, en kant til at indhegne dens omkreds og en margen til at adskille den fra alle andre kasser.

Hvordan gælder dette nu for vores nav bar conundrum? Lad os begynde at kode for at finde ud af det. Vi vil genskabe Mashables nav-bar minus dropdown og sociale ikoner (det er til en anden tutorial). Sørg for at kode sammen, da det er den bedste måde at lære på.

Planlæg, planlæg, planlæg

At starte et projekt med en tjekliste hjælper os med at skrive organiseret kode. Normalt ville vi oprette en trådramme, men vi har allerede en model at arbejde på.

HTML:

  1. Opret et nav-element, der indeholder alle fanelementerne
  2. Opret faneelementer
  3. Id den øverste fane som et logo

CSS:

  1. Indstil farven på nav-bjælken til en nuance af blå
  2. Indstil farven på faneboksen til en lysere nuance af blå
  3. Indstil skrifttyperne i faneboksene til sans-serif, og farv dem hvide
  4. Indstil font- og bokseegenskaber for logoet.

En fortælling om to navigationslinjer

Det ser ud til, at vi er klar til at kode, men hold! Husker du, da vi tidligere nævnte “blob of HTML”? Nå, du vil tænke på de elementer, du vil bruge til at oprette din nav bar. En måde at skrive det på HTML er ved at oprette en ikke-ordnet liste:

produktion:

Hvis du lige er begyndt med CSS, kan det se ud som en uforanderlig klat. Vi tilføjede ikke engang links, hvilket betyder, at vi skal redenere elementer.

Her er en enklere tilgang til oprettelse af en nav-bjælke, mens vi holder vores markering semantisk:

Som du kan se, har vi hacket en nav-bar bare ved hjælp af HTML. Nu er alt, hvad vi skal gøre, at implementere boksmodellen for at rumme dem ud. Lad os bruge den anden HTML-kedelplade til at oprette Mashables nav-bar, og så giver vi en gennemgang af, hvordan du styler den korrekt.

CSS til undsætning

Lad os nu organisere disse felter med noget CSS. Vi viser en liste over de vælgere, vi har brug for til denne opgave.

/* 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 { }

Den første ting, vi skal starte med, er at indstille bredden og højden på vores nav og tilføje lidt farve. En stor ressource til et farvehjul er lige her.

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

Vi har vores nav bar! Lad os derefter oprette nogle kasser, som vi kan flytte rundt. Det kan vi gøre ved at vise elementerne som blokke.

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

Det ser ud til, at vi har brudt vores pæne nav. Vi behøvede ikke nødvendigvis at gøre dette, men det er meget lettere at justere vores elementer, når vi kan behandle hvert element som en blok. For at løse dette skriver vi simpelthen, float: left;.dette får os tilbage til første række.

Bemærk: dette trin kan springes over,men hvis du bruger en ikke-ordnet liste, skal den implementeres.

Lad os nu oprette boksene. Hvis du ser tilbage på boksmodellen, vil du bemærke, at polstring er det, der skaber disse kasser. Hvis du vil se, hvordan dette fungerer, og teste størrelsen på dine felter, skal du indstille a background-colorog border:inden for nav avælgeren.

 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]