TechCodeview

Mikä on CSS-navigointipalkki?

CSS:ssä navigointipalkkia kutsutaan myös navigointipalkkiksi, jota käytetään käyttöliittymässä tarjoamaan navigointilinkkejä tai valikkoja erilaisille valitsimille tai sivun käyttäjille verkkosivuston suunnittelussa. Käyttäjät voivat helposti navigoida verkkosivuston sisällössä käyttämällä sitä visuaalisena oppaana.

taulukon objekti javassa

Navigointipalkin avulla voimme parantaa verkkosivun esitystapaa ja tyyliä, ja se sisältää myös CSS:llä kuvatun suunnittelun, värit, fontit ja välit. CSS-navigointipalkki on kehitetty ja muotoiltu käyttämällä CSS-ominaisuuksia ja -sääntöjä tietyn ulkonäön ja toiminnallisuuden luomiseksi.

CSS-navigointipalkin ominaisuudet

Jotkut navigointipalkin ominaisuudet ovat seuraavat:

Asetteluvaihtoehdot:CSS:ssä navigointipalkki voidaan sijoittaa joko pystysuoraan sivun reunaan tai pystysuoraan yläreunaan.Linkkejä navigointiin:Valikko sisältää linkkejä sivuston eri sivuille ja osioihin. Näissä linkeissä on usein painikkeen, tekstin tai kuvakkeen tyyli.Avattavat valikot:Pudotusvalikot ovat toinen ominaisuus, joka voidaan lisätä navigointipalkkeihin. Lisää linkkejä tai vaihtoehtoja näytetään, kun käyttäjä vie hiiren osoittimen valikkokohdan päälle tai valitsee sen.Tyyli:CSS:n avulla suunnittelijat voivat muuttaa navigointipalkin visuaalisia elementtejä, kuten värejä, fontteja, reunuksia ja hover-tehosteita. Tämä auttaa luomaan yhtenäisen ja visuaalisesti houkuttelevan suunnittelun, joka sulautuu verkkosivuston yleiseen estetiikkaan.Responsiivinen muotoilu:Nykyaikaiset navigointipalkit suunnitellaan usein herkästi, ja ne mukautuvat erilaisiin näyttökokoihin ja laitteisiin. Responsiivisen suunnittelun avulla voimme taata, että navigointi on jatkossakin houkutteleva ja miellyttävä pöytäkoneilla ja mobiililaitteilla.Vuorovaikutus:CSS:n avulla voimme myös lisätä interaktiivisia tehosteita navigointielementteihin, kuten muuttaa linkin väriä sitä klikattaessa, tai se voi myös näyttää korostustehosteen, kun osoitinta viedään.

CSS-navigointipalkin avulla voimme parantaa käyttökokemusta ja helpottaa vierailijoiden navigointia sivuston sisällössä, joten se on tärkeä osa web-suunnittelua.

Esimerkki

Otetaan yksinkertainen esimerkki siitä, kuinka voimme luoda vaakasuuntaisen navigointipalkin CSS:n avulla:

 /* Basic styling for the navigation bar */ .navbar { background-color: #333; /* Background color */ overflow: hidden; /* Clear floats */ } /* Style for navigation bar links */ .navbar a { float: left; /* Float the links to the left */ display: block; /* Display links as blocks */ color: white; /* text color */ text-align: center; /* Center-align the text */ padding: 14px 16px; /* Padding around the links */ text-decoration: none; /* Remove underline from links */ } /* Change color on hover */ .navbar a:hover { background-color: #ddd; /* Background color on hover */ color: black; /* Text color on hover */ } <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#portfolio">Portfolio</a> <a href="#contact">Contact</a> 

Lähtö:

Tämän esimerkin vaakasuoraan siirtymispalkkiin luodaan viisi linkkiä: Etusivu, Tietoja, Palvelut, Portfolio ja Yhteystiedot. Olemme käyttäneet CSS:n perusominaisuuksia navigointipalkin, linkkien ja hover-tehosteiden muotoiluun. Haluamasi malli voi näkyä väreissä, fonteissa, pehmusteissa ja muissa tyyleissä.

CSS-navigointipalkin rajoitus

CSS-navigointipalkissa on joitain rajoituksia, ja jotkin ovat seuraavat:

Rajoitettu vuorovaikutuksen monimutkaisuus:Vaikka CSS voi tuottaa yksinkertaisia ​​hover-tehosteita ja siirtymiä, JavaScript saattaa joutua toteuttamaan monimutkaisempia interaktiivisia ominaisuuksia, kuten sisäkkäisiä avattavia valikoita, joissa on useita tasoja.Selainten välinen yhteensopivuus:Eri verkkoselaimet voivat tulkita CSS-sääntöjä eri tavalla, joten navigointipalkit voivat näyttää ja toimia eri tavalla. Voi olla haastavaa varmistaa yhtenäinen suunnittelu kaikissa selaimissa.Responsiivisen suunnittelun haasteet:Eri näytöillä ja laitteilla hyvin toimivan navigointipalkin tekeminen voi olla vaikeaa. Mediakyselyjä ja muita CSS-sääntöjä tarvitaan usein navigointipalkin asettelun muokkaamiseen eri näyttötarkkuuksilla.Rajoitettu animaatio:CSS pystyy käsittelemään perusanimaatioita, mutta JavaScript- tai CSS-kirjastoja voidaan tarvita monimutkaisempien animaatioiden tai tehosteiden, kuten sujuvan vierityksen, luomiseen.Monimutkainen muotoilu:Erittäin ainutlaatuisten ja monimutkaisten suunnittelujen luominen navigointipalkeille voi vaatia kehittyneitä CSS-tekniikoita, joiden päivittäminen voi olla haastavaa.Esteettömyysongelmat:Täysin CSS:stä valmistetut navigointipalkit eivät välttämättä aina noudata näytönlukuohjelmia ja muita aputekniikoita koskevia ohjeita. Varmistaaksesi, että navigointi on kaikkien käyttäjien saatavilla, on oltava erityisen varovainen.

Näistä haitoista huolimatta CSS-navigointipalkkien monipuolisuus ja laaja käyttö web-suunnittelussa jatkuvat. Niitä on kuitenkin ehkä täydennettävä JavaScriptillä ja muilla teknologioilla kehittyneempien ominaisuuksien ja saumattoman käyttökokemuksen saamiseksi.

Vaakasuuntainen navigointipalkki

Vaakasuuntainen navigointipalkki on horisontaalinen linkkiluettelo, joka on yleensä sivun yläosassa.

Katsotaanpa, kuinka luodaan vaakasuuntainen navigointipalkki esimerkin avulla.

Esimerkki

Tässä esimerkissä lisäämme ylivuoto piilotettu ominaisuus, joka estää että elementtejä poistumasta luettelon ulkopuolelle, näyttö: lohko Ominaisuus näyttää linkit lohkoelementteinä ja tekee koko linkkialueen napsautettavan.

java tehdä vaikka

Lisäämme myös kellua: vasen ominaisuutta, joka käyttää floatia saadakseen lohkoelementit liukumaan vierekkäin.

Jos haluamme täysleveän taustavärin, meidän on lisättävä taustaväri omaisuutta

paikallinen päivämäärä

 ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> 

Rajanjakajat

Voimme lisätä reunan navigointipalkin linkkien väliin käyttämällä raja-oikea omaisuutta. Seuraava esimerkki selittää sen selkeämmin.

Esimerkki

 ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> 

Korjatut navigointipalkit

Kun vieritämme sivua, kiinteät navigointipalkit jäävät sivun ala- tai yläosaan. Katso esimerkki samasta.

Esimerkki

 ul { list-style-type: none; position: fixed; width:100%; top:0; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> <h2>Side navigation bar with height: 100%; and position: fixed;</h2> <h3>Scroll the page, and see how the sidenav sticks to the page</h3>